爲什麼第二個事件監聽器不工作？

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