My goal is to adjust images by clicking buttons. The JavaScript code should update the image style upon button click, but I encounter an error. Surprisingly, when I try the same operation in my console, it works perfectly.
Below is the HTML code snippet:
<!DOCTYPE html>
<html>
<head>
<title>Image Modifier</title>
<style>
body{
display: flex;
justify-content: center;
align-items: center;
}
img{
width: 50%;
filter: initial;
}
</style>
</head>
<body>
<img id="pic" src="nature.jpg">
<button id="contrast" onclick="cont()">Contrast</button>
<button id="grayscale" onclick="gray()">Grayscale</button>
<button id="invert" onclick="inv()">Invert</button>
<script type="text/javascript">
var image = document.getElementById('pic')
function cont(image) {
image.style.filter="contrast(180%)";
}
function gray(image) {
image.style.filter="grayscale(100%)";
}
function inv(image) {
image.style.filter="invert(100%)";
}
</script>
</body>
</html>The following error messages are presented:
Uncaught TypeError: Cannot read property 'style' of undefined
at cont (first.html:26)
at HTMLButtonElement.onclick (first.html:19)
cont @ first.html:26
onclick @ first.html:19
Uncaught TypeError: Cannot read property 'style' of undefined
at gray (first.html:29)
at HTMLButtonElement.onclick (first.html:20)
gray @ first.html:29
onclick @ first.html:20
Uncaught TypeError: Cannot read property 'style' of undefined
at inv (first.html:32)
at HTMLButtonElement.onclick (first.html:21)