Блог

Главная - Вопросы по программированию - Пытаюсь создать класс js для html (меняю фоновое изображение каждые несколько секунд), нужна помощь

Пытаюсь создать класс js для html (меняю фоновое изображение каждые несколько секунд), нужна помощь

#javascript #html #class

#javascript #HTML #класс

Вопрос:

Здравствуйте, я пытаюсь создать класс, в котором будет множество объектов, изменяющих фоновые изображения на сайте, без создания каждого объекта по одному.

Итак, я сделал это, чтобы изменить фоновое изображение одного «объекта» :

 let x = 0; //index

const image = ["assets/img1.jpeg", "assets/img2.jpeg", "assets/img3.jpeg"]; //images to show

function displayNextImage() {
    x = (x === 2) ? 0 : x   1;
    document.getElementById("myID").setAttribute("style", "background-image: url("   image[x]   ")") //change images 
};

function startTimer() {
    setInterval(displayNextImage, 3000); //start looping
}

startTimer();

Это работает, и поэтому я хочу сделать это классом :

 class changingImageObject {
    constructor(img1, img2, img3, id) {
        this.image = [img1, img2, img3];
        this.id = id;
        this.x = 0;
    };

    displayNextImage() { //Change the showed image x 1
        this.x = (this.x === 2) ? 0 : this.x   1;
        document.getElementById(this.id).setAttribute("style", "background-image: url("   this.image[this.x]   ")");
    };

    startTimer() { //Change image after 3sec (looping)
        setInterval(this.displayNextImage, 3000);
    };
}

const changingImages = new changingImageObject("assets/img1.jpeg", "assets/img2.jpeg", "assets/img3.jpeg", "myID");
changingImages.startTimer();

Я добавил скрипт в конец html, он создает объект, но функция displayNextImage выдает ошибку: Uncaught TypeError: не удается прочитать свойство ‘setAttribute’ null
в displayNextImage

Спасибо за чтение

Комментарии:

1. Что вы получаете, когда используете console.log document.getElementById(this.id) ?

2. О, это null, и когда я делаю console.log (this.id ) в displayNextImage это не определено, я не понимаю, почему… И когда я делаю console.log (this.id ) в конструкторе я получил идентификатор…

3. После setInterval все переменные в моем объекте становятся неопределенными…

4. Понятно. Кажется, вам нужно привязать this значение к функции . Попробуйте добавить this.displayNextImage.bind(this) в свой конструктор.

Ответ №1:

Кажется, мне нужно было привязать свой метод к конструктору, благодаря Mubaraq.

Код с исправлением.

 constructor(img1, img2, img3, id) {
        this.image = [img1, img2, img3];
        this.id = id;
        this.x = 0;
        this.displayNextImage = this.displayNextImage.bind(this);
    };

Теперь мне нужно научиться использовать bind 🙂