如何在 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((}; 和 document.body.appendChild(btn( 为 btn 变量赋值一个函数;就像之前创建"销毁"按钮一样。

Answer 1

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

btn.onclick = myFunction;

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

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

请改用innerHTML。