如何在点击按钮时改变图像？
这是我到目前为止所尝试过的，但它不起作用。我试图让按钮在点击时显示不同的图片。
<!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>
POPMUISE浏览 66回答 3
3回答
-
大话西游666
您忘记关闭“ ：<!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> -
MYYA
您的两个脚本中都缺少结束引号<!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> -
繁星点点滴滴
您的代码是正确的，只是您在图像名称末尾缺少“并且元素src中有额外的标签img。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>
随时随地看视频慕课网APP
相关分类
JavaScript