Combining "if/then..else" statement with "switch" statement

Question

I have to display two numbers side by side (both starting off with a zero.gif file). Each number needs an input area for users to enter in a number between 1 and 5 and a button that says "Process Number," then the corresponding number should pop up.

I have to use an if-then-else statement for one and a switch statement for the other. I understand both of these separately but I'm not sure how to combine the two in the script code.

Currently, when I enter in a number in the first input box, both of them change at the same time. If I try the second box, I get the alert "You must choose a number between 1 and 5."

So I'm not sure how to separate the two. I used different image IDs but it's not working. Here's all the code.

<script type="text/javascript">
    function processNumber() {
      var numberInput = document.getElementById("userInput").value;

      // test for valid input number from 1 to 5
      if (numberInput < 1 || numberInput > 5) {
        alert("Your number must be from 1 to 5");
        return;

      }


      if (numberInput == 1)
        document.getElementById("ones").src="images/one.gif";
      else if (numberInput == 2)
        document.getElementById("ones").src = "images/two.gif";
      else if (numberInput == 3)
        document.getElementById("ones").src = "images/three.gif";
      else if (numberInput == 4)
        document.getElementById("ones").src = "images/four.gif";
      else if (numberInput == 5)
        document.getElementById("ones").src = "images/five.gif";
      else alert("Sorry - your input is not recognized");
      // likely a non numeric was entered if we got here


      switch (numberInput) {
        case "1": document.getElementById("group").src = "images/one.gif";
          break;
        case "2": document.getElementById("group").src = "images/two.gif";
          break;
        case "3": document.getElementById("group").src = "images/three.gif";
          break;
        case "4": document.getElementById("group").src = "images/four.gif";
          break;
        case "5": document.getElementById("group").src = "images/five.gif";
          break;

        default: alert("Sorry - your input is not recognized");

          // default in case a non numeric was entered
      } // end switch (numberInput)
    } // end function processNumber()

</script>

Answer 1

A simple solution can be an array of strings:

var numbers = ["zero", "one", "two", "three", "four", "five"];

if (numbers[numberInput] != undefined) {
   document.getElementById("ones").src = "images/" + numbers[numberInput] + ".gif";
   document.getElementById("group").src = "images/" + numbers[numberInput] + ".gif";
}
else 
   alert("Sorry - your input is not recognized");

I wanted to keep it clean, but this is just one of the solutions. If you use this a lot you can make a function.

Answer 2

You are missing the HTML which would really help remove some doubts about how your script is suppose to work. Based on your description alone, it sounds like you have two inputs, two images next those inputs defaulting to zero.gif, and two buttons next to those.

If that is correct, your HTML will look something like this:

<input type="text" id="one-val"> <img src="zero.gif" id="one-img">
<input type="button" id="one-btn" value="Process Number">
<br>
<input type="text" id="two-val"> <img src="zero.gif" id="two-img">
<input type="button" id="two-btn" value="Process Number">

Your description of the requirements is that you need if-then-else and switch to control the image switching based on the number entered. The below script works with the above HTML. The script is listening to any clicks on the button, when the button is pressed the below script runs based on which button you clicked. Button one is if-else-then and button two uses switch.

document.getElementById("one-btn").addEventListener("click", function(){
    var oneImg = document.getElementById("one-img");
    var oneVal = document.getElementById("one-val");
    if (oneVal.value == 1) {oneImg.src = "one.gif";}
    else if (oneVal.value == 2) {oneImg.src = "two.gif";}
    else if (oneVal.value == 3) {oneImg.src = "three.gif";}
    else if (oneVal.value == 4) {oneImg.src = "four.gif";}
    else if (oneVal.value == 5) {oneImg.src = "five.gif";}
    else {alert('Not an acceptable value.');}
});

document.getElementById("two-btn").addEventListener("click", function(){
    var twoImg = document.getElementById("two-img");
    var twoVal = document.getElementById("two-val");
    switch (twoVal.value) {
      case '1': twoImg.src = "one.gif"; break;
      case '2': twoImg.src = "two.gif"; break;
      case '3': twoImg.src = "three.gif"; break;
      case '4': twoImg.src = "four.gif"; break;
      case '5': twoImg.src = "five.gif"; break;
      default: alert('Not an acceptable value.');
    }
});

You can see this working on the following linked example: https://jsfiddle.net/9tfq781t/