个人中心
gpt4 book ai didi

javascript - CSS 与 JavaScript - 无法读取属性 'undefined' 错误

转载 作者：行者123 更新时间：2023-11-28 02:19:26 25 4
gpt4 key购买 nike

我尝试更改选择列表标题、标题和文本的颜色。我添加了函数 changehead()、changetitle() 和 changebody() 来执行此操作。并通过唯一id绑定(bind)元素。

但我收到以下错误

Uncaught TypeError: Cannot read property 'undefined' of undefined

在函数 changehead() 中，之后

header = document.form1.heading.options[i].value;

并在函数changetitle()之后

header = document.form1.heading.options[i].value;

我不确定是否应该使用两个不同的函数，或者是否可以使用一个函数来完成。

代码:

<script>
    function changehead() {
        i = document.form1.heading.selectedIndex;
        header = document.form1.heading.options[i].value;
        document.getElementById("head1").style.color = header;
    }

    function changetitle() {
        i = document.form1.heading.selectedIndex;
        header = document.form1.heading.options[i].value;
        document.getElementById("head2").style.color = header;
    }

    function changebody() {
        i = document.form1.body.selectedIndex;
        doccolor = document.form1.body.options[i].value;
        document.getElementById("p1").style.color = doccolor;
    }
</script>
</head>
<body>
    <h1 id="head1">Controlling Styles with JavaScript</h1>
    <hr>
    <h2 id="head2">Subtitles at this screen. And cery important subtitles!</h2>

    <hr>
    <p id="p1">Select the color for paragraphs and headings using the form below. The colors you specified will be dynamically changed in this document. The change occurs as soon as you change the value of either of the drop-down lists in the form.</p>

    <form name="form1"> <b>Heading color:</b>

        <select name="heading" onChange="changehead();">
            <option value="black">Black</option>
            <option value="red">Red</option>
            <option value="blue">Blue</option>
            <option value="green">Green</option>
            <option value="yellow">Yellow</option>
        </select>
        <br>
            <B>Body text color:</B>

        <select name="body" onChange="changebody();">
            <option value="black">Black</option>
            <option value="red">Red</option>
            <option value="blue">Blue</option>
            <option value="green">Green</option>
            <option value="yellow">Yellow</option>
        </select>
        <br>    <b>Heading second color:</b>

        <select name="heading" onChange="changetitle();">
            <option value="black">Black</option>
            <option value="red">Red</option>
            <option value="blue">Blue</option>
            <option value="green">Green</option>
            <option value="yellow">Yellow</option>
        </select>
    </form>
</body>

问题:

  • 如何避免出现错误的情况？
  • 是否需要两个不同的函数来更改标题和标题，或者一个就足够了(如果是 - 如何)？

最佳答案

您有两个名为“标题”的选择。给它们不同的名称，你的 JavaScript 将停止抛出错误。

这是一个工作示例:http://jsbin.com/uritid/1/edit

关于javascript - CSS 与 JavaScript - 无法读取属性 'undefined' 错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15890048/

25 4 0
文章推荐： javascript - JSON 字段未定义 (Javascript)
文章推荐： jquery - 遍历一个数组，找到包含在这个数组中的每个 div 的选定选项值并分配背景颜色
文章推荐： HTML 和 CSS，水平对齐 2 个按钮而不丢失表单操作
文章推荐： javascript - extjs 4 动态存储
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com