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

so in Javascript I am trying to display the text "halfWayDown" when My hP variable is equal or less than itself divided by 2. I am using a querySelectorAll and a "for loop" on essentially all of my elements, so I don't needlessly have to duplicate my code. Accordingly, for all of my code I am able to increment an individual variable at a time though there are others with the same class name; with the exception of my halfWayDown "div". It displays the text per "div" with the same class name. I am pretty new to programming and am self-taught. I am eager to learn, so any help is greatly appreciated. Here is my relevant code.

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();
}

// THE CODE BELOW IS WHERE I AM RUNNING INTO PROBLEMS

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>

Thank you.

CodePudding user response：

I'll assume you are wrapping each "section" in some container element, like a div. This is important because we'll use the fact that the button and the div are in the same container to figure out which halfwaydowndiv goes with the button that was clicked:

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();
  })
}