在我的 Javascript 代碼中，我試圖將一個按鈕附加到 DOM。在添加所有其他元素后，我可以將它們控制臺注銷并進行操作；除了我的提交按鈕。感謝您對我的問題的任何見解。
** HTML **
<html>
<head></head>
<body>
<button id="new-character-btn">New Character</button>
<div id="character-parent">
<div id="character-div"></div>
</div>
</body>
<script src="copy.js"></script>
</html>
Javascript
let newCharacterBtn= document.querySelector("#new-character-btn");
console.log(newCharacterBtn);
let characterDiv=document.querySelector("#character-div");
console.log(characterDiv);
let charPar=document.querySelector("#character-parent")
console.log(charPar);
let incrementer=1;
console.log(incrementer);
//add an event listener to add character button to duplicate html and increment their classes.
newCharacterBtn.addEventListener("click",()=>{
console.log(incrementer)
console.log(characterDiv)
characterDiv.innerHTML =`
<div hljs-subst">${incrementer}"></div>
<button hljs-subst">${incrementer}">Submit</button><input type=number></input>
`
charPar.append(characterDiv)
console.log(charPar)
incrementer=incrementer 1
console.log(incrementer)// log the increment value.
let characterInput=document.querySelector(".character-input")
console.log(characterInput) // log the first character input
// let submitBtn=document.querySelector(`#submit-btn${incrementer}`)
//console.log(submitBtn) //log the all of the submitBtns
let iniativeDiv=document.querySelector(`.iniative${incrementer}`)
let submitBtn=charPar.querySelector(`.submit-btn${incrementer}`)
console.log(submitBtn)//my failed attempt to log out the submit button.
});```
uj5u.com熱心網友回復：
看起來你可能會在將變數incrementer附加到 dom 之后增加它。
特別是這一行：
charPar.append(characterDiv)
console.log(charPar)
incrementer = incrementer 1 // NOTE!: this line is the problem!!
console.log(incrementer)// log the increment value.
如果您想以 hack 方式訪問您的提交按鈕，只需執行以下操作：
let iniativeDiv = document.querySelector(`.iniative${incrementer}`)
let submitBtn = charPar.querySelector(`.submit-btn${incrementer-1}`) // NOTE!: THE -1
console.log(submitBtn)//my failed attempt to log out the submit button.
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/526165.html
上一篇：分析和過濾資料框中的調查回應