Problems in incrementing a score / counter

Asked

Viewed 60 times

-1

Hello, good evening ! I am trying to create a score for a game, where it contains two different types of scores 2 and 5 points. My biggest problem is that I can’t constantly update the score value with every click on Submit. The value is only replaced instead of adding with itself.I know the question is stupid but I really need help ! Thank you.

//Global variables
let randomRound;
init();

//Logica do button-start-game
document
  .querySelector(".button-start-game").addEventListener("click",function() {
    document.querySelector(".button-submit").style.display = "block";
    document.querySelector(".button-next-round").style.display = "block";
    document.querySelector(".button-start-game").style.display = "none";
    document.querySelector(".button-next-round").style.position = "relative";
    document.querySelector(".button-next-round").style.left = "150px";
    document.querySelector(".button-submit").style.position = "relative";
    document.querySelector(".button-submit").style.left = "150px";
    
    randomRounds();
  });

// Logica do button-next-round
document.querySelector(".button-next-round").addEventListener("click", function() {
    // randomiza um numero
    //1.Gera um round aleatorio
    //2. Mostra o round dentro da label

    randomRounds(randomRound);
    document.getElementById("button-submit").disabled = false;

    refresh();
  });

function refresh() {
  document.getElementById("input-0").value = "";
  document.getElementById("input-1").value = "";

  
}

// Logica do button-submit
document.querySelector(".button-submit").addEventListener("click", function() {
  //1. Compara o Input com o Random round
  //2. Mostra uma ponntuacao baseada nessa comparacao
  //3. Atualiza o Score

  if (document.getElementById("input-0").value == "" && document.getElementById("input-0").value == "") {
    alert("Preencha o campo");
  } else {
    let firstInput = document.getElementById("input-0").value;
    let secondInput = document.getElementById("input-1").value;
    checker(firstInput, secondInput);
  }



});

// Função que inicia o game
function init() {
  roundScore = [0];
  document.querySelector(".button-start-game").style.position = "relative";
  document.querySelector(".button-start-game").style.left = "300px";
  document.querySelector(".button-submit").style.display = "none";
  document.querySelector(".button-next-round").style.display = "none";
  document.getElementById("input-0").value = "";
  document.getElementById("input-1").value = "";
  document.getElementById("score-0").textContent = "0";
}

function randomRounds(round) {
  randomRound = Math.floor(Math.random() * 1) + 1;

  console.log("%c Rounds Function", "color:Orange; font-weigth:bold;");
  if (randomRound === 1) {
    console.log("%c Rounds1", "color:red; font-weigth:bold;");

    document.getElementById("place-holder-1").textContent = "2³";
    document.getElementById("place-holder-2").textContent = "3²";
    document.getElementById("place-holder-3").textContent = "1¹";
  } else if (randomRound === 2) {
    console.log("%c Rounds2", "color:red; font-weigth:bold;");
    document.getElementById("place-holder-1").textContent = "(-2)²";
    document.getElementById("place-holder-2").textContent = "4¹";
    document.getElementById("place-holder-3").textContent = "1⁴";
  } else if (randomRound === 3) {
    console.log("%c Rounds3", "color:red; font-weigth:bold;");
    document.getElementById("place-holder-1").textContent = "(2²)³";
    document.getElementById("place-holder-2").textContent = "2⁴.2²";
    document.getElementById("place-holder-3").textContent = "(2³)²";
  } else if (randomRound === 4) {
    console.log("%c Rounds4", "color:red; font-weigth:bold;");
    document.getElementById("place-holder-1").textContent = "5³:5^-1";
    document.getElementById("place-holder-2").textContent = "5²";
    document.getElementById("place-holder-3").textContent = "25^-1";
  } else if (randomRound === 5) {
    console.log("%c Rounds5", "color:red; font-weigth:bold;");
    document.getElementById("place-holder-1").textContent = "(3.10²) + (4.10²)";
    document.getElementById("place-holder-2").textContent = "7.10²";
    document.getElementById("place-holder-3").textContent = "7.10⁴";
  } else if (randomRound === 6) {
    console.log("%c Rounds6", "color:red; font-weigth:bold;");
    document.getElementById("place-holder-1").textContent = "(6.10)² . (2.10)⁴";
    document.getElementById("place-holder-2").textContent = "12.10⁴";
    document.getElementById("place-holder-3").textContent = "(12.10⁵):10¹";
  } else if (randomRound === 7) {
    console.log("%c Rounds7", "color:red; font-weigth:bold;");
    document.getElementById("place-holder-1").textContent = "0,0000001";
    document.getElementById("place-holder-2").textContent = "10^-8";
    document.getElementById("place-holder-3").textContent = "1/10^9";
  } else if (randomRound === 8) {
    console.log("%c Rounds8", "color:red; font-weigth:bold;");
    document.getElementById("place-holder-1").textContent = "2.0,001";
    document.getElementById("place-holder-2").textContent = "0,002";
    document.getElementById("place-holder-3").textContent = "2.10^-3";
  } else if (randomRound === 9) {
    console.log("%c Rounds9", "color:red; font-weigth:bold;");
    document.getElementById("place-holder-1").textContent = "250 000";
    document.getElementById("place-holder-2").textContent = "0,25.10⁷ ";
    document.getElementById("place-holder-3").textContent = "25.10⁵";
  } else if (randomRound === 10) {
    console.log("%c Rounds10", "color:red; font-weigth:bold;");
    document.getElementById("place-holder-1").textContent = "100²:10³";
    document.getElementById("place-holder-2").textContent = "1/10^-1";
    document.getElementById("place-holder-3").textContent = "10^-2";
  } else {
    console.log("Not a Round !");
  }
}

function scoreCopy(src) {
  return Object.assign({}, src);
}

function checker(input1, input2) {
  scoreCopy();
  let valueA =0;
  let valueB=0;
  const score = { a: valueA, b: valueB };
  const newScore = scoreCopy(score);

  if (input1 === "<" && input2 === "<") {
    console.log("%c Adiciona 5", "color:Purple; font-weigth:bold;");
    score.a = score.a +5;
    document.getElementById("score-0").innerHTML = score.a;
    console.table(score);
    document.getElementById("button-submit").disabled = true;

  } else if (input1 === "<" || input2 === "<") {
    console.log("%c Adiciona 2", "color:Purple; font-weigth:bold;");
    score.b = score.b +2;
    console.table(score);    
    document.getElementById("score-0").innerHTML = score.b;
    document.getElementById("button-submit").disabled = true;
  }
}
* {
  margin: 0px;
  padding: 0px;
  font-family: "Montserrat", sans-serif;
}

body {
  background-image: url(./../img/clouds-2.png);
}

.grid {
  display: grid;
  position: relative;
  top: 30px;
  grid-template-columns: 100px;
  grid-template-rows: 10% 10% 10% 10% 10% 10%;
  grid-row-gap: 10px;
  justify-content: center;
  grid-gap: 1px;
  max-width: 292px;
  height: auto;
  margin: 0 auto;
  width: 30px;
}

h1 {
  margin: 5px;
  place-self: center;
  font-size: 50px;
  width: 290px;
  border-radius: 10px;
  text-align: center;
  background-image: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%);
  max-width: 290px;
  max-height: 200px;
  box-shadow: 0 3px #666;
}
.head,
.middle,
.bottom,
.sinais {
  margin: 5px;
  place-self: center;
  font-size: 50px;
  width: 290px;
  border-radius: 10px;
  text-align: center;
  background-image: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%);
  max-width: 200px;
  max-height: 200px;
  box-shadow: 0 3px #666;
}

.head:hover,
.middle:hover,
.bottom:hover {
  background-image: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc55 100%);
  transform: translateY(5px);
}

.grid-game {
  display: grid;
  grid-template-columns: 10% 10% 10% 10% 10%;
  gap: 1px;
  justify-content: center;
  max-width: 100%;
  margin: 0 auto;
  width: 100%;
  height: 50%;
}

.place-holder,
.input-0,.input-1 {
  position: relative;
  top: 100px;
  left: 10px;
  text-align: center;
  line-height: 50px;
  width: 100px;
  height: 50px;
  place-self: center;
  justify-content: center;
  border-radius: 10px;
  font-size: 14px;
  box-shadow: 0 3px #666;
  background-image: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%);
}

.grid-buttons {
  display: grid;
  position: relative;
  top: 150px;
  right: 50px;
  grid-template-columns: 10% 10% 10%;
  gap: 150px;
  justify-content: center;
}

.button-submit,.button-next-round,.button-start-game {
  width: 300px;
  height: 50px;
  border-radius: 10px;
  font-size: 30px;
  box-shadow: 0 9px #999;
  background-image: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%);
}
.button-submit:active,.button-next-round:active,.button-start-game:active {
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}
.button-submit:hover,.button-next-round:hover,.button-start-game:hover {
  background-image: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc4f 100%);
}

.score-grid {
  display: grid;
  position: relative;
  top: 200px;
  grid-template-rows: 10% 10%;
  gap: 5px;
  justify-content: center;
  text-align: center;
  line-height: 50px;
  font-size: 30px;
}
.score-field,.score {
  box-shadow: 0 3px #666;
  width: 300px;
  height: 50px;
  border-radius: 10px;
  background-image: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%);
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link
      href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="./css/style.css" />
    <title>Match Game</title>
  </head>
  <body>
    <section>
      <div class="grid">
        <h1>Match Game</h1>
        <div class="sinais">Sinais</div>
        <div class="head">></div>
        <div class="middle">=</div>
        <div class="bottom"><</div>
      </div>

      <div class="grid-game">
        <div class="place-holder" id="place-holder-1">A</div>
        <input type="text" class="input-0" id="input-0" />
        <div class="place-holder" id="place-holder-2">B</div>
        <input type="text" class="input-1" id="input-1" />
        <div class="place-holder" id="place-holder-3">C</div>
      </div>

      <div class="grid-buttons">
        <button class="button-submit" id="button-submit">Submit</button>
        <button class="button-start-game">Start Game</button>
        <button class="button-next-round">Next Round</button>
      </div>

      <div class="score-grid">
        <div class="score">Score</div>
        <div class="score-field" id="score-0">0</div>
      </div>
    </section>
    <script src="./js/main.js"></script>
    <!-- <script src="./app.js"></script> -->
  </body>
</html>

javascript dom onclick

  • I haven’t read all your code, but if you’re using a Ubmit button, it won’t post the page, which causes the Reload and loses the score counters? it really needs to be a Ubmit, or it could be a simple button?

  • Hello, Ricardo . It can be just any button , as long as the score is stored and the value updated. Ex : one round I shoot 5 and the other I shoot 2 so in the third round I have to have 7.

1 answer

0


I think the problem is in the code part of the function checker:

function checker(input1, input2) { 
    scoreCopy(); 
    let valueA =0; 
    let valueB=0; 
    const score = { a: valueA, b: valueB };
    //...
}

Every time the button is clicked and input values are analyzed, you restart the variable score. That is, regardless of the previous score value, it will always be reset to 0, making it always appear the same value.

The suggestion I give is to put the const score = {a: valorA, b: valorB}; there at the top of the file, making it initialized only once, and from there it is reusing the value that is already stored.

And another: in the callback click button button-submit, you put to test twice if the #input-0 has empty value:

document.querySelector(".button-submit").addEventListener("click", function() { 
    //1. Compara o Input com o Random round 
    //2. Mostra uma ponntuacao baseada nessa comparacao 
    //3. Atualiza o Score 

    //AQUI
    if (document.getElementById("input-0").value == "" && document.getElementById("input-0").value == "") { 
        alert("Preencha o campo"); 
    } else { 
        let firstInput = document.getElementById("input-0").value; 
        let secondInput = document.getElementById("input-1").value; 
        checker(firstInput, secondInput); 
    } 



});

I think you wanted to type "input-1" in the other.

I hope I’ve helped!

  • Thank you very much ! It was scope error even. Sorry for your time , see more !

Browser other questions tagged javascript dom onclick

You are not signed in. Login or sign up in order to post.