0

I have to add values for all the checkbox that are selected. I would like to use a for loop to achieve this.

But the code is not working and I believe it's because of the way that I am doing the concatenation.

I have tried the following but neither works: window.document.forms[2].i.checked == true window.document.forms[2].${i}.checked == true

This is my code:

HTML:

    <form class="jumbotron form3">

        <h5>EXERCICE 7</h5>

        <p>Veuillez cocher trois cases:</p>
        <hr>
        <input type="checkbox" name="1" value="-8"> Case 1
        <br><input type="checkbox" name="2" value="5"> Case 2
        <br><input type="checkbox" name="3" value="3"> Case 3
        <br><input type="checkbox" name="4" value="10"> Case 4
        <br><input type="checkbox" name="5" value="0"> Case 5
        <br><input type="checkbox" name="6" value="-1"> Case 6
        <br><input type="checkbox" name="7" value="-7"> Case 7
        <br><input type="checkbox" name="8" value="15"> Case 8
        <br><input type="checkbox" name="9" value="8"> Case 9
        <br><input type="checkbox" name="10" value="3"> Case 10
        <hr>
        <input type="button" class="btn btn-warning" value="Calculer le score du jeu" onClick="calculerScore()">
        <input type="button" class="btn btn-info" value="Reset">
        <br><br>
        <input type="text" name="score">
    </form>

JS:

calculerScore = () => {
    var resultat = 0;

    for (let i = 1; i <= 10; i++) {
        if (window.document.forms[2].i.checked == true) {
            resultat += Number(window.document.forms[2].i.value);
        }
    }

    window.document.forms[2].score.value = resultat;
}
1
  • 1
    .i should be [i] Commented Sep 22, 2021 at 20:32

3 Answers 3

1

The easy way is by using Array.reduce().

const checkboxes = document.querySelectorAll("input[type=checkbox]");

const result = Array
  .from(checkboxes)
  .reduce((acc, checkbox) => acc + Number(checkbox.value), 0);

console.log(result);
<form class="jumbotron form3">
  <h5>EXERCICE 7</h5>
  <p>Veuillez cocher trois cases:</p>
  <hr>
  <input type="checkbox" name="1" value="-8"> Case 1
  <br><input type="checkbox" name="2" value="5"> Case 2
  <br><input type="checkbox" name="3" value="3"> Case 3
  <br><input type="checkbox" name="4" value="10"> Case 4
  <br><input type="checkbox" name="5" value="0"> Case 5
  <br><input type="checkbox" name="6" value="-1"> Case 6
  <br><input type="checkbox" name="7" value="-7"> Case 7
  <br><input type="checkbox" name="8" value="15"> Case 8
  <br><input type="checkbox" name="9" value="8"> Case 9
  <br><input type="checkbox" name="10" value="3"> Case 10
  <hr>
  <input type="button" class="btn btn-warning" value="Calculer le score du jeu" onClick="calculerScore()">
  <input type="button" class="btn btn-info" value="Reset">
  <br><br>
  <input type="text" name="score">
</form>

Sign up to request clarification or add additional context in comments.

Comments

1

You can access your dom elements using querySelector method. We need querySelectorAll since we want to get all matching elements.

Main Steps:

  • Fetches only cases that are checked.
  • Takes their values.
  • Sums these values.
  • Sets final result on score input tag.

Javascript code

const calculerScore = () => {

        // get ONLY checked boxes
        const allCheckedBoxes = window.document.querySelectorAll('input[type=checkbox]:checked');    // returns Nodelist object
        console.log('allCheckedBoxes: ', allCheckedBoxes);

        // take all checked boxes values in seperate array
        const checkedBoxesValues = [...allCheckedBoxes].map(box => {
            return parseInt(box.value);
        })
        console.log("checkedBoxesValues:", checkedBoxesValues)
        
        // sum all values
        let resultat = 0;
        checkedBoxesValues.forEach(value => {
            resultat += value;
        });
        console.log("resultat: ",resultat);
        
        // finally set value of score input tag
        window.document.querySelector('input[name="score"]').value = resultat;
    }

I have added consoles and comments for understanding.

There is a simpler way to do it with reduce as @Invizi mentioned, However, I have omitted it for now perceiving your understanding of JS.

Let me know if it helped.

Comments

1

Firstly , you need to optimize that code , don't hard code everything , add a single tag in a loop and render that.( Just a Suggestion )

Secondly , why even access all the input elements by accessing the DOM , you could easily get them through the Form you appended on the top. When you attach a Form to a group of Input Tags , it stores those instances in the Form itself , simply get the Form ( you could attach an ID to that ) and access all the inputs through that instance.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.