为什么第二个事件监听器不起作用？

Question

So the first part of the code creates a button that when clicked, displays an image. However, the second part of the code is supposed to make the image larger upon hovering but it doesnt seem to work. I ran this cod through the console and it gave me nothing. Any ideas?

  var button = document.getElementById("image");
var image = document.createElement("img");

button.addEventListener("click", function() {

    image.setAttribute("src", "https://www.w3schools.com/css/trolltunga.jpg");
    image.setAttribute("height", "400");
    image.setAttribute("width", "500");
    document.body.appendChild(image);
});

image.addEventListener("mouseover", function(){
    image.style.width = "700";
    image.style.height = "700";
})

Answer 1

The idea is correct, but use setAttribute for your image size as well:

// Code goes here
window.onload = function() {
var button = document.getElementById("image");
var image = document.createElement("img");

  button.addEventListener("click", function() {
      image.setAttribute("src", "https://www.w3schools.com/css/trolltunga.jpg");
      image.setAttribute("height", "400");
      image.setAttribute("width", "500");
      document.body.appendChild(image);
  });

  image.addEventListener("mouseover", function(){
      image.setAttribute("width", "700");
      image.setAttribute("height", "700");
  });
};

You can try it out yourself in this plunker