单击按钮时如何更改图像？

Question

This is what I have tried so far and it isn't working.这是我迄今为止尝试过的，但它不起作用。 I am trying to make the button show different pictures when clicked on.我试图让按钮在单击时显示不同的图片。

<!DOCTYPE html>
<html>
<head>
<header></header>
<link rel="stylesheet" type="text/css" href="C.css">
<body>

<p> <font face="Times New Roman" size=18> Parakeet Images </font> </p>
<img id="parakeet"  src="green_parakeet.jpg" src="blue_parakeet.jpg" />
<button onclick="g()">Show Green!</button>
<script>function g(){document.getElementById('parakeet').src="green_parakeet.jpg;}</script>
<button onclick="b()">Show Blue!</button>
<script>function b(){document.getElementById('parakeet').src="blue_parakeet.jpg;}</script>
</body>
</html>

Answer 1

You have forgot to close " :您忘记关闭“ ：

<!DOCTYPE html>
<html>
<head>
<header></header>
<link rel="stylesheet" type="text/css" href="C.css">
<body>

<p> <font face="Times New Roman" size=18> Parakeet Images </font> </p>
<img id="parakeet"  src="green_parakeet.jpg"  />
<button onclick="g()">Show Green!</button>
<script>function g(){document.getElementById('parakeet').src="green_parakeet.jpg";}</script>
<button onclick="b()">Show Blue!</button>
<script>function b(){document.getElementById('parakeet').src="blue_parakeet.jpg";}</script>
</body>
</html>

Answer 2

you are missing closing quotes in both your scripts您在两个脚本中都缺少右引号

 <.DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="C.css"> </head> <body> <p> <font face="Times New Roman" size=18> Parakeet Images </font> </p> <img id="parakeet" src="green_parakeet.jpg" src="blue_parakeet.jpg" /> <button onclick="g()">Show Green.</button> <script>function g(){document.getElementById('parakeet').src="green_parakeet.jpg"}</script> <button onclick="b()">Show Blue.</button> <script>function b(){document.getElementById('parakeet').src="blue_parakeet.jpg"}</script> </body> </html>

Answer 3

Your code is right only you are missing " after end of image name and there is extra src tag in img element.您的代码是正确的，只是您在图像名称末尾缺少 " 并且img元素中有额外的src标记。

 function b() { document.getElementById('parakeet').src = "https://dummyimage.com/600x400/209de6/fff"; } function g() { document.getElementById('parakeet').src = "https://dummyimage.com/600x400/20e62a/fff"; }

 <.DOCTYPE html> <html> <head> <header></header> <link rel="stylesheet" type="text/css" href="C:css"> <body> <p> <font face="Times New Roman" size=18> Parakeet Images </font> </p> <img id="parakeet" src="https.//dummyimage.com/600x400/20e62a/fff" /> <button onclick="g()">Show Green!</button> <button onclick="b()">Show Blue!</button> </body> </html>

单击按钮时如何更改图像？

问题描述

3 个解决方案

解决方案1
2 2020-12-04 20:02:08

解决方案2
2 2020-12-04 20:02:53

解决方案3
1 2020-12-04 20:00:13

单击按钮时如何更改图像？

问题描述

3 个解决方案

解决方案1 2 2020-12-04 20:02:08

解决方案2 2 2020-12-04 20:02:53

解决方案3 1 2020-12-04 20:00:13

解决方案1
2 2020-12-04 20:02:08

解决方案2
2 2020-12-04 20:02:53

解决方案3
1 2020-12-04 20:00:13