如果 div 有重复，有没有办法让函数显示文本到单个 div？

Question

所以在 Javascript 中，当我的 hP 变量等于或小于自身 divided by 2 时，我试图显示文本“halfWayDown”。我正在使用 querySelectorAll 和“for loop”基本上在我所有的元素上，所以我不必不必要地复制我的代码。因此，对于我的所有代码，我可以一次增加一个 individual 变量，尽管还有其他具有相同 class 名称的变量；除了我的 halfWayDown“div”。它显示每个具有相同 class 名称的“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" class="subgrid" >
                <div class="halfWayDown"></div>
        <div class="character-name-display">Name</div>
        <button class="name-submit-btn">Submit</button><input type="text" class="input-name-el" placeholder="Name">
        <br>    
        <div class="roll-display">Iniative</div><button class="iniativebtn">submit</button><input type="number" class="iniative-roll-el" placeholder="Iniative Roll">
        <br>        
        <br>
        <div class="healthpoints-display">Healthpoints</div>
        <button class="hp-submit-btn">Submit</button><input type="number" class="input-hp-el" placeholder="Total HealthPoints">
        <br>
        <button class="hp-deductin-btn">Submit</button><input type="number" class="input-hp-deduction-el" placeholder="Damage">
        <br>
        <button class="active-btn" class="button">Active</button>
        <br>        
        </div>

    </body><button id="resetbutton">Reset</button>
    <script src="mainCopy.js"></script>
    </html>

谢谢。

Answer 1

我假设您将每个“部分”包装在某个容器元素中，例如 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();
  })
}

如果 div 有重复，有没有办法让函数显示文本到单个 div？

Is there a way to have a function display text to a single div if the div has duplicates?

javascript

for-loop

function

nodelist

queryselector