JavaScript：if-else用法；“Uncaught TypeError: Cannot set property ‘className‘ of undefined”记录

最新推荐文章于 2023-12-06 14:01:01 发布

Lucifer_QMY

最新推荐文章于 2023-12-06 14:01:01 发布

阅读量334

点赞数

分类专栏：前端文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/Lucifer_QMY/article/details/126750380

版权

前端专栏收录该内容

2 篇文章 1 订阅

订阅专栏

效果实现：

1、点击按钮文字变成红色

2、点击图片，图片1换成图片2

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS Demo</title>
</head>
<body>

    <!-- if-else语法、改变元素样式 -->
    <h1 id="xx">这是一张帅气的图片</h1>
    <script>
        function changeImage(params) {
            element=document.getElementById('myimage')
            if (element.src.match("u=4137868653"))
            {
                element.src="https://img0.baidu.com/it/u=1797949545,3758514959&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1662656400&t=847cba486feaf79949c6009fc212860f"
            }
            else
            {
                element.src="https://img2.baidu.com/it/u=4137868653,210701858&fm=253&app=138&size=w931&n=0&f=JPG&fmt=auto?sec=1662656400&t=134f700c21ddf624ee6551bd723f7a27"
            }
        }
        
        function modify_color(params) {
            x=document.getElementsByTagName('h1');
            x.style.color='#ff0000';
            // x=document.getElementById("xx") // 找到元素
	        // x.style.color="#ff0000";          // 改变样式
        }
    </script>
    <img id="myimage" onclick="changeImage()" src="https://img2.baidu.com/it/u=4137868653,210701858&fm=253&app=138&size=w931&n=0&f=JPG&fmt=auto?sec=1662656400&t=134f700c21ddf624ee6551bd723f7a27" width="180" height="200">
    <button type="button" onclick="modify_color()">点击有惊喜</button> 

</body>
</html>

图片可以正常切换，但是文字颜色切换的时候遇到了如下报错 “Uncaught TypeError: Cannot set property 'className' of undefined”。

翻译：未捕获类型错误：无法设置未定义的属性“className”

原因是下面这行代码，当getElementByTagName获取元素时，获取的是一个数组，当我们没有注明下标，去获取时就会出现元素未定义的报错。

我们加上下标 [i] 即可，在本demo中应该如下修改：

x=document.getElementsByTagName('h1')[0];

Lucifer_QMY

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript：if-else用法；“Uncaught TypeError: Cannot set property ‘className‘ of undefined”记录

JavaScript：if-else用法；“Uncaught TypeError: Cannot set property 'className' of undefined”记录
复制链接

扫一扫

专栏目录