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

Question

我正在尝试为学校项目制作一款简短的选择冒险 HTML 游戏。我为 Angular 色名称添加了一个小输入部分，游戏将在整个过程中使用该名称来指代玩家。

我已经让用户名正常工作，因此它指的是玩家作为“打字部分”中输入的文本。但是，我经验不是很丰富，我只得到了在函数中引用玩家姓名的页面。我过去曾尝试将变量“交换”到另一个页面，但我无法弄清楚，所以我只好将其全部保留在一个页面上，如下所示。如果有任何替代方法也允许使用插入的用户名，我们将不胜感激。

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;

Note: Calling document.write() after the page first loads (for example, via an onclick handler like you have done) will cause the entire page to be deleted and replaced with the content of what you've written.

In your case the page will contain only "!`" because first you are deleting the entire page to write "Greetings" then you delete the "Greetings" and overwrite it with "!`"

Use innerHTML instead.