javascript - Django REST Framework 和 Javascript：样式的变化是随机的

Question

在我的 index.html 中，我有四个 div 对象，ID 为“seat-1”到“seat-4”和一个输入字段：

索引.html

<input type="date" class="form-control" id="date-input">
<div class="seat" id="seat-1"></div>
<div class="seat" id="seat-2"></div>
<div class="seat" id="seat-3"></div>
<div class="seat" id="seat-4"></div>

样式.css

.seat {
    width: 50px;
    height: 50px;
    border-style: solid;
    border-width: 1px;
    border-radius: 8px;
    cursor: pointer;
}
.seat:hover {
    background-color: #e6e6e6;
}

更改日期时，我正在加载实际内容 - 始终是一个 ID 连接到所选日期的数组，例如：

["seat-1", "seat-2", "seat-4"]

在使用数组之前，我正在加载所有对象并在它们上面放置一个白色背景。之后我遍历数组以放置不同颜色的背景（这里是“红色”）！

脚本.js

"use strict"

document.addEventListener("DOMContentLoaded", e => {
    let date_input = document.getElementById("date-input");        

    date_input.addEventListener("change", e => {
        let act_date = date_input.value;
        colorReset();
        colorActiveObjs(act_date);
    });

    function colorReset() {
        let url = 'http://127.0.0.1:8000/api/seat/list/';
        // here I'm getting an array of all objects: ["seat-1", "seat-2", and so on...]

        fetch(url)
        .then((resp) => resp.json())
        .then(function(data) {
            for (let i=0; i < data.length; i++) {
                document.getElementById(data[i].name).style.backgroundColor = "rgb(255, 255, 255)";
            };
        });
    };

    function colorActiveObjs(dt) {
        let url = 'http://127.0.0.1:8000/api/booking/date/' + dt + '/';

        fetch(url)
        .then((resp) => resp.json())
        .then(function(data) {
            for (let i=0; i < data.length; i++) {
                // data[i].name for example would be "seat-1" or "seat-4"
                document.getElementById(data[i].name).style.backgroundColor = "rgb(255, 0, 0)";
            };
        });
    };
};

我的问题是，这只有时有效！我已经用 Chrome、Firefox 等对其进行了测试，但是在切换日期之后，无论 div 是否获得预期的背景颜色，这都是命中注定的！有人知道我做错了什么还是我错过了什么？

感谢您的帮助，祝您周日愉快！

标签： javascriptcssdjango-rest-frameworkstylesbackground-color