Javascript 在动态创建的div中执行onclick赋值_Javascript_For Loop_Dom_Onclick

Javascript 在动态创建的div中执行onclick赋值

javascript for-loop dom

Javascript 在动态创建的div中执行onclick赋值,javascript,for-loop,dom,onclick,Javascript,For Loop,Dom,Onclick,我希望在动态创建的div中使用.onclick函数动态创建一行4个按钮。这在单个div中运行良好，但是当尝试在嵌套div中创建按钮时，只有在最后一个div中创建的按钮才能正常工作我发现了与在循环中使用var产生问题有关的问题，但这里的情况似乎不是这样。我已经尝试为.onclick分配一个单独的函数，但没有效果，只需要对它进行排序 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF

我希望在动态创建的div中使用.onclick函数动态创建一行4个按钮。这在单个div中运行良好，但是当尝试在嵌套div中创建按钮时，只有在最后一个div中创建的按钮才能正常工作

我发现了与在循环中使用var产生问题有关的问题，但这里的情况似乎不是这样。我已经尝试为.onclick分配一个单独的函数，但没有效果，只需要对它进行排序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="entries">
    </div>
</body>


文件


设synth=window.speechSynthesis；
让createButton=函数（pCat、索引、短语索引）{
let button=document.createElement（“按钮”）；
button.innerText=pCat[index]；
button.className=“条目”；
button.onclick=函数（）{
synth.speak（新SpeechSynthesisUtterance（“boo”）；//从json说出短语
}
document.getElementsByClassName（“phraseDiv”）[phrasedindex].appendChild（button）；//将按钮添加到新创建的div以进行焦点管理。
}
让populateEntries=函数（）{
设phraseDividex=-1；
设pCat=[“一”、“二”、“三”、“四”、“五”、“六”、“七”、“八”、“九”]；
for（设i=0；i



守则的结果：
只有创建的最后一行按钮附加了.onclick事件。这是个问题
*编辑：数组索引
我想你说的是一个实时事件侦听器。您可以这样创建它：
document.addEventListener('click', e => {
  const button = e.target.closest('button')

  if (button) {
       synth.speak(new SpeechSynthesisUtterance("boo"));
  }
})

此外，为每次迭代调用document.getElementById（“条目”）.innerHTML+=
非常不协调。改为附加到字符串（按钮也是，最好使用）并在最后设置innerHTML
 我想你说的是一个现场事件监听器。您可以这样创建它：
document.addEventListener('click', e => {
  const button = e.target.closest('button')

  if (button) {
       synth.speak(new SpeechSynthesisUtterance("boo"));
  }
})

此外，为每次迭代调用document.getElementById（“条目”）.innerHTML+=
非常不协调。改为附加到字符串（按钮也是，最好使用）并在最后设置innerHTML
 欢迎来到StackOverflow 欢迎来到StackOverflow。完美的感谢您的精彩解释和进一步的参考资料。很高兴为您提供帮助。：）完美的感谢您的精彩解释和进一步的参考资料。很高兴为您提供帮助。：）技术差.innerHTML+=
需要DOM读写。将其存储在var results=''中您结果+='innerHTMLCodeHere'
thenElement.innerHTML=结果。当然，我甚至不建议在大多数情况下使用.innerHTML
来创建DOM元素，因为必须先将它们添加到DOM中，然后才能将事件附加到它们<代码>文档。createElement（标记）
是如何创建。。。然后就像Element.className='class1 class2 class3'；Element.tabIndex=-1等等Element.onclick=function（）{/*do stuff*/}；OtherElement.appendChild（元素）
。只是建议，技术差.innerHTML+=
需要DOM读写。将其存储在var results=''中您结果+='innerHTMLCodeHere'
thenElement.innerHTML=结果。当然，我甚至不建议在大多数情况下使用.innerHTML
来创建DOM元素，因为必须先将它们添加到DOM中，然后才能将事件附加到它们<代码>文档。createElement（标记）
是如何创建。。。然后就像Element.className='class1 class2 class3'；Element.tabIndex=-1等等Element.onclick=function（）{/*do stuff*/}；OtherElement.appendChild（元素）
。只是建议。