javascript - Onclick 图像没有改变

标签 javascript html css

我想单击一个图像并将 IMAGE 更改为我文件夹中的另一个图像,但这不起作用,所以我选择了一个按钮,但这也没有达到我想要的效果。当我使用 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>

最佳答案

试试这个

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

关于javascript - Onclick 图像没有改变,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40692685/

相关文章:

html - SCSS 动态选择器

javascript - jQuery 在鼠标悬停时(完全)展开和(部分)折叠 div

php - 我的表单如何使用 <select> 提交文本值?

css - 使用 Play Framework org.webjars 时如何在 Foundation 中定义自定义主题

css - 幻灯片在 IE 和 FF 中的位置太低

html - 如何自动设置宽度?

Javascript 使用字符串和数字对设备名称进行排序

javascript - 在 php 代码中添加 php

javascript - React.js 服务器端渲染和事件处理程序

javascript - 如何检查IE 5.5是否在线