Question

这是我的代码。我是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>

我该如何解决这个问题？

Answer 1

在JavaScript字符串文字中，\是转义字符，而不是文字字符。这样我们就可以使用\n之类的内容作为换行符，\t作为标签符号等。将文字\放入您为{分配给src的字符串中{1}}属性，您需要\\：

<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元素位于form，他们会尝试提交表单，因为（我的想法< strong>非常令人惊讶的是type元素的默认button为"submit"。为了防止它，您使用<button type="button" ...>。但这并不是你所展示的问题，因为它们不在form中。

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

通过addEventListener而不是onxyz使用现代事件处理 - 属性样式的事件处理程序（也称为＆＃34; DOM0和＃34;处理程序，因为它们未在任何DOM标准多年。（如果你想了解支持那些没有它的过时浏览器，我的答案就是你可以使用的。）
使用本地安装的Web服务器（您可以选择许多），而不是直接打开HTML文件。这是因为浏览器直接打开直接打开的HTML文件（例如，file:/// URL）与从服务器加载的HTML不同，因此如果您的目标是了解Web应用程序或页面的编程，最好使用Web服务器。

按钮更改图像

1 个答案: