How to use a for loop without using different id tags for each input? The result for the javascript works however I want to know how to use for loop so I do not have to change every id tags in order to achieve the same result

<script>
        function calculateTotal(){

            let total = 0;

            let num1 = document.getElementById("sec3").value ;
            let num2 = document.getElementById("sec4").value ;
            document.getElementById("sec5").value = (num1 * num2).toFixed(2);
            total += (num1 * num2);

            num1 = document.getElementById("sec8").value ;
            num2 = document.getElementById("sec9").value ;
            document.getElementById("sec10").value = (num1 * num2).toFixed(2);
            total += (num1 * num2);

            num1 = document.getElementById("sec13").value ;
            num2 = document.getElementById("sec14").value ;
            document.getElementById("sec15").value = (num1 * num2).toFixed(2);
            total += (num1 * num2);

            num1 = document.getElementById("sec18").value ;
            num2 = document.getElementById("sec19").value ;
            document.getElementById("sec20").value = (num1 * num2).toFixed(2);
            total += (num1 * num2);

            num1 = document.getElementById("sec23").value ;
            num2 = document.getElementById("sec24").value ;
            document.getElementById("sec25").value = (num1 * num2).toFixed(2);
            total += (num1 * num2);

            document.getElementById("grandTotal").value = total.toFixed(2);
        }
        
       </script>

Let me know if you need the full code.

If you want to select all ids, you can do something like document.querySelectorAll('*[id]').
You can loop through that or do as you will with.

There are other variations depending on the type of specificity you need.

Link to documentation: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll

@toastedpitabread, What if I just want to use Javascript only because I have not learn querySelector.

Sounds to me like a jump ahead type of question. Are you veering from the course path?

1 Like

Hi @web7481176285,

querySelector is a method in the javascript language that’s useful.

But like @mtf it seems like you may be experimenting with something else! If you describe to us what it is you are trying to build, we may be able to chime in with advice.

1 Like

@toastedpitabread, I’m trying to build an ordering system. The solution works but the problem with the code above is I used different id names/tags for each input field in a table which I do not want to do that. I want to create a for loop to repeat this script:

let num1 = document.getElementById("sec3").value ;
            let num2 = document.getElementById("sec4").value ;
            document.getElementById("sec5").value = (num1 * num2).toFixed(2);
            total += (num1 * num2);

I do not want to change the id names/tags for each input field:

let num1 = document.getElementById("sec3").value ;
            let num2 = document.getElementById("sec4").value ;
            document.getElementById("sec5").value = (num1 * num2).toFixed(2);
            total += (num1 * num2);

            num1 = document.getElementById("sec8").value ;
            num2 = document.getElementById("sec9").value ;
            document.getElementById("sec10").value = (num1 * num2).toFixed(2);
            total += (num1 * num2);

            num1 = document.getElementById("sec13").value ;
            num2 = document.getElementById("sec14").value ;
            document.getElementById("sec15").value = (num1 * num2).toFixed(2);
            total += (num1 * num2);

I just want to repeat the id tags from sec3 - sec5 which is the first row of the table using for loop. I do not want to create more id tags. For instance, I would like to use the same id tags from the first row . I hope you understand my problem.

It looks like you can create a function (to factor this code).

The for-loop can run the function and pass in the arguments as needed. The only issue is you have non-sequential numbers… One workaround would be to make a list of the numbers (so [“sec3”,“sec4”,“sec5”]) etc. and this way you can feed this into the function/loop mechanism more directly.

example (you’ll have to adapt the idea to your own needs if this is indeed what you need):

function doSomething(num1, num 2, num3){ 
            num3 = (num1 * num2).toFixed(2);
            total += (num1 * num2);
}

let lst = [1,2,3] // some ordered list, these are dummy values

for (i++; i < lst; i+3){   //note, you'd need some way to make the stride 3
  doSomething(lst[i],lst[i+1],lst[i+2]);
}

In terms of the ordered list, you can make it just numbers and append them to a string “sec” to make it easier to control. Or maybe that’s too convoluted… just brainstorming…