Javascript 在使用JS从提示符中进行选择后显示图片

用户输入适当的选项后，我需要使用一个条件语句将输入与我的选项进行比较，然后在网页上呈现图像。我知道我必须使用CSS显示，可能还需要使用if/then语句，但我不完全确定如何使用或在何处使用。到目前为止，我的javascript中已经有了这一点。 我不确定我应该使用什么，这样如果用户输入“红色”，就会出现一张图片（它将与霍格沃茨有关）。有正确方向的建议吗

function myFunction() {
    var text;
  var favColor = prompt("What color appeals most to you out of red, green, blue, or yellow?", "Let the game begin");
  switch(favColor.toLowerCase()) {
    case "blue":
      text = "Sounds like you like to think";
      break;
    case "red":
      text = "Feeling bold?";
      break;
    case "green":
      text = "Really? Interesting choice";
      break;
      case "yellow":
        text = "How very clever of you!"
          break;
    default:
      text = "C'mon! Pick one!";
  }
  document.getElementById("demo").innerHTML = text;
}

---

您可以根据用户答案添加

属性：

var text;
var src;
var favColor = prompt("What color appeals most to you out of red, green, blue, or yellow?", "Let the game begin");
switch(favColor.toLowerCase()) {
  case "blue":
    text = "Sounds like you like to think";
    src = 'blue_img.jpg';
    break;
  case "red":
    text = "Feeling bold?";
    src = 'red_img.jpg';
    break;
  case "green":
    text = "Really? Interesting choice";
    src = 'green_img.jpg';
    break;
    case "yellow":
    text = "How very clever of you!"
    src = 'yellow_img.jpg';
        break;
  default:
    text = "C'mon! Pick one!";
}
document.getElementById("demo").innerHTML = text;
if( src ){
  document.getElementById( 'my-image' ).src = src;
}

这比通过display:block显示4个隐藏图像要好，因为浏览器甚至可以下载隐藏图像。
您可以根据用户回答添加
属性：

var text;
var src;
var favColor = prompt("What color appeals most to you out of red, green, blue, or yellow?", "Let the game begin");
switch(favColor.toLowerCase()) {
  case "blue":
    text = "Sounds like you like to think";
    src = 'blue_img.jpg';
    break;
  case "red":
    text = "Feeling bold?";
    src = 'red_img.jpg';
    break;
  case "green":
    text = "Really? Interesting choice";
    src = 'green_img.jpg';
    break;
    case "yellow":
    text = "How very clever of you!"
    src = 'yellow_img.jpg';
        break;
  default:
    text = "C'mon! Pick one!";
}
document.getElementById("demo").innerHTML = text;
if( src ){
  document.getElementById( 'my-image' ).src = src;
}

这比通过display:block显示4个隐藏图像要好，因为浏览器甚至可以下载隐藏图像。
所以您想将元素背景色设置为红色、绿色、蓝色或黄色？是否要使用预定义的类？您选择“提示”或“输入元素”的原因是什么？那么，您的问题是如何注入图像，即现在的文本？那么您想将元素背景色设置为红色、绿色、蓝色或黄色？是否要使用预定义的类？您选择提示还是选择下拉列表或输入元素的原因？那么，您的问题是如何注入图像，即现在的文本？