javascript - 如何将 onclick 事件侦听器添加到 Javascript 中创建的按钮元素？

问题描述

我正在尝试创建一个动态的 MadLibs 网页。在主页上，用户可以选择 3 个故事来为其创建 MadLib，当他们单击按钮时，页面会更改他们将在文本输入字段中插入名词、形容词等的位置。然后，他们必须单击一个按钮，用他们输入的单词替换故事中的原始单词。

我创建并附加到页面的第二页上的按钮，但由于某种原因，我想附加到它的 onclick 事件侦听器触发替换单词的功能不会附加到按钮元素。

下面是我创建按钮元素并将其附加到文档正文的代码。我创建的替换故事中单词的函数称为 subWords()。

          var addb = document.createElement("button");
          addb.innerHTML = "Add Words!";
          addb.id = "addb";
          addb.value = "addb";
          document.body.appendChild(addb);
          document.getElementById("addb").addEventListener('click',subWords);

我尝试了很多不同的东西，包括：

addb.onclick = subWords;

在我将按钮附加到正文之前，

addb.onclick = function(){subWords};

addb.onclick = function(){subWords()};

addb.onclick = function(){subWords;};

以及我可以在这个网站上找到的几乎所有其他组合。他们都不为我工作！！

如果有人可以帮我解决这个问题，我将不胜感激。我已经尝试了一切，但没有什么对我有用。谢谢你。

标签： javascripthtmlbuttononclickaddeventlistener

所以你可以做的是使用 HTML DOM 附加到父级而不创建元素。

(parentElemnt).innerHTML += `<button value="addb" id="addb" onclick="subWords">Add Words!</button>`;

+= 将追加 `` ... 中的内容，而不是创建和追加然后给出值，您可以一行完成。使用 DOM 选择父元素，然后在里面替换

（父元素）

检查这是否可行，祝你好运。很抱歉没有包含最佳实践的代码。如果您可以分享您的整个代码，我将很乐意检查如何在不附加到元素的情况下进行修复。

拉萨尔。

javascript - 如何将 onclick 事件侦听器添加到 Javascript 中创建的按钮元素？

问题描述

解决方案

推荐阅读