Question

我想点击一张图片并将图片更改为我文件夹中的另一张图片，但这不起作用，所以我选择了一个按钮，但这并不是我想要的。当我使用onclick时，图像不会改变。这是一个项目，嵌入式JS代码将不被接受，因此我们必须将其放入一个单独的文件中。

HTML：

    <!DOCTYPE>
<html>
    <head>
        <meta charset="utf-8">
        <br>
        <div class="logo">
        <img src="logo.png" width="270" height="240">
        </div>
        <script src="functions.js"></script>
        <link rel="stylesheet" type="text/css" href="shirt.css">

    </head>
    <body>
    <br>
    <div class="scrollmenu">
    <nav class="navbar">
          <a href="shirt.html">Home</a>
          <a href="Shop.html">Shop</a>
          <a href="discounts.html">Discounts</a>
          <a href="feedback.html">Feedback</a>
    </div>
    </nav>
    </header>

    <br>
    <div class="t1">
    <h2 class="heading">CUSTOMISE YOUR SHIRT..</h2>
    <div class="customT1">
    <img id="IMAGE" src="t1.png" width="540" height="540"/><p>&euro;10.00</p>
    <p>Select one of the designs from below..</p>
    <img src="drift.png" width="140" height="140" border="2";/>
    <img src="clutch.png" width="140" height="140" border="2"/>
    <img src="jdm.png" width="130" height="140" border="2"/>
    <img src="twosik.png" width="140" height="140" border="2"/>
    </br>
    <button class="button" type="button" onclick= "alert();">USE</button>
</div>



</div>

    <br>
    <footer>
    <p>@Liam Chambers 2016</p>
    </footer>
</body> 

    enter code here

</html>

JS：

<script type ="text/javascript">

    function alert(){
    alert("hi");
    document.getElementById("IMAGE").src = "t1drift.png";
    }

</script>

Answer 1

试试这个

<button onclick="document.getElementById('IMAGE').src='t1drift.png'">USE</button>

Answer 2

我建议你使用jquery，这将是一个简单的解决方案

<script>
$(function(){
   function alert(){
      $("#IMAGE").attr('src','t1drift.png');
   }
});
</script>

Answer 3

问题已在那里得到解答Change image when clicking button

点击此链接获取主意。您不能使用内置的JS函数作为您的函数名。您应该使用唯一的函数名称。

Answer 4

试一试： -

document["imgName"].src="../newImgSrc.jpg";

或

document.getElementById("imgName").src="../newImgSrc.jpg";

Onclick图像没有变化

4 个答案: