所以在 Javascript 中，當我的 hP 變數等于或小于自身除以 2 時，我試圖顯示文本“halfWayDown”。我在基本上所有元素上使用 querySelectorAll 和“for 回圈”，所以我不不必要地復制我的代碼。因此，對于我的所有代碼，我可以一次增加一個單獨的變數，盡管還有其他具有相同類名的變數；除了我的 halfWayDown “div”。它以相同的類名顯示每個“div”的文本。我對編程很陌生，而且是自學成才的。我渴望學習，因此非常感謝任何幫助。這是我的相關代碼。
var characterNameDisplay=document.querySelectorAll(".character-name-display")
console.log(characterNameDisplay);
let inputNameEl=document.querySelectorAll(".input-name-el")
console.log(inputNameEl)
let nameSubmitBtn=document.querySelectorAll(".name-submit-btn");
let hpDeductionBtn=document.querySelectorAll(".hp-deductin-btn")
console.log(hpDeductionBtn)
let inputHpDeductionEl=document.querySelectorAll(".input-hp-deduction-el")
console.log(inputHpDeductionEl)
let hpSubmitBtn=document.querySelectorAll(".hp-submit-btn")
console.log(hpSubmitBtn)
let inputHpEl=document.querySelectorAll(".input-hp-el")
let hP=0;
let healthPointsDisplay=document.querySelectorAll(".healthpoints-display")
console.log(healthPointsDisplay)
let hPDeductinBtn=document.querySelectorAll(".hp-deductin-btn")
console.log(hPDeductinBtn);
let inputHpDeduction=document.querySelectorAll(".input-hp-deduction-el")
console.log(inputHpDeduction)
let activeBtn=document.querySelectorAll(".active-btn")
console.log(activeBtn)
let button=document.querySelectorAll(".button")
console.log(button);
let resetButton=document.getElementById("resetbutton")
console.log(resetButton);
let iniativeBtn=document.querySelectorAll(".iniativebtn")
console.log(iniativeBtn)
let inativeRollEl=document.querySelectorAll(".iniative-roll-el")
console.log(inativeRollEl)
let rollDisplay=document.querySelectorAll(".roll-display")
console.log(rollDisplay)
let subGrid=document.querySelectorAll(".subgrid")
console.log(subGrid)
let halfWayDownText=document.querySelectorAll(".halfWayDown")
halfWayDownText = Array.from(halfWayDownText)
console.log(halfWayDownText);
let intEl="";
let initalHp=0;
for (let i=0;i<characterNameDisplay.length;i )
nameSubmitBtn[i].addEventListener("click",function(){
characterNameDisplay[i].textContent=inputNameEl[i].value
clearInput()
});
for( let i=0;i<healthPointsDisplay.length;i )
console.log(healthPointsDisplay[i]);
for( let i=0; i<inativeRollEl.length;i )
console.log(inativeRollEl[i]);
for( let i=0;i<inativeRollEl.length;i )
console.log(inativeRollEl[i])
for (let i=0;i<iniativeBtn.length;i )
iniativeBtn[i].addEventListener("click",function(){
rollDisplay[i].innerText=inativeRollEl[i].value
})
for (let i=0;i<hpSubmitBtn.length;i ){
hpSubmitBtn[i].addEventListener("click",function(){
hP=0;
healthPointsDisplay[i].innerText= hP parseInt(inputHpEl[i].value) " Healthpoints";
hP=parseInt(inputHpEl[i].value)
initalHp=parseInt(inputHpEl[i].value)
console.log(initalHp)
clearHpInput();
})};
function clearHpInput(){
for ( let i=0;i<inputHpEl.length;i )
inputHpEl[i].value="";
console.log();
}
// 下面的代碼是我遇到問題的地方
for (let i=0;i<hpDeductionBtn.length;i ) {hPDeductinBtn[i].addEventListener("click",function(){
healthPointsDisplay[i].innerText= hP - parseInt(inputHpDeduction[i].value) " Healthpoints";
hP=hP - parseInt(inputHpDeduction[i].value);
console.log(parseInt(inputHpDeduction[i].value))
if(hP<=initalHp/2){
for (let i=0;i<halfWayDownText.length;i ){
halfWayDownText[i].innerText="Halfway Down"};
}
clearDeductionInput();
})}
function clearDeductionInput(){
for( let i=0;i<inputHpDeduction.length;i )
inputHpDeduction[i].value="";
}
for (let i=0;i<inputNameEl.length;i ){function clearInput(){
inputNameEl[i].value=""}};
for(let i=0;i<subGrid.length;i )
for (let i=0;i<activeBtn.length;i ){activeBtn[i].addEventListener("click",function(){
activeBtn[i].style.backgroundColor="brown"
activeBtn[i].innerText="Inactive"
for(let i=0;i<subGrid.length;i ){
}
resetButton.addEventListener("click",function(){
activeBtn[i].style.backgroundColor="green";
activeBtn[i].innerText="Active";
subGrid[i].style.borderColor="green";
})
})};
for (let i=0;i<activeBtn.length;i ){activeBtn[i].addEventListener("click",function(){
subGrid[i].style.borderColor="brown";
console.log()
})}
<!DOCTYPE html>
<html>
<head><link rel="stylesheet" href="css/style.css">
<h1><!--D&D DM Tool--><h1>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<div id="header-container">
<h1 id="header"></h1>
</div>
<div id="grid">
<div id="subgrid" >
<div ></div>
<div >Name</div>
<button >Submit</button><input type="text" placeholder="Name">
<br>
<div >Iniative</div><button >submit</button><input type="number" placeholder="Iniative Roll">
<br>
<br>
<div >Healthpoints</div>
<button >Submit</button><input type="number" placeholder="Total HealthPoints">
<br>
<button >Submit</button><input type="number" placeholder="Damage">
<br>
<button >Active</button>
<br>
</div>
</body><button id="resetbutton">Reset</button>
<script src="mainCopy.js"></script>
</html>
謝謝你。
uj5u.com熱心網友回復：
我假設您將每個“部分”包裝在某個容器元素中，例如 div。這很重要，因為我們將使用按鈕和 div 在同一個容器中這一事實來確定哪個 halfwaydowndiv 與單擊的按鈕一起使用：
for (let i=0;i<hpDeductionBtn.length;i ){
hPDeductinBtn[i].addEventListener("click",function(){
let theContainer = this.parentNode; // get a reference to the container which wraps each section
let theCorrectHalfwayDownDiv = theContainer.querySelector(".halfWayDown"); // there should only be one inside theContainer
healthPointsDisplay[i].innerText= hP - parseInt(inputHpDeduction[i].value) " Healthpoints";
hP=hP - parseInt(inputHpDeduction[i].value);
console.log(parseInt(inputHpDeduction[i].value))
if(hP<=initalHp/2){
theCorrectHalfwayDownDiv.innerText = "Halfway Down";
}
clearDeductionInput();
})
}轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/429110.html
標籤：javascript 功能 for循环 节点列表 查询选择器