0

`Hi! I am having a problem that has been driving me crazy for the las couple of hours. I am making a game score counter (just a piece of html with the names of the players where you can add or rest points to your current point) I wrote a code in js to add or rest the points from an input type number and then add them or rest them from the actual points.
With player 1 it runs smooth, but with the rest of the players it will just display :

** Uncaught TypeError: Cannot read properties of null (reading 'value') at HTMLInputElement.<anonymous>**

the whole code is just too long so i will put only the part of html to work with the cranky js code: PD: I am learning how to code, sorry in advance if it is hard ask to read it.`

I tried multiple ways of doing it but I cannot figure it out. the first player stopped working like for an hour and then I tried again and it just started working again, I am driving crazy

// Game //
const theGame = document.querySelector('#theGame');
let p1 = document.querySelector('#p1') ;
let p1Score = document.querySelector('.p1-score') ;
let p1NewPoint = document.querySelector('#newpoint-p1') ;
let p1Add = document.querySelector('#add-p1') ;
let p1Rest = document.querySelector('#rest-p1') ;


let p2= document.querySelector('#p2') ;
let p2Score = document.querySelector('.p2-score') ;
let p2NewPoint = document.querySelector('#newpoint-p2') ;
let p2Add = document.querySelector('#add-p2') ;
let p2Rest = document.querySelector('#rest-p2') ;

let p3 = document.querySelector('#p3') ;
let p3Score = document.querySelector('.p3-score') ;
let p3NewPoint = document.querySelector('#newpoint-p3') ;
let p3Add = document.querySelector('#add-p3') ;
let p3Rest = document.querySelector('#rest-p3') ;

let p4 = document.querySelector('#p4') ;
let p4Score = document.querySelector('.p4-score') ;
let p4NewPoint = document.querySelector('#newpoint-p4');
let p4Add = document.querySelector('#add-p4') ;
let p4Rest = document.querySelector('#rest-p4') ;

const goHome = document.querySelector('#go-home') ;


p1Add.addEventListener('click', function() { 
          if(parseInt(p1NewPoint.value)){ 
          p1Score.textContent = parseInt(p1Score.textContent) + parseInt(p1NewPoint.value)
          p1NewPoint.value = '';}
       });
    
       p1Rest.addEventListener('click', function() {
        if(parseInt(p1NewPoint.value)) 
        p1Score.textContent = parseInt(p1Score.textContent) - parseInt(p1NewPoint.value)
        p1NewPoint.value = ''; 
     });
        
     p2Add.addEventListener('click', function() { 
        if(parseInt(p2NewPoint.value)){ 
        p2Score.textContent = parseInt(p2Score.textContent) + parseInt(p2NewPoint.value)
        p2NewPoint.value = '';}
     });
    p2Rest.addEventListener('click', function() {
        if(parseInt(p2NewPoint.value)) 
        p2Score.textContent = parseInt(p2Score.textContent) - parseInt(p2NewPoint.value)
        p2NewPoint.value = ''; 
     });

<section id="theGame"class="started-game hide">
       <div class="playing-player">
        <h3 id="p1"></h3>
             <div class=" scoresFather ">
            <p class="p1-score">0</p>
            <input type="number"  id="newpoint-p1 " class="newpoint" >
            <input type="button" value="+" id="add-p1" class="add">
            <input type="button" value="-" id="rest-p1" class="rest">
             </div>
       </div>
       <div class="playing-player a">
        <h3 id="p2"></h3>
             <div class=" scoresFather ">
            <p class="p2-score">0</p>
            <input type="number"  id="newpoint-p2" class="newpoint">
            <input type="button" value="+" id="add-p2" class="add">
            <input type="button" value="-" id="rest-p2" class="rest">
             </div>
       </div>
       <div class="playing-player">
        <h3 id="p3"></h3>
            <div class=" scoresFather hide">
            <p class="p3-score a">0</p>
             <input type="number"  id="newpoint-p3" class="newpoint">
             <input type="button" value="+" id="add-p3" class="add">
             <input type="button" value="-" id="rest-p3" class="rest">
             </div>
       </div>
       <div class="playing-player">
        <h3 id="p4"></h3>
            <div class=" scoresFather hide">
             <p class="p4-score a">0</p>
             <input type="number"   id="newpoint-p4"class="newpoint">
             <input type="button" value="+" id="add-p4" class="add">
             <input type="button" value="-" id="rest-p4" class="rest">
            </div>
         </div>
       <input type="button" value="Inicio" id="go-home" class="home" onClick="window.location.reload(true)">
    </section>
joaquin
  • 1
  • 1
  • Which line is producing the error? Where do you define the variable being referenced on that line? – David Feb 14 '23 at 20:59
  • I posted the variable names, the line that brings up the error is always the one of : if(parseInt(p1NewPoint.value)) . But I cannot understand why, if I check in console p1NewPoint or the other ones, it returns me the number inside de input or if not it answers '' . I put that line in case of undefined or any other result than a number (if(parseInt(p1NewPoint.value))) But that error is killing me. – joaquin Feb 14 '23 at 21:02
  • If for example `p1NewPoint` is `null` then that means `document.querySelector('#newpoint-p1')` didn't find the element. A very common root cause for this could be that the JavaScript code was included earlier in the page than those elements. – David Feb 14 '23 at 21:07
  • And how do you recommend me to fix this problem ? – joaquin Feb 14 '23 at 21:12
  • The linked duplicate has more information, other potential root causes, etc. *If* the problem is that the JavaScript code is placed before the target elements on the page, the solution would be to place the JavaScript code after the target elements on the page. – David Feb 14 '23 at 21:13
  • Cheers David, You have no idea how lost I was. – joaquin Feb 14 '23 at 21:19
  • Also I intended at the very beggining instead of making such a hard writed code, I tried to so something more flexible that depending on wich add button or rest button people clicked it would recognise it and change its sibling score and inputScore. but It was far beyond my comprehension. Is it too wrong for my portfolio to write it like mine? – joaquin Feb 14 '23 at 21:21

0 Answers0