Onevent for multiple Ids to check if all text_input fields have been filled in order to show next screen button

CS Principles Coding and Debugging Help
1

Hi all,

I have a student who is trying to write a function to check if all of the text_input fields have been filled on a screen before unhiding the next button. Below is the pertinent code which he has written.

**How does one create an onEvent to check for multiple Ids? **
Would “onEvent(“screen1”, “input”, function(event)” work?

var no = 1;
var id = “”;
var input_no=0;

//on event update screen and determines if next button shows
onEvent(“text_inputNoun1”, “input”, function( ) {
nextScreen(Noun,5,nextNoun);
});

//function to check if all text_input elements have been filled in order to show the next screen button
function nextScreen (id, input_no, next_name){
if (no < input_no) {
if (“text_input” + id + no == “”) {
no + 1;
}
}
else {
showElement(“next_name”);

2

To me there is one obvious way.

function filled_in () {
  return getText("text_input1") != '' && getText("text_input2") != '';
}

onEvent("text_input1", "input", function () {
  if (filled_in()) {
    showElement("button1");
  }
});

onEvent("text_input2", "input", function () {
  if (filled_in()) {
    showElement("button1");
  }
});

Another way would be to keep a list of text input ids and remove them when each field is filled out. When it is empty you show the button.

3

I was thinking something along these lines, but the student has 5 screens with 5 to 9 text fields on each screen and was looking for a solution that would avoid writing a long Boolean for each screen.

4

Then you probably want option 2.

var text_inputs_screen1 = ["text_input1","text_input2"];
var text_inputs_screen2 = ["text_input3","text_input4"];

function text_input_changed (text_input, text_inputs, button) {
  if (getText(text_input) != '') {
    if (text_inputs.indexOf(text_input) > -1) {
      removeItem(text_inputs,text_inputs.indexOf(text_input));
    }
  } else {
    if (text_inputs.indexOf(text_input) < 0) {
      appendItem(text_inputs,text_input);
    }
  }
  if (text_inputs.length == 0) {
    showElement(button);
  } else {
    hideElement(button);
  }
}

onEvent("text_input1", "input", function () {
  text_input_changed("text_input1",text_inputs_screen1,"button1");
});

onEvent("text_input2", "input", function () {
  text_input_changed("text_input2",text_inputs_screen1,"button1");
});

Try it out here Code.org - App Lab

5

This will work. Thank you very much for the example code! :grinning:

6

Here is another possible solution (I don’t know how well it will work):

var no=1;
var blankName="";

for (var i = 1; i <= 6; i++) {
  textInput("textinputNoun" + i, "");
}

onEvent("screen1", "input", function(event) {
  var blankName = event.targetId;
  if (blankName != "screen1") {
    checkInput("Noun",6);
  }
});

function checkInput(id, input_no) {
  blankName= "textinput" + id + no;
  if (no <= input_no) {   
    if (getText(blankName) == "") {
     blankName= "textinput" + id + no;
     console.log (blankName + "  empty");
     } else {
       blankName= "textinput" + id + no++;
       console.log (blankName + "  full"); 
    }
   } 
   else {
      showElement("button1");
  }
}

Link to working code:

7

That works so long as the last input is in the last input box. If you fill them in from the bottom to the top you don’t get the button.

8

I suppose one can unhide each textbox as the one above it is filled. I’ll play around with it and see.