将“if/then.else”语句与“switch”语句组合在一起

一个简单的解决方案可以是字符串数组：

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");

我想保持清洁，但这只是解决方案之一。如果你经常使用它，你可以做一个函数。

您缺少 HTML，这确实有助于消除对脚本应该如何工作的一些疑问。仅根据您的描述，听起来您有两个输入，这些输入旁边的两个图像默认为零.gif，旁边有两个按钮。

如果这是正确的，你的HTML将看起来像这样：

<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">

您对要求的描述是，您需要if-then-else和switch来根据输入的数字控制映像切换。以下脚本适用于上述 HTML。脚本正在侦听对按钮的任何单击，当按下按钮时，以下脚本将根据您单击的按钮运行。按钮一是if-else-then，按钮二使用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.');
    }
});

您可以在以下链接示例中看到这一点：https://jsfiddle.net/9tfq781t/

我不完全确定你需要什么，所以我会猜测一下。

目的

• 两个输入(左和右(
• 一个按钮(标记为"进程编号"(
• 2 组 6 张图像(每组代表一个数字 0 到 5(
• 要求使用if-else if-else条件
• switch语句的必需使用
• 预期行为的顺序：
  • 用户在两个输入中输入一个数字(必须为：0>输入<6(
  • 单击该按钮应使 2 组 6 张图像显示图像
    对应于输入的值。(例如，左输入 = 2，右输入 = 4;因此，单击按钮时，左图像应变为2.png，右图像应更改为4.png。

溶液

尝试在给定的参数内工作具有挑战性，因为我想以不同的方式做事(即更有效率(。

• 由于输入有限制，我以懒惰的方式进行操作并使用数字输入(type="number"而不是常见的文本输入(并设置属性min="1"和max="5"。

• 尽管 min 和 max 属性有效，但它们仅适用于微调器。仍然可以输入任何内容，因此仍然必须实现某种验证。

• if-else if-else条件用于验证。

• 如果输入是可接受的，则通过函数处理每个值LED()

• LED() 是一个 11 个案例switch语句，它将根据输入值更改 2 个图像组。

• 2组6张图像实际上是1个精灵表(0-5.png(，具有6个位置，在两个跨度(#dex和#sin(之间共享。

• LED()使用switch来操作#dex和#sin类(.x-0到.x-5(，这会导致精灵表(0-5.png(的变化。

下面是一个堆栈片段，还有一个 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>