Programmatically Change the Src of an Img Tag

Programmatically change the src of an img tag

its ok now

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

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

       edit_save.src = "../template/save.png";                              
}

Programmatically change the src of an img and adding li item in list using javascript

the `document.getElementsByClassName('home')` is not a list because you have just a single element with that class name

to make it work you have to select the correct elements:

document.querySelector('.home img').src = 'imagelink.png';
document.querySelector('.home a').href = 'http://www.cnn.com/';
document.querySelector('.home a').innerHTML = 'Main';

To add an item to the list :

const node = document.createElement('li');
node.appendChild(document.createTextNode('core vocabulary'));
 
document.querySelector('.m_menu_ul').appendChild(node);

How to change an img src with javascript?

The EventTarget.addEventListener() method registers the specified listener on the EventTarget it's called on.

Use addEventListener over button elements to attach click events and bind your handler functions to those events.

var pic = document.getElementById('pic');
function rouge() {  pic.src = "http://www.projectvictorycosplay.com/images/zelda/Links/3198_render_link.png";}
function blue() {  pic.src = "http://bin.smwcentral.net/u/1944/Link%2BBlue%2BTP%2Bshrunk.png";}document.getElementById('btn1').addEventListener('click', rouge);document.getElementById('btn2').addEventListener('click', blue);

img {  width: 200px;}

<button id='btn1'>rouge</button><button id='btn2'>blue</button><br/><img class="trans" id="pic" src="http://www.projectvictorycosplay.com/images/zelda/Links/3198_render_link.png" alt="" width="1000" height="333" />

Impossible to change the src attribute using img.src

UPDATED

You also need to add those image elements to your HTML body if they are not in your HTML

for (let i = 0; i < number_of_images; i++){
        console.log(images_for_you[randArr[i]])
        console.log(randArr[i])
        console.log(i)
        var img_index = document.getElementById(index_for_you[i])
        //if cannot find that image element, we need to add it
        if(!img_index) {
          imageElement = document.createElement('img');
          imageElement.setAttribute("id", index_for_you[i]);
          //add the image element to the body
          document.body.appendChild(imageElement);
        }
        img_index = document.getElementById(index_for_you[i])
        img_index.src = images_for_you[randArr[i]]
    }

OLD ANSWER

You have syntax error here

var img_index = document.getElementsById(index_for_you[i])

It should be getElementById, not getElementsById (Elements should not have s)

The change should be

var img_index = document.getElementById(index_for_you[i])

how can I change path to img src from java script?

$("img.phone").attr("src", "../img/template/iphone4.png");

Note that this will replace the source of all images with class phone!

If that is an issue, you should consider to give your image a unique id and change the jquery selector accordingly.

how to change the src of an image when clicking and it return to the original after some time?

You could just use a simple data attribute to store some state and swap in and out image source tags.

Here is an example of how this would work using JavaScript:

function clicked() {  replace();  setTimeout(replace, 1000);}
function replace() {  var next = document.getElementById("next").getAttribute("data-img-src");  var current = document.getElementById("next").src;
  document.getElementById("next").setAttribute("data-img-src", current);  document.getElementById("next").src = next;}

<div id="div1">  <img id="next" src="http://via.placeholder.com/100?text=first" data-img-src="http://via.placeholder.com/100?text=second" onclick="clicked();"></div>

Programmatically Change the Src of an Img Tag