未捕获的类型错误无法读取未定义的属性“样式”答案

【问题标题】：Uncaught TypeError Cannot read property 'style' of undefined未捕获的类型错误无法读取未定义的属性“样式”
【发布时间】：2020-12-25 17:50:52
【问题描述】：

我正在尝试使用按钮单击来修改图像。 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 添加为参数。它影响了您在上面声明的var image。

标签： javascript html css styles typeerror

【解决方案1】：

问题是您将image 变量传递给每个函数，该变量不存在，因此返回未定义

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>

【讨论】：

但我声明的 var image 具有全局范围，所以我不应该将它作为参数传递。
你没有在你的代码中将它作为参数传递，onclick="cont()"，你在哪里传递它？反正不在这里。所以function cont(image) 将image 定义为未定义，因为它正在等待一个不存在的参数，同时它与全局变量具有相同的名称，它在函数内重新初始化它。你需要去了解函数是如何工作的，这是基本语法。

【解决方案2】：

尝试使用 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%)";
}

【讨论】：

"尝试使用 const 而不是 var" 会有什么不同？