老师,请问如下代码为什么输出不对呢

来源:2-7 编程练习

微微Vivian哦耶

2021-10-28 20:45:53

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>


<body>

    <select id="province">

    </select>

    <script>

        let provinces =

            ["北京市", "天津市",

                "上海市", "重庆市", "河北省", "山西省",

                "辽宁省", "吉林省", "黑龙江省", "江苏省"

                , "浙江省", "安徽省", "福建省", "江西省",

                "山东省", "河南省", "湖北省", "湖南省",

                "广东省", "海南省", "四川省", "贵州省",

                "云南省", "陕西省", "甘肃省", "青海省",

                "台湾省", "内蒙古自治区", "广西壮族自治区",

                "西藏自治区", "宁夏回族自治区", "新疆维吾尔自治区",

                "香港特别行政区", "澳门特别行政区"];

        let provinceTemp = document.getElementById('province');

        let temValue = ''

        provinceTemp.innerHTML = temValue;

        for(let i=0; i<provinces.length; i++) {

            temValue +=`<span>${provinces[i]}<span>`

        }

    </script>

</body>


</html>


写回答

1回答

好帮手慕久久

2021-10-29

同学你好,代码有如下问题:

1、如下代码,逻辑顺序不对:

https://img.mukewang.com/climg/617b5767099872a807210189.jpg

代码从上往下执行,执行完1后,会直接执行2。由于temValue的初始值是空,因此2执行完后,provinceTemp中的内容是空字符串:

https://img.mukewang.com/climg/617b57cc09f44bcf07750233.jpg

即使代码会继续往后执行3(for循环)改变temValue的值,也不会影响provinceTemp中的innerHTML:

https://img.mukewang.com/climg/617b583b097dcfdd07510190.jpg

建议调整代码的书写顺序:

https://img.mukewang.com/climg/617b589009399f6b07300368.jpg

2、select标签中,子元素要写成option标签,才有下拉效果。修改如下:

https://img.mukewang.com/climg/617b58e809d989e407950678.jpg

祝学习愉快!

0

0 学习 · 15276 问题

查看课程