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>

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