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

Question

I need to display two numbers side by side (both start with the file zero.gif ). Each number requires an input area for users to enter a number from 1 to 5 and a button that says "Process number", then the corresponding number should appear.

I need to use the if-then-else for one and switch 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 a number in the first input field, both of them change at the same time. If I try the second box, I get a warning "You must select a number from 1 to 5."

Therefore, I am not sure how to separate the two. I used different image identifiers, but it does not work. Here is the whole 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

An easy solution could 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 solution. If you use this a lot, you can make a function.

Answer 2

You are missing out on HTML, which will really help eliminate some doubts about how your script should work. Based only on your description, it looks like you have two inputs, the two images below these inputs default to zero .gif and the two buttons next to them.

If this 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 switching of images based on the number entered. The below script works with the above HTML. the script listens for any button presses when the button is pressed, below the script is executed based on which you clicked the button. The one button is if-else-then , and the 2 button is 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 while working on the following related example: https://jsfiddle.net/9tfq781t/

Answer 3

I'm not quite sure what you need, so I guess.

purpose

• Two inputs (left and right)
• One button (labeled "Process Number")
• 2 groups of 6 images (each of which represents a number from 0 to 5)
• Mandatory use of if-else if-else conventions
• Mandatory use of the switch
• The sequence of expected behavior:
  • The user enters a number on both inputs (should be: 0> input <6)
  • Pressing the button should make 2 groups of 6 images displaying the image
    which corresponds to the input value. (for example, left input = 2 and right input = 4, so when the button is pressed, the left image should change to 2.png , and the correct image should change to 4.png .)

Decision

Trying to work with these parameters was difficult, because I wanted to do something differently (i.e. more efficiently).

• Since there was a limit to the input, I did it in a lazy way and used numerical inputs ( type="number" instead of regular text inputs) and set the attributes min="1" and max="5" .

• Although the min and max attributes work, they only apply to spinners. It is still possible to enter something, so any verification is necessary.

• if-else if-else conditions were used if-else if-else .

• If the inputs are acceptable, then each value is processed via the LED() function

• LED() is an eleven- switch that will change 2 groups of images according to input values.

• 2 groups of 6 images - this is actually 1 sheet of sprites ( 0-5.png ), which has 6 positions divided between two spans ( #dex and #sin ).

• LED() uses a switch to control the classes #dex and #sin ( .x-0 thru .x-5 ), which causes changes in the sprite sheet ( 0-5.png ).

Below is a fragment of the stack, as well as PLUNK .

 var proc = document.getElementById('process'); proc.addEventListener('click', function(e) { var L = document.getElementById('left').value; var R = document.getElementById('right').value; if (isNaN(L)) { alert(L + 'is not a number'); } else if (isNaN(R)) { alert(R + 'is not a number'); } else if (R > 5 || L > 5) { alert('Input cannot exceed 5'); } else if (R < 1 || L < 1) { alert('Input must be at least 1'); } else { var D = 'D' + L.toString(); var S = 'S' + R.toString(); LED(D); LED(S); } }, false); function LED(x) { var dex = document.getElementById('dex'); var sin = document.getElementById('sin'); switch (x) { case 'D1': dex.classList.remove('x-0', 'x-2', 'x-3', 'x-4', 'x-5'); dex.classList.add('x-1'); break; case 'D2': dex.classList.remove('x-0', 'x-1', 'x-3', 'x-4', 'x-5'); dex.classList.add('x-2'); break; case 'D3': dex.classList.remove('x-0', 'x-1', 'x-2', 'x-4', 'x-5'); dex.classList.add('x-3'); break; case 'D4': dex.classList.remove('x-0', 'x-1', 'x-2', 'x-3', 'x-5'); dex.classList.add('x-4'); break; case 'D5': dex.classList.remove('x-0', 'x-1', 'x-2', 'x-3', 'x-4'); dex.classList.add('x-5'); break; case 'S1': sin.classList.remove('x-0', 'x-2', 'x-3', 'x-4', 'x-5'); sin.classList.add('x-1'); break; case 'S2': sin.classList.remove('x-0', 'x-1', 'x-3', 'x-4', 'x-5'); sin.classList.add('x-2'); break; case 'S3': sin.classList.remove('x-0', 'x-1', 'x-2', 'x-4', 'x-5'); sin.classList.add('x-3'); break; case 'S4': sin.classList.remove('x-0', 'x-1', 'x-2', 'x-3', 'x-5'); sin.classList.add('x-4'); break; case 'S5': sin.classList.remove('x-0', 'x-1', 'x-2', 'x-3', 'x-4'); sin.classList.add('x-5'); break; default: dex.classList.remove('x-1', 'x-2', 'x-3', 'x-4', 'x-5'); dex.classList.add('x-0'); sin.classList.remove('x-1', 'x-2', 'x-3', 'x-4', 'x-5'); sin.classList.add('x-0'); break; } } 

 body { font: 400 16px/1.2'Consolas'; color: lime; background: #444; } fieldset { width: 335px; border: 2px ridge lime; } input { text-align: center; font: inherit; color: lime; background: #000; } .x-0, .x-1, .x-2, .x-3, .x-4, .x-5 { background: url(https://glpjt.s3.amazonaws.com/so/digit/0-5.png) no-repeat; } .x-0 { background-position: 0 0 !important; width: 18px; height: 24px; } .x-1 { background-position: 0 -25px; width: 18px; height: 24px; } .x-2 { background-position: 0 -50px; width: 18px; height: 24px; } .x-3 { background-position: 0 -75px; width: 18px; height: 24px; } .x-4 { background-position: 0 -100px; width: 18px; height: 24px; } .x-5 { background-position: 0 -125px; width: 18px; height: 24px; } #led { display: inline-table; width: 40px; object-fit: contain; } .digit { width: 18px; height: 24px; border: 1px inset #0F9; position: relative; top: -18px; z-index: 1; display: table-cell; } 

 <form id="twoDigit" name="twoDigit"> <fieldset> <legend>twoDigit</legend> <input id="left" name="left" type="number" min="1" max="5" step="1" /> <input id="right" name="right" type="number" min="1" max="5" step="1" /> <input id="process" name="process" type="button" value="Process Number" /> <output id="led" name="led"> <span id="dex" class="digit x-0"></span> <span id="sin" class="digit x-0"></span> </output> </fieldset> </form>