blocks|key|294321|text|现在没问题了|type|unstyled|depth|inlineStyleRanges|entityRanges|data|294322|function+edit()
{+++
++++var+inputs+=+document.myform;
++++for(var+i+=+0;+i+<+inputs.length;+i%2B%2B)+{
++++++++inputs[i].disabled+=+false;
++++}

++++var+edit_save+=+document.getElementById("edit-save");

+++++++edit_save.src+=+"../template/save.png";++++++++++++++++++++++++++++++
}|code-block|syntax|javascript|294323|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|$]]

its ok now

<pre><code>function edit()
{ 
 var inputs = document.myform;
 for(var i = 0; i &lt; inputs.length; i++) {
 inputs[i].disabled = false;
 }

 var edit_save = document.getElementById("edit-save");

 edit_save.src = "../template/save.png"; 
}
</code></pre>

blocks|key|294236|text|给你的img标签一个id，然后你就可以|type|unstyled|depth|inlineStyleRanges|entityRanges|data|294237|document.getElementById("imageid").src="../template/save.png";|code-block|syntax|javascript|294238|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|$]]

Give your img tag an id, then you can

<pre><code>document.getElementById("imageid").src="../template/save.png";
</code></pre>

blocks|key|510978|text|您可以同时使用jquery和javascript方法:如果您有两个图像，例如：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|510979|<img+class="image1"+src="image1.jpg"+alt="image">
<img+class="image2"+src="image2.jpg"+alt="image">|code-block|syntax|javascript|510980|1)Jquery方法->|510981|$(".image2").attr("src","image1.jpg");|510982|2)Javascript方法->|510983|var+image+=+document.getElementsByClassName("image2");
image.src+=+"image1.jpg"|510984|对于这种类型的问题，jquery是最容易使用的。|510985|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|W|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|6|7|Y|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

You can use both jquery and javascript method:
if you have two images for example:

<pre><code>&lt;img class="image1" src="image1.jpg" alt="image"&gt;
&lt;img class="image2" src="image2.jpg" alt="image"&gt;
</code></pre>

1)Jquery Method->

<pre><code>$(".image2").attr("src","image1.jpg");
</code></pre>

2)Javascript Method->

<pre><code>var image = document.getElementsByClassName("image2");
image.src = "image1.jpg"
</code></pre>

For this type of issue jquery is the simple one to use.

blocks|key|510868|text|如果您使用JQuery库，请使用以下指令：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|510869|$("#imageID").attr('src',+'srcImage.jpg');|code-block|syntax|javascript|510870|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|$]]

if you use the JQuery library use this instruction:

<pre><code>$("#imageID").attr('src', 'srcImage.jpg');
</code></pre>

blocks|key|294374|text|给你的图像一个id。然后你可以在你的javascript中做到这一点。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|294375|document.getElementById("blaah").src="blaah";|code-block|syntax|javascript|294376|您可以使用此语法更改任何元素的任何属性的值。|294377|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Give your image an id. Then you can do this in your javascript.
<pre><code>document.getElementById(&quot;blaah&quot;).src=&quot;blaah&quot;;
</code></pre>
You can use this syntax to change the value of any attribute of any element.

blocks|key|510773|text|<img+src="../template/edit.png"+name="edit-save"+onclick="this.src+=+'../template/save.png'"+/>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|510774|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>&lt;img src="../template/edit.png" name="edit-save" onclick="this.src = '../template/save.png'" /&gt;
</code></pre>

blocks|key|294304|text|使用您提供的代码片段(不需要对元素的父级进行假设)，您可以使用|type|unstyled|depth|inlineStyleRanges|entityRanges|data|294305|document.querySelector('img[name="edit-save"]');|code-block|syntax|javascript|294306|并使用以下命令更改src|294307|document.querySelector('img[name="edit-save"]').src+=+"..."|294308|因此，您可以使用|294309|var+img+=+document.querySelector('img[name="edit-save"]');
img.onclick+=+function()+{
++++this.src+=+"..."+//+this+is+the+reference+to+the+image+itself
};|294310|否则，就像其他人建议的那样，如果你控制了代码，最好用getElementById给图像分配一个id并获得一个引用(因为这是检索元素的最快方法)。|offset|length|style|CODE|294311|entityMap^0|0|0|0|0|0|0|Q|E|1B|2|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Y|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|10|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|11|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|6|7|12|8|@$Q|13|R|14|S|T]|$Q|15|R|16|S|T]]|9|@]|A|$]]|$1|U|3|-4|5|6|7|17|8|@]|9|@]|A|$]]]|V|$]]

With the snippet you provided (and without making assumptions about the parents of the element) you could get a reference to the image with

<pre><code>document.querySelector('img[name="edit-save"]');
</code></pre>

and change the src with 

<pre><code>document.querySelector('img[name="edit-save"]').src = "..."
</code></pre>

so you could achieve the desired effect with 

<pre><code>var img = document.querySelector('img[name="edit-save"]');
img.onclick = function() {
 this.src = "..." // this is the reference to the image itself
};
</code></pre>

otherwise, as other suggested, if you're in control of the code, it's better to assign an <code>id</code> to the image a get a reference with <code>getElementById</code> (since it's the fastest method to retrieve an element)

blocks|key|510922|text|在这种情况下，因为您想要更改元素第一个值的src，所以不需要构建函数。您可以在元素中对其进行更改：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|510923|<a+href='#'+onclick='this.firstChild.src="../template/save.png"')'>
++<img+src="../template/edit.png"+id="edit-save"/>
</a>|code-block|syntax|javascript|510924|有几种方法可以做到这一点。您还可以创建一个函数来自动执行该过程：|510925|function+changeSrc(p,+t)+{+/*+where+p:+Parent,+t:+ToSource+*/
++p.firstChild.src+=+t
}|510926|然后，您可以：|510927|<a+href='#'+onclick='changeSrc(this,+"../template/save.png");'>
++<img+src="../template/edit.png"+id="edit-save"/>
</a>|510928|entityMap^0|L|3|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|Y|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|Z|8|@]|D|@]|E|$I|J]]|$1|O|3|P|5|6|7|10|8|@]|D|@]|E|$]]|$1|Q|3|R|5|H|7|11|8|@]|D|@]|E|$I|J]]|$1|S|3|-4|5|6|7|12|8|@]|D|@]|E|$]]]|T|$]]

In this case, as you want to change the <code>src</code> of the first value of your element, you have no need to build up a function. You can change this right in the element:

<pre><code>&lt;a href='#' onclick='this.firstChild.src="../template/save.png"')'&gt;
 &lt;img src="../template/edit.png" id="edit-save"/&gt;
&lt;/a&gt;
</code></pre>

You have several ways to do this. You can also create a function to automatize the process:

<pre><code>function changeSrc(p, t) { /* where p: Parent, t: ToSource */
 p.firstChild.src = t
}
</code></pre>

Then you can:

<pre><code>&lt;a href='#' onclick='changeSrc(this, "../template/save.png");'&gt;
 &lt;img src="../template/edit.png" id="edit-save"/&gt;
&lt;/a&gt;
</code></pre>

blocks|key|294459|text|也许是因为你有一个标签，就像标签的父标签一样。这就是为什么你必须点击两次图像。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|294460|对我来说，解决方案是：http://www.w3schools.com/js/tryit.asp?filename=tryjs_intro_lightbulb|offset|length|294461|entityMap|0|LINK|mutability|MUTABLE|url|http://www.w3schools.com/js/tryit.asp?filename=tryjs_intro_lightbulb^0|0|B|1W|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@$D|P|E|Q|1|R]]|A|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|G|$H|$5|I|J|K|A|$L|M]]]]

Maybe because you have a tag like a parent of the tag.
That why you have to click two time the images. 

For me the solution is this:
<a href="http://www.w3schools.com/js/tryit.asp?filename=tryjs_intro_lightbulb" rel="noreferrer">http://www.w3schools.com/js/tryit.asp?filename=tryjs_intro_lightbulb</a>

How can I change the <code>src</code> attribute of an <code>img</code> tag using javascript?

<pre><code>&lt;img src="../template/edit.png" name=edit-save/&gt;
</code></pre>

at first I have a default src which is "../template/edit.png" and I wanted to change it with "../template/save.png" onclick.

UPDATED:
here's my html onclick:

<pre><code>&lt;a href='#' onclick='edit()'&gt;&lt;img src="../template/edit.png" id="edit-save"/&gt;&lt;/a&gt;
</code></pre>

and my JS

<pre><code>function edit()
{ 
 var inputs = document.myform;
 for(var i = 0; i &lt; inputs.length; i++) {
 inputs[i].disabled = false;
 }
}
</code></pre>

I've tried inserting this inside the edit(), it works but need to click the image twice

<pre><code>var edit_save = document.getElementById("edit-save");
 edit_save.onclick = function(){
 this.src = "../template/save.png";
 }
</code></pre>

Programmatically change the src of an img tag

如何使用javascript更改img标记的src属性？<img src="../template/edit.png" name=edit-save/>首先，我有一个默认的src，它是"../template/edit.png“，我想用"../template/save.png”onclick来更改它。更新:这是我的html onclick：<a href='#' onclick='edit()'

问通过编程更改img标记的src
EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问通过编程更改img标记的srcEN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问通过编程更改img标记的src
EN