blocks|key|2041784|text|只需使用非突发性JavaScript，并丢弃HTML属性：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2041785|var+img+=+document.getElementById('img');
img.onclick+=+function(){
++++img.src+=+"Login_img2.jpg";
};|code-block|syntax|javascript|2041786|entityMap|0|LINK|mutability|MUTABLE|url|http://en.wikipedia.org/wiki/Unobtrusive_JavaScript^0|4|E|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

Just use <a href="http://en.wikipedia.org/wiki/Unobtrusive_JavaScript" rel="nofollow">unobtrusive JavaScript</a>, and ditch the HTML <code>onclick</code> attribute:

<pre><code>var img = document.getElementById('img');
img.onclick = function(){
 img.src = "Login_img2.jpg";
};
</code></pre>

blocks|key|2041810|text|不要将函数命名为img()。当您使用不等同于全局对象的东西时，它可以很好地工作。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2041811|entityMap^0|8|5|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

Don't name your function <code>img()</code>. It works fine when you use something that's not equivalent to a global object.

blocks|key|58668|text|这可以使用this关键字简单地完成，删除对元素的不必要搜索。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|58669|<img+id="img"+src="Login_img1.jpg"+width="425"+height="219"+alt="Hey"+onclick="change_img(this)">|code-block|syntax|javascript|58670|​|58671|function+change_img(img){
+++img.src+=+"Login_img2.jpg";
}|58672|entityMap^0|5|4|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|T|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|U|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|V|8|@]|D|@]|E|$I|J]]|$1|O|3|-4|5|6|7|W|8|@]|D|@]|E|$]]]|P|$]]

This could simple be done using <code>this</code> keyword removing the unnecessary search for the element.

<pre><code>&lt;img id="img" src="Login_img1.jpg" width="425" height="219" alt="Hey" onclick="change_img(this)"&gt;
</code></pre>



<pre><code>function change_img(img){
 img.src = "Login_img2.jpg";
}
</code></pre>

blocks|key|2041854|text|这可能是因为您同时命名了函数img和元素img的id。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2041855|浏览器将实际使用ID作为全局变量。因此，只需创建一个具有img+id的元素，就可以从本质上创建window.img。|2041856|最好将函数重命名为swapImg，并使用this和JavaScript+onclick方法，而不是在标记中使用onclick，也不用将代码包装在IIFE中，以避免将变量泄漏到全局window对象中.|2041857|(function()+{
++++document.getElementById('img').onclick+=+swapImage;

++++function+swapImage()+{
++++++++this.src+=+'Login_img2.jpg';
++++};
})();|code-block|syntax|javascript|2041858|entityMap^0|E|3|K|3|0|S|3|1B|A|0|9|7|K|4|10|7|1J|7|2H|6|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]|$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|V|8|@$9|W|A|X|B|C]|$9|Y|A|Z|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|10|8|@$9|11|A|12|B|C]|$9|13|A|14|B|C]|$9|15|A|16|B|C]|$9|17|A|18|B|C]|$9|19|A|1A|B|C]]|D|@]|E|$]]|$1|J|3|K|5|L|7|1B|8|@]|D|@]|E|$M|N]]|$1|O|3|-4|5|6|7|1C|8|@]|D|@]|E|$]]]|P|$]]

It could be do to the fact that you named both your function <code>img</code> and the id of your element <code>img</code>.

Browsers will actually use ID's as global variables. So, simply by creating an element with an id of <code>img</code> you've essentially created <code>window.img</code>.

It'd be bettr to rename your function to something like <code>swapImg</code> and use <code>this</code> and the JavaScript <code>onclick</code> method instead of having your <code>onclick</code> in the markup as well as wrapping your code in an IIFE to avoid leaking variables into the global <code>window</code> object...

<pre><code>(function() {
 document.getElementById('img').onclick = swapImage;

 function swapImage() {
 this.src = 'Login_img2.jpg';
 };
})();
</code></pre>

blocks|key|2041872|text|你已经解决了你的问题。只想指出，您也可以使用事件侦听器来完成这个任务。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2041873|var+oImg+=+document.getElementById('myImg');
oImg.addEventListener('click',+function()+{
++++this.setAttribute('src',+'Login_img2.jpg');
},+false);|code-block|syntax|javascript|2041874|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

You have already got solution to your question. Just want to point out that you may do it using event listeners too.

<pre><code>var oImg = document.getElementById('myImg');
oImg.addEventListener('click', function() {
 this.setAttribute('src', 'Login_img2.jpg');
}, false);
</code></pre>

I have a problem with JS Events. I placed an image on my website and with the help of JS when one would click the image, the <code>src</code> attribute would be set to find another image. But nothing happens!

<h3>CODE</h3>

<pre><code>&lt;img id="img" src="Login_img1.jpg" width="425" height="219" alt="Hey" onclick="img()"&gt;
</code></pre>

Now the JS:

<pre><code>function img(){document.getElementById("img").src = "Login_img2.jpg"}
</code></pre>

JavaScript Event is not working with getElementById

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我对JS事件有意见。我在我的网站上放置了一个图像，在JS的帮助下，当一个人单击该图像时，src属性将被设置为查找另一个图像。但什么都没发生！代码<img id="img" src="Login_img1.jpg" width="425" height="219" alt="Hey" onclick="img()">现在...

问JavaScript事件不适用于getElementById
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问JavaScript事件不适用于getElementByIdEN