如何將 Object 與普通 Javascript 中的 DOM 元素相關聯？

Question

我正在嘗試創建一個應用程序，每次單擊按鈕都會創建一個新的秒表，它由一個 h1 和一個 div 元素組成：

const addButton = document.querySelector('.add-button')!;
addButton.addEventListener('click', createTimer);

function createTimer() {
    var divTimer = document.createElement('div');
    var divHeader = document.createElement('h1');

    divHeader.textContent = 'Timer';
    divTimer.textContent = '00:00:00';

    document.body.appendChild(divHeader);
    document.body.appendChild(divTimer);
}

但是，我想將按上面的按鈕創建的每個秒表的 DOM 元素與秒表 object 相關聯。 這個想法是每個秒表都應該有自己的秒、分、小時。

const testTimerDisplay = document.getElementById('timerA')!;

//Class based objects ES6
class Stopwatch {
    seconds: number;
    minutes: number;
    hours: number;

    constructor() {
        this.seconds = 0;
        this.minutes = 0;
        this.hours = 0;
    }

    tick() {
        setInterval(() => {
            this.seconds++
            testTimerDisplay.textContent = this.seconds.toString(); //NOT A GOOD IMPLEMENTATION
        }, 1000)
    }
}

const timerA = new Timer();

如您所見，當我調用tick() 時，它只會修改testTimerDisplay，這當然不是我最終想要的。 有沒有辦法讓我單擊按鈕並將新的秒表 object 與其創建的 DOM 關聯？

Answer 1

好吧，您可以在Stopwatch結構中使用 ID：

// remove this:
// const testTimerDisplay = document.getElementById('timerA')!;

//Class based objects ES6
class Stopwatch {
    // add the id prop
    id: string,
    seconds: number;
    minutes: number;
    hours: number;

    // add id as a parameter for the constructor
    constructor(id) {
        this.id = id; // set the id
        this.seconds = 0;
        this.minutes = 0;
        this.hours = 0;
    }

    tick() {
        setInterval(() => {
            this.seconds++;
            // at tick method you increment display based on the id
            const timerId = `timer${this.id}`;
            const testTimerDisplay = document.getElementById(timerId);
            testTimerDisplay.textContent = this.seconds.toString();
        }, 1000)
    }
}

現在您必須在您的createTimer function 標記 id 時設置此 ID 字符串：

const addButton = document.querySelector('.add-button')!;
addButton.addEventListener('click', createTimer);

function createTimer() {
    // first define this timer id, you could make it based on your list indexes
    var id = document.getElementsByClassName('timer').length || 0;
    var nextId = id + 1;

    // then make a parent div that encapsulate the below tags
    var parentDiv = document.createElement('div');
    parentDiv.id = `timer${nextId}`;
    parentDiv.className = 'timer';

    var divTimer = document.createElement('div');
    var divHeader = document.createElement('h1');

    divHeader.textContent = 'Timer';
    divTimer.textContent = '00:00:00';

    parentDiv.appendChild(divHeader);
    parentDiv.appendChild(divTimer);

    document.body.appendChild(parentDiv);
}

所以你創建你的秒表 Object 傳遞所需的 ID，這只會增加它自己的計時器：

var stopwatch1 = new Stopwatch('1');