未捕获的TypeError无法读取未定义的属性“样式”

编程问答 2022-08-11

问题描述

我正在尝试通过单击按钮来修改图像。 该js应该在单击按钮时更新图像样式，但是会产生错误。 但是，当我在控制台上尝试相同的方法时，它会起作用。

这是我的HTML代码

<!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>

它给了我下面的错误

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)

解决方法

问题是您要向每个函数传递一个image变量，该变量不存在，因此返回undefined 

var image = document.getElementById('pic')

function cont() {
  image.style.filter = "contrast(180%)";
}

function gray() {
  image.style.filter = "grayscale(100%)";
}

function inv() {
  image.style.filter = "invert(100%)";
}
body {
  display: flex;
  justify-content: center;
  align-items: center;
}

img {
  width: 50%;
  filter: initial;
}
<img id="pic" src="https://static.passeportsante.net/680x357/i93408-.jpeg">
<button id="contrast" onclick="cont()">Contrast</button>
<button id="grayscale" onclick="gray()">Grayscale</button>
<button id="invert" onclick="inv()">Invert</button>

,

尝试使用const而不是var

const image = document.getElementById（'pic'）

或在每个函数中使用“ let”定义变量

function cont(image) {
  let image = document.getElementById('pic')
  image.style.filter = "contrast(180%)";
}

function gray(image) {
  let image = document.getElementById('pic')
  image.style.filter = "grayscale(100%)";
}

function inv(image) {
  let image = document.getElementById('pic')
  image.style.filter = "invert(100%)";
}
htmljavascriptstylestypeerrortypeerrortypeerror