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

Question

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

我的用户名已经生效，所以它指的是 'typing section' 中输入的文本中的玩家。但是，我不是很有经验，我只得到了在函数中引用玩家名字的页面。我过去曾尝试将 'exchange' 变量转移到另一页，但我无法弄明白，所以我求助于将其全部保留在一个页面上，就像这样。如果有任何替代方法也允许使用插入的用户名，我们将不胜感激。

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);正如之前创建 "Destroy" 按钮时所做的那样。

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.

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

How do I add a function to a btn.innerHTML in Javascript?

html

javascript

function

innerhtml