XMLHttpRequest（）练习

Question

我正在调用一个php文件，该文件从文件中读取随机名称。我想将名称动态添加到表中。如果名称已经存在，我想增加它旁边另一个单元格中的计数。我的代码中有一个错误，我找不到它。

这是我的代码

et button = document.querySelector("input");
let par = document.querySelector("p");
let table = document.querySelector("table");
let xhr;
let myArr=[14];
let tempStrin;

function upDateTable(name){

    for(let i=0; i < myArr.length; i++){
        if(myArr[name>=1]){
            myArr[name]++;
            document.querySelectorAll(`#${name}`).innerText = myArr[name];
        }
        else{
            myArr[name]=1;
            table.innerHTML+=`<tr><td>${name}</td><td id=${name}>${myArr[name]}</td></tr>`
        }
    }
}

function xhrCall () {

    try {
        xhr = new XMLHttpRequest();
        xhr.addEventListener(`readystatechgange`, function () {
            if (xhr.readyState === 4) {
                if (xhr.status === 200) {
                    tempStrin = xhr.responseText;
                    updateTable(tempStr);
                }//if
            }//if
        });//on readystatechange

    xhr.open('GET', "http://csdev.cegep-heritage.qc.ca/students/1175333/JBarbeau_C31L03_Files/php/random.php");
    xhr.send();
}
catch(e){
        console.error("Request did not work");
}

}

let testTime;
button.addEventListener('click' ()=>{
    if (button.value==="Start"){
        button.value==="Stop";
        testTime= setInterval(xhrCall,3000);
    }
    else if(button.value==="Stop"){
        button.value="Start";
        clearInterval(testTime);
    }
});

Answer 1

我对document.querySelectorAll('#${name}')感到不满意，我相信这是它不起作用的原因之一。 querySelectorAll将返回一个HTMLCollection，因此将innerTest设置为无意义。另外，您使用的是ID，因此从技术上讲，它在页面上应该是唯一的。

此外，我认为您将从'字典'对象而不是经典数组中受益匪浅：

let dict = {};

function upDateTable(name){
    //We check if our name exists
    if (dict[name]) {
        dict[name] += 1;
        document.getElementById(`#${name}`).innerText = myArr[name];
    } else {
        dict[name] = 1;
        //no reason to put our value in the string, we know it's always 1
        table.innerHTML += `<tr><td>${name}</td><td id=${name}>1</td></tr>`; 
    }
}