时间戳

首页 > 解决方案 > 按钮更改图像

javascript - 按钮更改图像

问题描述

这是我的代码。我是 JavaScript 新手，这是我的第一个代码（我已经盯着它看了两天，不知道出了什么问题）。

我正在尝试编写一个 HTML 页面，它允许用户通过单击一个按钮来更改图像，并通过单击另一个按钮返回到原始图像。

当我执行它时，第一张图像与两个按钮一起显示，但是当我单击其中任何一个按钮时，图像就会变成空白。

<!DOCTYPE html>
<html>

<body>

  <button onclick="document.getElementById('IMG').src = 'C:\Users\Username\Desktop\firstcode\img2.jpg'">IMAGE 2</button>

  <img id="IMG" src="C:\Users\Username\Desktop\firstcode\img1.gif">

  <button onclick="document.getElementById('IMG').src = 'C:\Users\Username\Desktop\firstcode\img1.jpg'">IMAGE 1</button>


</body>

</html>

我怎样才能解决这个问题？

标签： javascripthtml

解决方案

在 JavaScript 字符串文字中，\是转义字符，而不是文字字符。这样我们就可以使用\n换行符、\t制表符等。要将文字\放入您分配给src属性的字符串中，您需要\\：

<button onclick="document.getElementById('IMG').src = 'C:\\Users\\Username\\Desktop\\firstcode\\img2.jpg'">IMAGE 2</button>

<img id="IMG" src="C:\Users\Username\Desktop\firstcode\img1.gif">

<button onclick="document.getElementById('IMG').src = 'C:\\Users\\Username\\Desktop\\firstcode\\img1.jpg'">IMAGE 1</button>

您不必在img标记中执行此操作，因为\它不是 HTML 中的转义字符。

旁注：只是为了警告您人们遇到的一个常见陷阱：如果您的button元素在 a 中form，他们会尝试提交表单，因为（在我看来非常type令人惊讶的）button元素的默认值是"submit". 为了防止它，你会使用<button type="button" ...>. 但这在您展示的内容中不是问题，因为它们不在form.

享受你的学习！接下来要看几件事：

  • 通过addEventListener而不是onxyz-attribute 样式的事件处理程序（也称为“DOM0”处理程序，因为它们多年来没有在任何DOM标准中指定）使用现代事件处理。（如果您想了解支持没有它的过时浏览器，我的回答在这里有一些您可以使用的东西。）

  • 使用本地安装的 Web 服务器（您可以选择很多）而不是直接打开 HTML 文件。这是因为浏览器处理直接打开的 HTML 文件（例如file:///URL）与从服务器加载的 HTML 不同，因此如果您的目标是学习 Web 应用程序或页面的编程，最好使用 Web 服务器。

推荐阅读