javascript - 输入字母时如何使图像出现？

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>

标签： javascriptswitch-statement

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