Javascript 我希望图像根据我选择的位置进行更改

所以我在做这个文本冒险游戏，基本上你可以在这个想象的地图上输入一组你想去的地方。例如，在输入框中键入“north”，结果将是“you determing to north and have with a supermarket”。我想知道的是，如果我可以根据我选择的目的地添加一个图像，是否有可能？像上面的例子一样，我选择了north，最后去了一家超市，所以结果将是一个超市的图像。 我已经找到了显示文本的if语句的工作原理，以便让玩家知道他去了哪里，但是我也想知道如何添加一个图像

。。。

选择要走的方向

证实

功能按钮（）{
var文本输入；
var newInput=input.value；
如果（新输入==“北”）{
textInput=“你去了废弃的教堂”；
document.getElementById（“message”）.innerHTML=textInput；
}
如果（newInput==“再次向北”）{
textInput=“你去了一个废弃的地方”；
document.getElementById（“message”）.innerHTML=textInput；
}
如果（newInput==“帮助”）{
textInput=“您可以使用的命令：
南
北东西再北再南再西再东
再东
再西再南”；
document.getElementById（“message”）.innerHTML=textInput；
}
}

---

在html中，存在带有要显示的图像链接的

src

属性

---

在html中，存在带有要显示的图像链接的

src

属性

---

是的，你可以这样做，有两种方法

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

注意：src属性可以随时更改。但是，如果未指定新的高度和宽度属性，则新图像将继承原始图像的高度和宽度属性

试试看
函数myFunction（）{
document.getElementById（“myImg”）.src=“hackanm.gif”；
}

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

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

选择要走的方向

南
北东西北南西东东东西南”；
document.getElementById（“message”）.innerHTML=textInput；
}
}

解决方案B-纯JS：

单击按钮更改图像的src属性的值

注意：src属性可以随时更改。但是，如果未指定新的高度和宽度属性，新图像将继承原始图像的高度和宽度属性

试试看
函数myFunction（）{
var img=document.createElement（“img”）；
img.id=“myImg”；
文件.正文.附件（img）；
document.getElementById（“myImg”）.src=“hackanm.gif”；
}

或者，使用解决方案B，您根本不需要在html中定义

标记，只需从javascript创建它

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

---

我希望这能对你有所帮助。

是的，你可以通过两种方式做到这一点

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

注意：src属性可以随时更改。但是，如果未指定新的高度和宽度属性，新图像将继承原始图像的高度和宽度属性

试试看
函数myFunction（）{
document.getElementById（“myImg”）.src=“hackanm.gif”；
}

在这种方法中，您的html中有一个带前缀的图像标记，但它没有img src。您可以在javascript中希望的时间设置它-理想情况下，当他们选择方向或选项时

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

选择要走的方向

南
北东西北南西东东东西南”；
document.getElementById（“message”）.innerHTML=textInput；
}
}

解决方案B-纯JS：

单击按钮更改图像的src属性的值

注意：src属性可以随时更改。但是，如果未指定新的高度和宽度属性，则新图像将继承原始图像的高度和宽度属性

试试看
函数myFunction（）{
var img=document.createElement（“img”）；
img.id=“myImg”；
文件.正文.附件（img）；
document.getElementById（“myImg”）.src=“hackanm.gif”；
}

或者，使用解决方案B，您根本不需要在html中定义

标记，只需从javascript创建它

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

---

我希望这对您有所帮助。

对于这一点，如果您采用数据驱动的方法会更好。如果您有一组可以查询的数据，则可以检索所需的任何内容，包括图像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"
        }
      }
    };

我还在这里为它创建了一个代码笔：

---

我希望它能有所帮助。

对于这一点，如果您采用数据驱动的方法会更好。如果您有一组可以查询的数据，则可以检索所需的任何内容，包括图像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"
        }
      }
    };

我还在这里为它创建了一个代码笔：

我希望有帮助