[英]How to change image source of html element using javascript
我一直在互聯網上搜索遇到同樣問題的人，但我找不到解決方案。 我只是不知道如何使用 javascript 更改圖像的來源。 我最初認為這可能是因為我在另一個文件中而不是在實際的 html 文件中編寫了 javascript，但我嘗試將腳本放在 html 文件中，但這也不起作用。 如果有人能告訴我我做錯了什么，那就太好了。
<!DOCTYPE html>
<html>
<head>
<title>
Rock Paper Scissors Game
</title>
<link rel="stylesheet" href="styles.css" />
<body>
<header>
<h1>Rock Paper Scissors</h1>
</header>
<div class="score-board">
<div id="user-label" class="badge">user</div>
<div id="computer-label" class="badge">comp</div>
<span id="user-score">0</span>:<span id="computer-score">0</span>
</div>
<div class="result">
<p>Make Your Move!</p>
</div>
<div class="choices">
<div class="choice" **onclick="changeImg()**" id="r">
<img src="images/rock.png" width="115" height="95" />
</div>
<div class="choice" id="p">
<img src="images/paper.png" width="120" height="120" />
</div>
<div class="choice" id="s">
<img src="images/scissors.png" width="130" height="110" />
</div>
</div>
<div class="fighters">
<div class="fighter" id="u">
<img src="images/rock.png" width="370" height="300" />
</div>
<div class="fighter" id="c">
<img src="images/rockflipped.png" width="370" height="300" />
</div>
</div>
<div class="squares">
<div class="square" id="userSquare"></div>
<div class="square" id="computerSquare"></div>
</div>
**
<script>
var userImg = document.getElementById('u');
var compImg = document.getElementById('c');
function changeImg() {
console.log('here');
userImg.src = 'file:///C:/...scissors.png';
}
</script>
**
<script src="app.js" charset="utf-8"></script>
</body>
</head>
</html>
您需要將id屬性放在img標簽內。 而且它必須是獨一無二的。 你現在正在做的是你得到的不是實際圖像的div 。
例子：
<img var userImg = document.getElementById("c500");
<script>
function changeImg()
{
console.log("here");
userImg.src = "https://i.chzbgr.com/full/8759954176/hFD7BD608/can-has-code-review.jpg";
}
changeImg();
</script>
JSFiddle： https ://jsfiddle.net/m56tq1ba/
<!DOCTYPE html> <html> <head> <title> Rock Paper Scissors Game </title> <link rel="stylesheet" href="styles.css" /> <body> <header> <h1>Rock Paper Scissors</h1> </header> <div class="score-board"> <div id="user-label" class="badge">user</div> <div id="computer-label" class="badge">comp</div> <span id="user-score">0</span>:<span id="computer-score">0</span> </div> <div class="result"> <p>Make Your Move!</p> </div> <div class="choices"> <div class="choice" onclick="changeImg()" id="r"> <img src="images/rock.png" width="115" height="95" /> </div> <div class="choice" id="p"> <img src="images/paper.png" width="120" height="120" /> </div> <div class="choice" id="s"> <img src="images/scissors.png" width="130" height="110" /> </div> </div> <div class="fighters"> <div class="fighter" id="u"> <img id="userImg_100" src="images/rock.png" width="370" height="300" /> </div> <div class="fighter" id="c"> <img src="images/rockflipped.png" width="370" height="300" /> </div> </div> <div class="squares"> <div class="square" id="userSquare"></div> <div class="square" id="computerSquare"></div> </div> <script> var userImg = document.getElementById('userImg_100'); var compImg = document.getElementById('c'); function changeImg() { console.log('here'); userImg.src = 'https://i.chzbgr.com/full/8759954176/hFD7BD608/can-has-code-review.jpg'; } </script> <script src="app.js" charset="utf-8"></script> </body> </head> </html>
問題是你得到了 id="u" 的 div 並為那些不起作用的 src 分配了 src。 通過為其分配一個 id 來獲取image ，並通過其 id 獲取該image標簽並分配圖像。 修改你的代碼如下
<!DOCTYPE html> <html> <head> <title> Rock Paper Scissors Game </title> <link rel="stylesheet" href="styles.css" /> <body> <header> <h1>Rock Paper Scissors</h1> </header> <div class="score-board"> <div id="user-label" class="badge">user</div> <div id="computer-label" class="badge">comp</div> <span id="user-score">0</span>:<span id="computer-score">0</span> </div> <div class="result"> <p>Make Your Move!</p> </div> <div class="choices"> <div class="choice" **onclick="changeImg()**" id="r"> <img src="images/rock.png" width="115" height="95" /> </div> <div class="choice" id="p"> <img src="images/paper.png" width="120" height="120" /> </div> <div class="choice" id="s"> <img src="images/scissors.png" width="130" height="110" /> </div> </div> <div class="fighters"> <div class="fighter" id="u"> <img id="u_image" src="images/rock.png" width="370" height="300" /> </div> <div class="fighter" id="c"> <img id="c_image" src="images/rockflipped.png" width="370" height="300" /> </div> </div> <div class="squares"> <div class="square" id="userSquare"></div> <div class="square" id="computerSquare"></div> </div> ** <script> var userImg = document.getElementById('u_image'); var compImg = document.getElementById('c_image'); function changeImg() { console.log('here'); userImg.src = 'file:///C:/...scissors.png'; } </script> ** <script src="app.js" charset="utf-8"></script> </body> </head> </html>
如何在 html 和 javascript 上使用 onclick 多次更改圖像源
[英]how to change an image source more than once using onclick on html and javascript
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.