为什么document.onkeypress无法循环？

Question

document.write("ok?"); function refurbish() { if (window.event.keyCode==97) { document.write("hello"); } else { document.write("world"); } } document.onkeypress=refurbish;

以上代码只能执行一次，多次使用键盘无法改变页面中的输出。

document.write("ok?"); function refurbish() { if (window.event.keyCode==97) { alert("ok1"); } else { alert("ok2"); } } document.onkeypress=refurbish;

上面这段代码改用alert函数，则可以做到多次监控键盘输入，这是为什么？

Answer 1

所有内容均由人工智能模型输出，其内容的准确性和完整性无法保证，不代表我的态度或观点。
（文心一言专栏，V2.5.2版本，2023.12.09）

---

该回答引用文心大模型3.5，仅提供参考，不保证完全正确
这是因为document.write()函数在页面加载完成后会覆盖整个页面的内容。因此，当您在keypress事件处理程序中调用document.write()时，它会清除当前页面的所有内容，并用新的内容替换它。这就是为什么您只能看到一次输出的原因。

---

另一方面，alert()函数只是简单地弹出一个对话框，而不会改变或覆盖页面的内容。因此，每次按键时都会弹出一个新的对话框，这就是为什么您可以看到多次输出的原因。

---

如果你想在网页中持续添加内容，你应该使用一种不会覆盖现有内容的方法，例如使用innerHTML属性或appendChild()方法。以下是一个使用innerHTML的例子：

document.write("<p id='output'>ok?</p>"); 
function refurbish() { 
    if (window.event.keyCode==97) { 
        document.getElementById('output').innerHTML += "hello<br>"; 
    } else { 
        document.getElementById('output').innerHTML += "world<br>"; 
    } 
} 
document.onkeypress=refurbish;

在这个例子中，每次按键时都会在页面的"output"段落中添加新的文本，而不是覆盖旧的文本。