Question

该程序用于更改标题的背景颜色（h1，h2）。用户将通过选择“颜色”按钮从所选选项列表中选择他希望为哪个标题级别着色。用户还可以通过按“取消颜色”按钮为所选标题取消颜色。

我几乎尝试了所有东西。调试器也可以正常工作。语法着色等。

<head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <title>Color headers</title>

    <script type="text/javascript">
        function colorMe(){

            var button = document.getElementById("Button1");
            var head1 = document.getElementsByTagName("h1");
            var head2 = document.getElementsByTagName("h2");
            var selection = document.getElementById("list").selectedIndex;

            if(button.value == "Color"){
                button.value = "Uncolor";


                if(selection == "0"){
                    for(var i = 0 ; i<head1.length; i++){
                        head1[i].style.backroundColor = "yellow";   
                    }   
                }

                else{
                    for(var i = 0 ; i<head2.length; i++){
                        head2[i].style.backroundColor = "yellow";   
                    }   
                }
            }
            else {
                button.value = "Color";

                if(selection == "0"){
                    for(var i = 0 ; i<head1.length; i++){
                        head1[i].style.backroundColor = "white";    
                    }   
                }

                else{
                    for(var i = 0 ; i<head2.length; i++){
                        head2[i].style.backroundColor = "white";    
                    }   
                }
            }   
        }   

    </script>

</head> 
    <body>
        <select id="list">
            <option>1st level</option>
            <option>2nd level</option>
        </select>

        <h1>header 1</h1>
        <h2>header 2</h2>
        <h1>header 3</h1>
        <h2>header 4</h2>
        <h1>header 5</h1>
        <h2>header 6</h2>

        <input id="Button1" type="button" value="Color" onclick="colorMe()"/>   
    </body>
</html>

我希望更改这些标题所选级别的背景颜色。

Answer 1

您错过了背景色中的g。不是（背景色）

function colorMe(){

        var button = document.getElementById("Button1");
        var head1 = document.getElementsByTagName("h1");
        var head2 = document.getElementsByTagName("h2");
        var selection = document.getElementById("list").selectedIndex;

        if(button.value == "Color"){
            button.value = "Uncolor";


            if(selection == "0"){
                for(var i = 0 ; i<head1.length; i++){
                    head1[i].style.backgroundColor = "yellow";   
                }   
            }

            else{
                for(var i = 0 ; i<head2.length; i++){
                    head2[i].style.backgroundColor = "yellow";   
                }   
            }
        }
        else {
            button.value = "Color";

            if(selection == "0"){
                for(var i = 0 ; i<head1.length; i++){
                    head1[i].style.backgroundColor = "white";    
                }   
            }

            else{
                for(var i = 0 ; i<head2.length; i++){
                    head2[i].style.backgroundColor = "white";    
                }   
            }
        }   
    }

Answer 2

尝试这样。

您的代码中有很多错误。

您需要为期权税分配一个值0，因为您正在js中对其进行检查。
设置颜色样式时，您应该使用.backgroundColor而不是.backroundColor

function colorMe(){

            var button = document.getElementById("Button1");
            var head1 = document.getElementsByTagName("h1");
            var head2 = document.getElementsByTagName("h2");
            var selection = document.getElementById("list").value;

            if(button.value == "Color"){
                button.value = "Uncolor";


                if(selection == "0"){
                    for(var i = 0 ; i<head1.length; i++){
                        head1[i].style.backgroundColor  = "yellow";   
                    }   
                }else{
                    for(var i = 0 ; i<head2.length; i++){
                        head2[i].style.backgroundColor  = "yellow";   
                    }   
                }
            }
            else {
                button.value = "Color";

                if(selection == "0"){
                    for(var i = 0 ; i<head1.length; i++){
                        head1[i].style.backgroundColor  = "white";    
                    }   
                }

                else{
                    for(var i = 0 ; i<head2.length; i++){
                        head2[i].style.backgroundColor  = "white";    
                    }   
                }
            }   
        }

<select id="list">
            <option value="0">1st level</option>
            <option value="1">2nd level</option>
        </select>

        <h1>header 1</h1>
        <h2>header 2</h2>
        <h1>header 3</h1>
        <h2>header 4</h2>
        <h1>header 5</h1>
        <h2>header 6</h2>

        <input id="Button1" type="button" value="Color" onclick="colorMe()"/>

为什么这些标题的背景颜色不变？

2 个答案: