如何输入字母时显示图像？

Question

说我想通过输入字母来显示图像。我按字母a，单击按钮，将出现一个图像。但是由于某种原因，我无法执行此操作，因为我只想使用switch语句。这是我尝试执行的代码：

 <input type="text" id="abc">
 <button onclick="myFunction()"> </button>
 <br>
 <img src="" id="image">

 <script>
  var x = document.getElementById('abc').value;

  function myFunction() {
   switch (x) {
    case x = a:
     document.getElementById('image').src = "alligator.jpg";
    break;
    case x = b:
     document.getElementById('image').src = "baseball.jpg";
    break;
    default:
     window.alert('No input');
    break;
   }
  }
 </script>

Answer 1

[您没有引用字符串，不需要执行“ x = a”，它可以只是字母，并且在函数调用时没有获得更新的输入值。

function myFunction() {
    var x = document.getElementById('abc').value;
    switch (x) {
        case 'a':
            document.getElementById('image').src = "https://picsum.photos/id/1003/100/100";
            break;
        case 'b':
            document.getElementById('image').src = "https://picsum.photos/id/1020/100/100";
            break;
        default:
            window.alert('No input');
            break;
    }
}

<input type="text" id="abc">
<button onclick="myFunction()">Go</button>
<br>
<img src="" id="image">

Answer 2

您需要在函数内使用x，并且大小写应为"a"和"b"，而不是那些表示形式。以下摘录作品：

<input type="text" id="abc">
 <button onclick="myFunction()"> </button>
 <br>
 <img src="" id="image">

 <script>
  
  function myFunction() {
  var x = document.getElementById('abc').value;
  
  switch (x) {
    case "a":
     document.getElementById('image').src = "alligator.jpg";
    break;
    case "b":
     document.getElementById('image').src = "baseball.jpg";
    break;
    default:
     window.alert('No input');
    break;
   }
  }
 </script>

Answer 3

您已从函数中声明x，因此不会获取更新的值。您需要将x放在myFunction内，以便每次都会获取更新的值：switch语句也需要字符串。

尝试一下：

function myFunction() {
  var x = document.getElementById('abc').value;
  switch (x) {
    case x = 'a':
      document.getElementById('image').src = "https://9b16f79ca967fd0708d1-2713572fef44aa49ec323e813b06d2d9.ssl.cf2.rackcdn.com/1140x_a10-7_cTC/20190607MMSAlligator1-1569956549.jpg";
      break;
    case x = 'b':
      document.getElementById('image').src = "https://upload.wikimedia.org/wikipedia/commons/4/40/Heyward_lines_into_double_play_%2828356212176%29.jpg";
      break;
    default:
      window.alert('No input');
      break;
  }
}

<input type="text" id="abc">
<button onclick="myFunction()">click </button>
<br>
<img src="" id="image">