结合＆＃34; if / then..else＆＃34;声明＆＃34;开关＆＃34;声明

Question

我必须并排显示两个数字（都以zero.gif文件开头）。每个号码都需要一个输入区域，供用户输入1到5之间的数字，还有一个按钮，表示＆＃34;进程号，＆＃34;然后会弹出相应的号码。

我必须为一个if-then-else语句使用switch语句，为另一个语句使用<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> 语句。我分别理解这两个，但我不确定如何在脚本代码中将两者结合起来。

目前，当我在第一个输入框中输入数字时，它们都会同时更改。如果我尝试第二个方框，我会收到警告＆＃34;您必须选择1到5之间的数字。＆＃34;

所以我不确定如何将两者分开。我使用了不同的图片ID，但它不起作用。这是所有代码。

new StringBuilder(oword).reverse().toString().toUpperCase();

Answer 1

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

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

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

Answer 2

你错过了HTML，它真的有助于消除对你的脚本如何工作的疑虑。根据你的描述，听起来你有两个输入，两个图像接下来那些输入默认为zero.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。该脚本正在监听按钮上的任何点击，当按下按钮时，下面的脚本根据您单击的按钮运行。按钮1为if-else-then，按钮2为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/

Answer 3

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

<强>目标

• 两个输入（左和右）
• 一个按钮（标有＆＃34;进程编号＆＃34;）
• 2组6个图像（每个图像代表数字0到5）
• 必须使用if-else if-else条件
• 必须使用switch声明
• 预期行为的顺序：
  • 用户在两个输入中输入一个数字（必须是：0＆gt;输入＆lt; 6）
  • 单击该按钮可使2组6个图像显示图像
    这对应于输入的值。 （例如，左输入= 2，右输入= 4;因此，当单击按钮时，左图像应更改为2.png，右图像应更改为4.png。）

<强>解决方案

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

• 由于输入有限制，我使用了懒惰的方式并使用了数字输入（type="number"而不是常见的文本输入）并设置了属性min="1"和{{1 }}

• 虽然max="5"和min属性有效，但它们仅适用于微调器。它仍然可以输入任何内容，因此仍然需要进行某种验证。

• max条件用于验证。

• 如果输入可以接受，那么每个值都会通过函数if-else if-else

进行处理

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

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

• #sin使用LED()操纵switch和#dex类（#sin至.x-0），这会导致更改精灵表（.x-5）。

以下是一个堆叠代码段，并且还有一个 PLUNK 。

＆＃13;

＆＃13;

0-5.png

＆＃13;

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;
  }
}

＆＃13;

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;
}

＆＃13;

＆＃13;

＆＃13;