如何在 Javascript 中向 btn.innerHTML 添加函数？

Question

我正在尝试为学校项目制作一个简短的选择冒险 HTML 游戏。我为角色名称添加了一个小输入部分，游戏将在整个过程中使用它来指代玩家。我已经使用了用户名，所以它指的是玩家作为在“输入部分”中输入的文本。但是，我不是很有经验，我只得到了在函数中引用玩家姓名的页面。我过去曾尝试将变量“交换”到另一页——但我无法弄清楚，所以我不得不像这样将所有内容都保存在一个页面上。如果有任何替代方法也允许使用插入的用户名，我们将不胜感激。function othername() {  var input = document.getElementById("userInput").value;  document.write("`Greetings, ");  document.write(input);  document.write("!`")  var btn = document.createElement("BUTTON");  btn.innerHTML = "Destroy";  document.body.appendChild(btn);  btn.innerHTML.onclick = function() {    myFunction()  };  document.body.appendChild(btn);}function myFunction() {  document.getElementById("userInput").value;  document.write("aaaaaaaaaaaaaaaaah");}<form id="form" onsubmit="return false;">  <input style="position:absolute; left:40%; top:40%; width:19.7%;" type="text" id="userInput" />  <input style="position:absolute; left:40%; top:42%; width:20%;" type="submit" onclick="othername();" /></form>我希望能够通过 .onclick = function(){myFunction()}; 为 btn 变量分配一个函数；和 document.body.appendChild(btn); 就像之前创建“销毁”按钮时所做的那样。

Answer 1

您不会向按钮的内容添加 onclick 事件。您将其添加到按钮：

btn.onclick = myFunction;

注意：document.write()在页面首次加载后调用（例如，通过onclick像您所做的处理程序）将导致整个页面被删除并替换为您编写的内容。

在您的情况下，该页面将仅包含“！`”，因为首先您要删除整个页面以编写“问候语”，然后删除“问候语”并用“！`”覆盖它

使用innerHTML来代替。