Question

我是JavaScript的初学者，有人可以帮助我解决我的脚本错误吗？我试图让所有亚洲国家，首先是字母表＆＃39; b＆＃39;。以下是我的html文档。以下文件显示亚洲所有以字母＆＃39; b＆＃39;开头的国家/地区。在警报框中。

<!DOCTYPE html>

<html>
    <head>
        <title>Get Element By class name</title>
    </head>

    <body>
        <p id="countriesInAsia">
            <h1>Countries in Asia</h1>

            <ol class = "a">
                <li>India</li>
                <li>Indonesia</li>
                <li>Iran</li>
                <li>Iraq</li>
                <li>Israel</li>
            </ol>

            <ol class = "b">
                <li>Bahrain</li>
                <li>Bangladesh</li>
                <li>Bhutan</li>
                <li>Brunei</li>
            </ol>

        </p>

        <p id="countriesInEurope">
            <h1>Countries in Europe</h1>

            <ol class = "a">
                <li>Albania</li>
                <li>Andorra</li>
                <li>Armenia</li>
                <li>Austria</li>
                <li>Azerbaijan</li>
            </ol>

            <ol class = "b">
                <li>Belarus</li>
                <li>Belgium</li>
                <li>Bosnia and Herzegovina</li>
                <li>Bulgaria</li>
            </ol>
        </p>


        <script>
            var countriesInAsia = document.getElementById("countriesInAsia");
            var countries = countriesInAsia.getElementsByClassName("b");
            var message = "Countries in Asia starts with alphabet b are : ";

            for(var i = 0; i < countries.length; i++){
                message = message + countries[i].textContent;
            }

            alert(message);
        </script>
    </body>
</html>

Answer 1

p标签不能包含ol，因此您需要将p更改为div：

<!DOCTYPE html>

<html>
    <head>
        <title>Get Element By class name</title>
    </head>

    <body>
        <div id="countriesInAsia">
            <h1>Countries in Asia</h1>

            <ol class = "a">
                <li>India</li>
                <li>Indonesia</li>
                <li>Iran</li>
                <li>Iraq</li>
                <li>Israel</li>
            </ol>

            <ol class = "b">
                <li>Bahrain</li>
                <li>Bangladesh</li>
                <li>Bhutan</li>
                <li>Brunei</li>
            </ol>

        </div>

        <div id="countriesInEurope">
            <h1>Countries in Europe</h1>

            <ol class = "a">
                <li>Albania</li>
                <li>Andorra</li>
                <li>Armenia</li>
                <li>Austria</li>
                <li>Azerbaijan</li>
            </ol>

            <ol class = "b">
                <li>Belarus</li>
                <li>Belgium</li>
                <li>Bosnia and Herzegovina</li>
                <li>Bulgaria</li>
            </ol>
        </div>


        <script>
            var countriesInAsia = document.getElementById("countriesInAsia");
            var countries = countriesInAsia.getElementsByClassName("b");
            var message = "Countries in Asia starts with alphabet b are : ";

            for(var i = 0; i < countries.length; i++){
                message = message + countries[i].textContent;
            }

            alert(message);
        </script>
    </body>
</html>

试试这个，它对我有用！

Answer 2

//var countriesInAsia = document.getElementById("countriesInAsia");
 var countries = document.getElementsByClassName("a");

迭代并选择元素的子元素

使用文件

Answer 3

使用<div>代替<p>

最终代码：

<!DOCTYPE html>

<html>
    <head>
        <title>Get Element By class name</title>
    </head>

    <body>
        <div id="countriesInAsia">
            <h1>Countries in Asia</h1>

            <ol class = "a">
                <li>India</li>
                <li>Indonesia</li>
                <li>Iran</li>
                <li>Iraq</li>
                <li>Israel</li>
            </ol>

            <ol class = "b">
                <li>Bahrain</li>
                <li>Bangladesh</li>
                <li>Bhutan</li>
                <li>Brunei</li>
            </ol>
        </div>

        <div id="countriesInEurope">
            <h1>Countries in Europe</h1>

            <ol class = "a">
                <li>Albania</li>
                <li>Andorra</li>
                <li>Armenia</li>
                <li>Austria</li>
                <li>Azerbaijan</li>
            </ol>

            <ol class = "b">
                <li>Belarus</li>
                <li>Belgium</li>
                <li>Bosnia and Herzegovina</li>
                <li>Bulgaria</li>
            </ol>

        </div>
        <script>
            var countriesInAsia = document.getElementById("countriesInAsia");
            var countries = countriesInAsia.getElementsByClassName("b");
            var message = "Countries in Asia starts with alphabet b are : ";

            for(var i = 0; i < countries.length; i++){
                 message = message + countries[i].textContent;
            }

            alert(message);
        </script>
    </body>
</html>

getElementsByClassName不起作用

3 个答案: