如何使用javascript更改html元素的图像源_Javascript_Html

如何使用javascript更改html元素的图像源

javascript html

如何使用javascript更改html元素的图像源,javascript,html,Javascript,Html,我一直在互联网上寻找有同样问题的人，但我找不到解决办法。我就是不知道如何使用javascript更改图像的源代码。我最初认为这可能是因为我在另一个文件中编写javascript，而不是在实际的html文件中，但我尝试将脚本放在html文件中，这也不起作用。如果有人能告诉我我做错了什么，那就太好了 <!DOCTYPE html> <html> <head> <title> Rock Paper Scissors Game

我一直在互联网上寻找有同样问题的人，但我找不到解决办法。我就是不知道如何使用javascript更改图像的源代码。我最初认为这可能是因为我在另一个文件中编写javascript，而不是在实际的html文件中，但我尝试将脚本放在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>


石头剪刀布游戏
石头剪子布
用户
公司
0:0
行动起来
**
var userImg=document.getElementById（'u'）；
var compImg=document.getElementById（'c'）；
函数更改img（）{
console.log（'here'）；
userImg.src=‪file:///C:/...scissors.png';
}
**

简单描述您需要将

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：

全源


石头剪刀布游戏
石头剪子布
用户
公司
0:0
行动起来
var userImg=document.getElementById（'userImg_100'）；
var compImg=document.getElementById（'c'）；
函数更改img（）{
console.log（'here'）；
userImg.src=‪https://i.chzbgr.com/full/8759954176/hFD7BD608/can-has-code-review.jpg';
}

问题是您正在获取id为=“u”的div，并为不起作用的部分分配src。通过为图像分配一个id来获取

图像

，并通过其id将该图像标记ge并分配图像。对代码进行了如下修改


石头剪刀布游戏
石头剪子布
用户
公司
0:0
行动起来
**
var userImg=document.getElementById（'u_image'）；
var compImg=document.getElementById（'c_image'）；
函数更改img（）{
console.log（'here'）；
userImg.src=‪file:///C:/...scissors.png';
}
**

userImg.attr（'src'，'‪file:///C:/...scissors.png’）非常感谢，对不起，我对网页设计真的很陌生。