為什么第二個事件監聽器不起作用？

Question

因此，代碼的第一部分創建了一個按鈕，單擊該按鈕可顯示圖像。 但是，代碼的第二部分應該在懸停時使圖像變大，但它似乎不起作用。 我通過控制台運行這個鱈魚，它什么也沒給我。 有任何想法嗎？

  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

這個想法是正確的，但也可以使用setAttribute作為圖像大小：

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

你可以在這個plunker自己嘗試一下