0

I have a basic problem with for loop "tostring" iteration.

Description:

  1. There are 12 <input type="text"> containers.
  2. I want to detect when user writes si word in any 3 out of 12 containers.
  3. If user types si exactly 3 times I set an alert called You made it!.

Problem:

  1. Most likely that line is incorrect: if(cube[i].includes("si")).
  2. Not sure how to check all containers in for loop just to count the number of si word. (adding number to string in for loop to call another variables e.g. cube1, cube2, cube3 etc.)

Any help would be appreciated, thank you :)

function transmute() {
  var cube1 = document.getElementById("cube_slot1").value;
  var cube2 = document.getElementById("cube_slot2").value;
  var cube3 = document.getElementById("cube_slot3").value;
  var cube4 = document.getElementById("cube_slot4").value;
  var cube5 = document.getElementById("cube_slot5").value;
  var cube6 = document.getElementById("cube_slot6").value;
  var cube7 = document.getElementById("cube_slot7").value;
  var cube8 = document.getElementById("cube_slot8").value;
  var cube9 = document.getElementById("cube_slot9").value;
  var cube10 = document.getElementById("cube_slot10").value;
  var cube11 = document.getElementById("cube_slot11").value;
  var cube12 = document.getElementById("cube_slot12").value;
  var counter = 0;

  for (var i = 1; i <= 12; i++) {
    if (cube[i].includes("si")) {
      counter += 1;
    }
  }
  if (counter == 3) {
    alert("You made it!");
  }
}
t.niese
  • 39,256
  • 9
  • 74
  • 101
Smooth Coding
  • 85
  • 8
  • 3
    You don't have an array called `cube`, which is what `cube[i]` is trying to access. Use an array instead of 12 separate variables! – deceze Nov 04 '18 at 09:20

1 Answers1

3

Perhaps you could simplify your approach, but iterating over your elements within a for loop (via a dynamic id), and counting occasions where the si substring is found in input values.

If three or more cases are encountered, display the alert() and then break early from the loop:

function transmute() {
  
  for(var i = 1; i <= 12; i++) {

    var id = 'cube_slot' + i;
    var value = document.getElementById(id).value;
    
    if(value.includes('si')) {
      counter += 1;      
    }

    if(counter >= 3) {
      alert("You made it!");
      break
    }
  }
}
Dacre Denny
  • 29,664
  • 5
  • 45
  • 65
  • maybe giving a class to all the elements would make it easier using getElementsByClassName() – Pablo Máximo Nov 04 '18 at 09:23
  • @PabloMáximo yes, that would be an ideal approach if a common class were defined in the markup – Dacre Denny Nov 04 '18 at 09:24
  • You can also use queryselectorall: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll and loop through each element in the return – jgerstle Nov 04 '18 at 09:24
  • @Dacre Denny Much more elegant approach and works as well. Thank you so much for teaching me. – Smooth Coding Nov 04 '18 at 11:16
  • @stacho163 you're welcome, glad I could help - please consider accepting this answer (by clicking the white arrow) if you have found it helpful :-) – Dacre Denny Nov 04 '18 at 19:13