Onclick图像没有改变答案

【问题标题】：Onclick image not changingOnclick图像没有改变
【发布时间】：2016-11-19 22:15:26
【问题描述】：

我想单击一个图像并将 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>

【问题讨论】：

你检查过控制台吗？你得到什么错误信息？我是否也建议用 jQuery 而不是原生 JavaScript 编写它。
问题是你选择的函数名。 alert() 已被使用。尝试考虑不同的函数名称。我还建议在 StackOverFlow 上寻求帮助时只显示相关的源代码。
@MCMXCII 为什么在地球上添加一个巨大的依赖项比如 jQuery 会为这样一个简单的操作带来好处？！
通过使用 alert() 作为函数名，您将覆盖默认浏览器 alert() 函数。您对警报的调用最终出错（超过最大调用堆栈大小，因为alert() 一直在调用自己）
链接：-stackoverflow.com/questions/6764961/…

标签： javascript html css

【解决方案1】：

试试这个

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

【讨论】：

引入内联 js 代码是不好的做法。见：stackoverflow.com/questions/6941483/onclick-vs-event-handler

【解决方案2】：

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

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

【讨论】：

为这样一个简单的操作添加一个像jQuery这样的大库是完全没有必要的。
我同意这一点。但将来如果他想做任何其他更高级别的操作，那意味着它会在那个时候有用

【解决方案3】：

那里已经回答了一个问题Change image when clicking button

点击此链接以获得想法。您不能使用内置的 JS 函数作为您的函数名称。您应该使用唯一的函数名称。

【讨论】：

请不要发布包含链接的答案。如果将来链接断开，答案就会过时。

【解决方案4】：

试试看：-

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

或

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

【讨论】：