1

選択リストのヘッダー、タイトル、テキストの色を変更しようとしました。これを行うために、関数を追加しましchangehead()た。そして、一意の ID を介して要素をバインドします。 changetitle()changebody()

しかし、次のエラーが表示されます

Uncaught TypeError: Cannot read property 'undefined' of undefined

関数内changehead()、後

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

changetitle()そして後の関数で

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

2 つの異なる機能を使用する必要があるのか​​、それとも 1 つの機能で実行できるのかわかりません。

コード：

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

質問:

  • エラーのある状況を回避する方法は?
  • ヘッドとタイトルを変更するために 2 つの異なる関数が必要ですか、それとも 1 つだけで十分ですか (はいの場合 - どのように)?
4

1 に答える 1