JavaScript Set Img Src

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";                              
}

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="Sample Image" width="1000" height="333" />

Setting img src on dynamically created img element

The issue is that $(t.id) evaluates to $('tn') where as what you want is $('#tn') or $(obj). Modify your code to either of the variations below:

// replace with alt image
function replace_image(t){
    $(t).attr("src", "https://i.stack.imgur.com/ffjPe.png");
    // $('#' + t.id) will also work
};

// dynamically insert image
$('div').html('<img id="tn" src="test.jpg" onerror="replace_image(this)" />');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div></div>

Change img src depending on class

Yes you can do this using HTML and some JavaScript (I'll use jQuery here since you tagged jQuery).

First you should add the class you want to target with JavaScript to the img elements that you want to change.

And then target them using jQuery and change their src attribute to whatever you want to change it to.

HTML

<img class="png" src="test.png">

JavaScript

// use jQuery to select all elements with the png class - and set the src attribute to...
jQuery('.png').attr('src', 'test2.png');

Is it possible to change the image src of an image input by clicking on said image?

Your code works perfectly fine.

Check your image location maybe there is a problem.

And try adding a ./ before the address of the image ./ means the current directory

Check this here Html File Paths

like this :

function imgChange(){
    var img = document.getElementById("img");
    img.src = "./Images/img2.png";
}

And a better way to do this passing this in the function. Here this is the image whick will be clicked.

<input type="image" src="Images/img.png" onclick="imgChange(this)">

function imgChange(img){
   img.src = "./Images/img2.png";
}

Set HTML image src to form input

The problem is here document.getElementById("figure_image").img.src, there is no img property.

So change it to document.getElementById("figure_image").src

function set_image_path() {
  const figure_id = document.getElementById("figure_id");
  const figure_image = document.getElementById("figure_image");
  const image_path = `main/Bricklink/images/${figure_id.value}.png`;
  figure_image.src = image_path;
  console.log(figure_image.src);
}

//call function in submit listener
const form_figure = document.getElementById("figure_choice_form");
form_figure.addEventListener('submit', e => {
  e.preventDefault();
  set_image_path();
})

//call function in load page - if input has value
set_image_path();

<form method="GET" id="figure_choice_form">
  <label for="figure_id">Enter ID</label>
  <input type="text" id="figure_id" name="figure_id" value="image123">
  <button> Submit </button>
</form>

<img id="figure_image" src="RESULT_FROM_THE_FUNCTION" alt="img">

---

Related Topics