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";
})
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.