Как использовать событие addEventListener в классе?

Question

[Евгений Усачев]

На странице может находится несколько песен. Для каждой песни я создал свой тег audio. Потом я инициализирую для каждой песни её audio. Дальше мне нужно использовать this.audio.addeventlistener, но js ругается : (.

class song_in_this_page{
                constructor(number){
                    this.play_element = `<img class="img_action_in_music_line_in_post" 
                     src="/NecessaryFiles/white_play.png" onclick="play_music_file_in_post(${number - 1})">`; // Этот компонент содержит кнопку play
                    this.pause_element = `<img class="img_action_in_music_line_in_post" 
                     src="/NecessaryFiles/white_pause.png" onclick="play_music_file_in_post(${number - 1})">`; // Этот компонент содержит кнопку pause
                    this.audio = document.getElementById(`audio_to_music_in_post_id=${number}`); // У каждой песни своё audio
                    this.action_in_music_line_in_post =
                     document.getElementById(`action_in_music_line_in_post${number}`); // У каждой песни есть div с действием
                    this.progress_bar = document.getElementById(`progress_bar_to_music_in_post${number}`);/* У каждой песни своя линия прогресса */
                    this.duration = this.audio.duration; /* У каждой песни своя длительность*/
                    this.current_time = 0; /* У каждой песни своё корректное время */
                }
                play(){
                    this.audio.play();
                    this.action_in_music_line_in_post.innerHTML = this.pause_element; // Создаём визуальную кнопку pause
                } // Запускаем песню и меняем кнопку
                pause(){
                    this.audio.pause();
                    this.action_in_music_line_in_post.innerHTML = this.play_element; // Создаём визуальную кнопку play
                } // Останавливаем песню и меняем кнопку
                this.audio.addEventListner() // ошибка тут
            }

Как я должен это исправить (использовать addEventListner в классе)?

Comments

[Сергей Соколов]

не в теле же класса писать всё это – внутри какой-нибудь функции, например в конце конструктора

[Евгений Усачев]

Сергей Соколов, Внутри конструктора можно писать все функции или только методы элементов класса?

[Сергей Соколов]

Евгений Усачев, контсруктор выполняется когда создаёте новый экземпляр класса:

const song1 = new song_in_this_page(1); // создаст экземпляр и выполнит его constructor(1)

// потом по нажатию на кнопку
song1.play();

[Евгений Усачев]

Сергей Соколов, Код в конструкторе отработал корректно. Спасибо за помощь!

Answer 1

[Максим Шемякин]

Ты пытаешься вызвать метод в классе, попробуй перенести в constructor или когда создаёшь экземпляр используя его значения вызови метод

class song_in_this_page{
    constructor(number){
        this.play_element = `<img class="img_action_in_music_line_in_post" 
         src="/NecessaryFiles/white_play.png" onclick="play_music_file_in_post(${number - 1})">`; // Этот компонент содержит кнопку play
        this.pause_element = `<img class="img_action_in_music_line_in_post" 
         src="/NecessaryFiles/white_pause.png" onclick="play_music_file_in_post(${number - 1})">`; // Этот компонент содержит кнопку pause
        this.audio = document.getElementById(`audio_to_music_in_post_id=${number}`); // У каждой песни своё audio
        this.action_in_music_line_in_post =
         document.getElementById(`action_in_music_line_in_post${number}`); // У каждой песни есть div с действием
        this.progress_bar = document.getElementById(`progress_bar_to_music_in_post${number}`);/* У каждой песни своя линия прогресса */
        this.duration = this.audio.duration; /* У каждой песни своя длительность*/
        this.current_time = 0; /* У каждой песни своё корректное время */


        // Тут вызываешь методы
        this.audio.addEventListner() // ошибка тут
    }

    /**
     * Тут методы
     * 
     * 
     * 
     * 
     */

    play(){
        this.audio.play();
        this.action_in_music_line_in_post.innerHTML = this.pause_element; // Создаём визуальную кнопку pause
    } // Запускаем песню и меняем кнопку
    pause(){
        this.audio.pause();
        this.action_in_music_line_in_post.innerHTML = this.play_element; // Создаём визуальную кнопку play
    } // Останавливаем песню и меняем кнопку
}