Var++ Not Increasing

December 14, 2022

So, my variable for JavaScript seems to not be updating/incrementing even when I wrote i++ (variable name is just i) each time it is called, and by called I mean when the HTML button is pressed (By the way, the reason I have i is because I am pushing i to an array to show what number the nested array was stored/called on). But again, for some reason though, it doesn’t seem to be working. I tried to create a loop, but it didn’t really update the value, it just sends more alerts. Is there a way to properly update or increment i’s value, and if so, do you mind briefly explaining my error? Thank you so much! 😀

function onClick(){
    const checkerArr = [];
    var removedvals;

    let i = 0;

    var input = document.getElementById("input1").value;
    let checkj;


        function containsNoJ(str){
          const normieChars = /[abcedfghiklmnopqrstuvwxyz]{1}/i;
          return normieChars.test(str);
        }

        
        function containsJ(str){
          const containsj = /[j]{1}/i;
          return containsj.test(str);
        }

        function containsAnyLetters(str) {
            const specialChars = /[0-9`!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?~]{1}/g;
            return specialChars.test(str);
        }



        if (containsNoJ(input)){
            checkj = "contains no j. ";

        }

        if (containsJ(input)){
            checkj = "contains j! ";

        }

        
        // if (containsJ(input) && containsNoJ(input)){
        //     checkj = "contains j!";
        // }

        if (containsAnyLetters(input)){
            checkj = "error: inconvertable characters typed ";

        }

        if (containsAnyLetters(input) && containsJ(input)){
            checkj = "error: inconvertable characters typed (j was found though! :D) ";

        }

        if (checkj == "" || checkj == null){
             checkj = "error: no value typed. ";

        }



    

       checkerArr.push([checkj, "Check Number ", i]);
    
        i++;
        checkj += "" + JSON.stringify(checkerArr);

        alert(checkj);


            
}

#input1{
  animation: fadeIn 10s;
  border-radius: 20px 20px 20px 20px;

  font-size: 20px;
  width: 200px;
  z-index: 400;
  position: relative;
  height: 100px;
  max-height: 1000px; 

  top: -10%;
  border:2px solid #9c1717
}


#button1 {
  border-top-width: 1px;
  transform: translateY(-4px);
  height:auto;
  width:auto;
  border-radius: 5px;
  box-shadow: 0 9px #999;
  position: relative;
  font-family:  'Trebuchet MS', sans-serif;
  top: -10%;
  width: 300px;

  height: 100px;
  animation: textGrow 2.5s; 
  animation: fadeIn 10s;
  font-size: 30px;
  background-color: #00ff55;
  transition: width 0.25s, height 0.25s, background-color 0.2s ease-out 1ms, font-size 0.5s ease-in 1ms, font-size 0.2s 
  ease-out 1ms;

}

#button1:hover {
  height:auto;
  width:auto;
  border-color: rgb(31, 117, 245) 5px;
  background-color: #04d326;
  cursor: pointer;
  font-size: 35px;
  width: 340px;
  height: 110px;
  
}

#button1:active {  
  box-shadow: 0 5px #777;
 transform: translateY(4px);
  background: rgb(47, 69, 141);
}

#no {
  left: 500px;
  border-top-width: 1px;
  transform: translateY(-4px);
 
  border-radius: 5px;
  box-shadow: 0 9px #999;
  position: relative;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  width: 300px;
  height: 100px;
  font-size: 30px;
  background-color: #94c7a5;
  transition: width 0.25s, height 0.25s, background-color 0.2s ease-out 1ms, font-size 0.5s ease-in 1ms, font-size 0.2s 
  ease-out 1ms;

}

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" type="text/css" href="j.css"/>
    <meta charset="utf-8" />
</head>

<body>

<input style=" position: absolute; top: 165px; display: flex; width: 250px;" placeholder="Type Your Input's value..." id="input1" step="0.1">
<button type="button" onclick="onClick();" id = "button1" style = "position: absolute; 
left: 300px;
 top: 170px;
 text-align: center;">Get Input value</button>

</body>
</html>

>Solution :

The scope of i is inside the onClick() function and you’re resetting it each time onClick() is called. Try moving let i = 0; outside of the function declaration.