Упражнение 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>`; 
    }
}