javascript - KeyCode Press 上的数字计数器未更新 HTML

Question

我正在尝试获取我的 <p> 1980 年在我的 HTML 中每次按下向上移动一个。它第一次使用下面的代码工作，1981 打印在我的文档中，但之后的每一步都会返回以下错误:Uncaught NotFoundError: Failed to execute 'replaceChild on 'Node': The node to be replaced is null.如果能给我一些建议，我真的很感激。

非常感谢!!!

x=0; //Setting cursor counter

//Adding event listener that adds 1 to the numberArray every time the user presses up.
document.addEventListener('keydown', function (evt) {
if (evt.keyCode === 38) {
    //alert('The "UP" key is being held down...?');
    x+=1;
    arrayGroup = eval ("numberArray"+(x));
    var parent = document.getElementById("div1");
    var child = document.getElementById("p1");
    var para = document.createElement("p");
    var node = document.createTextNode('198'+x+'');
    para.appendChild(node);
    parent.replaceChild(para,child);

    drawpic();

    }
});

Answer 1

您收到错误的原因是因为您正在替换 child节点 para节点。当您调用 var child = document.getElementById('p1')没有找到具有该 ID 的节点，这会导致错误。

您需要在新的 <p> 上设置 id替换具有该 ID 的节点后标记。

试试这个:

x=0; 
document.addEventListener('keydown', function (evt) {
if (evt.keyCode === 38) {
    x+=1;
    arrayGroup = eval ("numberArray"+(x));
    var parent = document.getElementById("div1");
    var child = document.getElementById("p1");
    var para = document.createElement("p");        
    var node = document.createTextNode('198'+x+'');
    para.appendChild(node);
    parent.replaceChild(para,child);
    para.setAttribute('id', 'p1');
    drawpic();

   }
});