Add further condition for JavaScript

Question

it is a sample code for two group. the first group Reach 54 point win. how ever I would like to add further conduction if any one of the team Reach 26-0 he will win. i try to add "if" and "else", but i did mange to sort the Issue.

for Example I want to make if the Counter of firstFunct=26 and Counter of secondFunct=0 Group 1 Win

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>

  const firstFunct = (() => {
    let counter = 0;
    return () => {
      counter += +document.getElementById("mySelect").value;
      document.getElementById("mySelect").value = null; 
      document.getElementById("Group 1 score").innerHTML = counter;
      if ((counter) >= 54) {
        document.body.innerHTML = "<p class='Group'>Group 1 Win</p><p onClick='location.reload()' class='Again'>Again</p>";
      }
    };
  })();


const secondFunct = (() => {
  let counter = 0;
  return () => {
    counter += +document.getElementById("mySelect2").value;
    document.getElementById("mySelect2").value = null;
    document.getElementById("Group 2 score").innerHTML = counter;
    if ((counter) >= 54) {
      document.body.innerHTML = "<p class='Group'>Group 2 Win</p><p onClick='location.reload()' class='Again'>Again</p>";
    }
  };
})();



</script>

<body>
  <div class="line"></div>

  <div class="row">

    <div class="column">

      <h2>Group 1</h2>
      <form>
        <select id="mySelect" onchange="firstFunct()">
          <option value="" disabled selected style="display:none;">+</option>
          <option>6</option>
          <option>7</option>
          <option>8</option>
          <option>12</option>
          <option>14</option>
          <option>16</option>
          <option value="54">Win</option>

        </select>
        <p id="Group 1 score" style="font-size: 75px;">0</p>
    </div>


    <div class="column">
      <h2>Group 2</h2>
      <form>
        <select id="mySelect2" onchange="secondFunct()">
          <option value="" disabled selected style="display:none;">+</option>
          <option>6</option>
          <option>7</option>
          <option>8</option>
          <option>12</option>
          <option>14</option>
          <option>16</option>
          <option value="54">Win</option>

        </select>
        <p id="Group 2 score" style="font-size: 75px;">0</p>
    </div>
  </div>

</body>

Matt Morgan · Answer 1 · 2018-04-22T15:11:49.877

Assuming I understood your question correctly, you want to allow a team to win if that team has 26 or more points, and the other team has 0 points?

You need to modify your JavaScript so that each team's listener can know the other team's score, and act accordingly:

/* define your counters outside of each individual function, and 
   make them available to both functions */

let counter1 = 0;
let counter2 = 0;
const firstFunct = (() => {
  return () => {
    counter1 += +document.getElementById("mySelect").value;
    document.getElementById("mySelect").value = null;
    document.getElementById("Group 1 score").innerHTML = counter1;
    if ((counter1) >= 54 || (counter1 >= 26 && counter2 === 0)) {
      document.body.innerHTML = "<p class='Group'>Group 1 Win</p><p onClick='location.reload()' class='Again'>Again</p>";
    }
  };
})();



const secondFunct = (() => {
  return () => {
    counter2 += +document.getElementById("mySelect2").value;
    document.getElementById("mySelect2").value = null;
    document.getElementById("Group 2 score").innerHTML = counter2;
    if ((counter2) >= 54 || (counter2 >= 26 && counter1 === 0)) {
      document.body.innerHTML = "<p class='Group'>Group 2 Win</p><p onClick='location.reload()' class='Again'>Again</p>";
    }
  };
})();

score 0 · Accepted Answer · answered Apr 22 '18 at 15:31

I see a few issues here.

First off, by wrapping you code in brackets (...code...)() you're making them Immediately Invoked Function Expression. Not sure if you want them to do that.

https://developer.mozilla.org/en-US/docs/Glossary/IIFE

By declaring your counter variables inside the function, you're resetting them to 0 every time you call the function. Try initializing them outside their functions.

You have an additional + after your addition assignment operator.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators

You're trying to get the value of the select, rather than the value of the option selected. I'd recommend querySelector for that. Also, you'll have to assign a value to each option or use it's textContent property instead.

https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector

The value will be of type string, so you'll need to use parseInt() to make it a number.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseInt

You're returning an anonymous function which itself returns nothing. Try something like this:

<script>
  let counter1 = 0;
  let counter2 = 0;

  const firstFunct = ()=> {
    counter += parseInt(document.querySelector("#mySelect option:checked").value, 10);
    document.getElementById("mySelect").value = null; 
    document.getElementById("Group 1 score").innerHTML = counter;
    if (counter1 >= 54 || (counter1 >= 26 && counter2 === 0)) {
      document.body.innerHTML = "<p class='Group'>Group 1 Win</p><p onClick='location.reload()' class='Again'>Again</p>";
    }
  };  

  const secondFunct = ()=> {
    counter += parseInt(document.querySelector("#mySelect2 option:checked").value, 10);
    document.getElementById("mySelect2").value = null; 
    document.getElementById("Group 2 score").innerHTML = counter;
    if (counter2 >= 54 || (counter2 >= 26 && counter1 === 0)) {
      document.body.innerHTML = "<p class='Group'>Group 2 Win</p><p onClick='location.reload()' class='Again'>Again</p>";
      }
  }; 
</script>


<select id="mySelect" onchange="firstFunct()">
  <option value="" disabled selected style="display:none;">+</option>
  <option value="6" >6</option>
  <option value="7" >7</option>
  <option value="8" >8</option>
  <option value="12" >12</option>
  <option value="14" >14</option>
  <option value="16" >16</option>
  <option value="54">Win</option>
</select>

Also, an interesting read I came across. Proper use of const for defining functions in JavaScript

Add further condition for JavaScript

2 Answers2