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

Posted 2023-05-07

【中文标题】如何在 Javascript 中向 btn.innerHTML 添加函数？

【英文标题】：How do I add a function to a btn.innerHTML in Javascript?

【发布时间】：2019-12-25 04:18:14

【问题描述】：

我正在尝试为学校项目制作一个简短的选择冒险 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);就像之前创建“销毁”按钮一样。

【问题讨论】：

那么你问的没有意义。事件处理程序用于元素，而不是简单的文本内容。将处理程序直接放在按钮上。

【参考方案1】：

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

btn.onclick = myFunction;

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

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

请改用innerHTML。