Javascript click button to replace displayed image not working-CodePudding

I am new to Javascript and I am trying to create a simple button in html that replaces the originally displayed image upon clicking but so far it's not working. Can anyone help me figure out what stupid error I made? Thanks in advance!

//display original image
var img = document.createElement("img");
img.src = "p1.jpg";
img.width = 270;
img.height = 300;
document.body.appendChild(img);
//add a button to change the displayed image
    var btn = document.createElement('button')
    btn.innerText = "change displayed image"
    btn.addEventListener("click", imageChange("p2.jpg")
    document.body.appendChild(btn)


//define functions
    function imageChange(src){
        document.getElementById("img").src=src;
    }

CodePudding user response：

The code you provided has error as follows:

getElementById("img") wont return anything as "img" is really not an ID and you did not provide any id to the img element you created earlier. So add an ID to the image element before appending it. and then try to look up by that id.

img.id = "myImageElement"
document.body.appendChild(img);

// ...

document.getElementById("myImageElement").src = src;

line btn.addEventListener("click", imageChange("p2.jpg") needs its closing bracket )
the addEventListener for "click" takes a callback as 2nd argument. in your case its actually a function call which gets executed right at the start, and returns nothing. instead it should become something like this

btn.addEventListener("click", () => imageChange("p2.jpg"))

now its a call back (in arrow syntax)

There are many other ways to achieve this. But pay attention to callbacks and when they are getting executed. You can read more on Arrow functions, JS Callbacks, Passing JS Value or Ref

I have attached a working example:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    //display original image
    const img = document.createElement("img");
    img.src = "https://loremflickr.com/cache/resized/65535_52310646271_4c5b16c634_c_640_480_nofilter.jpg";
    img.width = 270;
    img.height = 300;
    img.id = "myImageElement"
    document.body.appendChild(img);

    //add a button to change the displayed image
    const btn = document.createElement('button')
    btn.innerText = "change displayed image"
    btn.addEventListener("click", () => imageChange("https://loremflickr.com/cache/resized/65535_52437354187_fa35ed98bf_z_640_480_nofilter.jpg"))
    document.body.appendChild(btn)

    //define functions
    function imageChange(src) {
      console.log("Changing Image")
      document.getElementById("myImageElement").src = src;
    }
  </script>
</body>

</html>

CodePudding user response：

I ran your script and modified it by changing the content of the function with img.src instead of what you had previously. I also fixed a missing parentheses you forgot. This should work now.

//display original image
var img = document.createElement("img");
img.src = "p1.jpg";
img.width = 270;
img.height = 300;
document.body.appendChild(img);

//add a button to change the displayed image
var btn = document.createElement('button')
btn.innerText = "change displayed image"
btn.setAttribute('onclick', 'imageChange("p2.jpg")');
document.body.appendChild(btn);

function imageChange(src) {
    img.src = src;
}