我希望图像根据我选择去的地方而改变

Question

所以我正在制作这个文字冒险游戏，基本上你可以在这个假想的地图上输入一组你想去的地方的动作。例如，在输入框中键入 "north"，然后结果将是 "you decided to go north and was greeted with a supermarket"。我想知道的是，是否可以根据我选择的目的地添加图像？就像上面的例子一样，我选择了北方并最终到达了一家超市，所以结果将是一张超市的图像。我已经弄清楚了 if 语句的工作原理，显示文本让玩家知道他去了哪里，但我还想知道如何添加图像？

...

<p> Pick a direction to go </p>

<input id = "input" type = "text" placeholder = "Type Help for actions"/><button onClick = "button()">Confirm</button>
<p id = "message"></p>


<script>

  function button() {
    var textInput;
    var newInput = input.value;
    if (newInput == "North") {
      textInput = "you went to the Abandoned Church";
      document.getElementById("message").innerHTML = textInput;
    }

    if (newInput == "North Again") {
      textInput = "you went to the Abandoned Someplace";
      document.getElementById("message").innerHTML = textInput;
    }

    if (newInput == "Help") {
      textInput = "Commands you can use: <ul><li>South</li><li>North</li><li>East</li><li>West</li><li>North Again</li><li>South again</li><li>West Again</li><li>East Again</li><li>North One More</li><li>East Once More</li><li>West Once More</li><li>South Once More</li>";
      document.getElementById("message").innerHTML = textInput;
    }


  }

</script>

Answer 1

在 html 中存在让您放置图像的 <img> 标签。

我认为一种可行的方法是创建一个带有空 src 的 img 标签，然后使用要显示的图像的 link 设置 src 属性。

Here you can find an example.

Answer 2

可以，有两种方法可以做到这一点。

解决方案 A - HTML/JS 组合：

<!DOCTYPE html>
<html>
<body>

<img id="myImg"/>

<p>Click the button to change the value of the src attribute of the image.</p>
<p><b>Note:</b> The src property can be changed at any time. However, the new image inherits the height and width attributes of the original image, if not new height and width properties are specified.</p>
<button onclick="myFunction()">Try it</button>

<script>
function myFunction() {
  document.getElementById("myImg").src = "hackanm.gif";
}
</script>

</body>
</html>

在这种方法中，您的 html 中有一个预定义的图像标签，但它没有 img src。您可以在 javascript 中设置您想要的时间 - 理想情况下，当他们 select 一个方向或选项时。

所以在你的情况下它会是这样的：

<p> Pick a direction to go </p>

<img id="myImg"/>

<input id = "input" type = "text" placeholder = "Type Help for actions"/><button onClick = "button()">Confirm</button>
<p id = "message"></p>


<script>

  function button() {
    var textInput;
    var newInput = input.value;
    if (newInput == "North") {
      textInput = "you went to the Abandoned Church";
      document.getElementById("message").innerHTML = textInput;
      document.getElementById("myImg").src = "church.png";
    }

    if (newInput == "North Again") {
      textInput = "you went to the Abandoned Someplace";
      document.getElementById("message").innerHTML = textInput;
      document.getElementById("myImg").src = "abandoned.png";
    }

    if (newInput == "Help") {
      textInput = "Commands you can use: <ul><li>South</li><li>North</li><li>East</li><li>West</li><li>North Again</li><li>South again</li><li>West Again</li><li>East Again</li><li>North One More</li><li>East Once More</li><li>West Once More</li><li>South Once More</li>";
      document.getElementById("message").innerHTML = textInput;
    }


  }

</script>

解决方案 B - 纯 JS：

<!DOCTYPE html>
<html>
<body>

<p>Click the button to change the value of the src attribute of the image.</p>
<p><b>Note:</b> The src property can be changed at any time. However, the new image inherits the height and width attributes of the original image, if not new height and width properties are specified.</p>
<button onclick="myFunction()">Try it</button>

<script>
function myFunction() {
  var img = document.createElement("img");
  img.id = "myImg";
  document.body.appendChild(img);
  document.getElementById("myImg").src = "hackanm.gif";
}
</script>

</body>
</html>

或者使用 解决方案 B，您根本不需要在 html 中定义 <img/> 标签，可以从 javascript纯.

我建议阅读此文档以了解更多详细信息here

希望对您有所帮助。

Answer 3

为此，如果您采用数据驱动的方法会更好。如果您有一组可以查询的数据，则可以检索所需的任何内容，包括图像 URL。这是您的用例的一个简单示例：

let data = {
      options: {
        North: {
          message: "you went to the Abandoned Church",
          image: "https://picsum.photos/200/300?random=1"
        },
        South: {
          message: "you went to the Abandoned Someplace",
          image: "https://picsum.photos/200/300?random=2"
        }
      }
    };

我在这里也为它创建了一个 Codepen：https://codepen.io/richjava/pen/poJmKBg

希望对您有所帮助。

我希望图像根据我选择去的地方而改变

I want an image to change depending on where I choose to go

html

javascript

image

statements

解决方案 A - HTML/JS 组合：

解决方案 B - 纯 JS：