Chrome Inspect在JavaScript控制台日志中重复输出第一个数据

debugcn 发表于 Dev

超越时空

目前正在学习JavaScript，我对Chrome检查中的控制台数据输出感到好奇。每当我第一次运行HTML文件时，控制台始终会两次输出第一个数据。可能是什么原因造成的？当JS脚本运行时，这样做有什么意义吗？

代码：


<html>
    <head>
        <title>JS Select Exercise</title>
        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
    </head>
    <body>
        <div class="container">
            <hr/>
            <div class="row">
                <div class="col-lg-6">
                    <div class="card">
                        <div class="card-body">
                            <select class="form-control" id="select_demo" onchange=onKidChange(this)></select>
                            <br/>
                            <h3 id="agevalue"></h3>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
    <script>
        var jsonDataObject = [
            {"model": "A", "identifier": 1, "fields": {"name": "Stan", "age": "12"}},
            {"model": "B", "identifier": 2, "fields": {"name": "Brett", "age": "14"}}
        ]
        
        var kidModels = document.getElementById("select_demo")
        
        var kidAge = document.getElementById("agevalue")
        
        var kidTry
                
        function setup(){           
            for(var a = 0; a < jsonDataObject.length; a++){
                var option = document.createElement("option")
                option.innerHTML = jsonDataObject[a]["fields"].name
                option.value = jsonDataObject[a]["fields"].age
                kidModels.options.add(option)
                kidAge.innerHTML = kidModels.value
                kidTry = kidModels.value
                console.log(kidTry)
            }
        }
        
        function onKidChange(selected){
            for(var a=0; a < jsonDataObject.length; a++){
                if(selected.value == jsonDataObject[a]["fields"].age){
                    kidAge.innerHTML = jsonDataObject[a]["fields"].age
                    kidTry = jsonDataObject[a]["fields"].age
                    console.log(kidTry)
                }
            }
        }
        
        window.onload = setup
    </script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
</html>

谢谢！

露天市场

在设置的for循环中，下拉列表的默认选定值是数组的第一个元素。而且，您始终将这个值打印到控制台。

   var jsonDataObject = [
            {"model": "A", "identifier": 1, "fields": {"name": "Stan", "age": "12"}},
            {"model": "B", "identifier": 2, "fields": {"name": "Brett", "age": "14"}}
        ]
        
        var kidModels = document.getElementById("select_demo")
        
        var kidAge = document.getElementById("agevalue")
        
        var kidTry
                
        function setup(){           
            for(var a = 0; a < jsonDataObject.length; a++){
                var option = document.createElement("option")
                option.innerHTML = jsonDataObject[a]["fields"].name
                option.value = jsonDataObject[a]["fields"].age
                kidModels.options.add(option)
                kidAge.innerHTML = kidModels.value
                kidTry = kidModels.value
                console.log(kidTry,'----')
            }
        }
        
        function onKidChange(selected){
            for(var a=0; a < jsonDataObject.length; a++){
                if(selected.value == jsonDataObject[a]["fields"].age){
                    kidAge.innerHTML = jsonDataObject[a]["fields"].age
                    kidTry = jsonDataObject[a]["fields"].age
                    console.log(kidTry,'++++')
                }
            }
        }
        
        window.onload = setup

<html>
    <head>
        <title>JS Select Exercise</title>
        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
    </head>
    <body>
        <div class="container">
            <hr/>
            <div class="row">
                <div class="col-lg-6">
                    <div class="card">
                        <div class="card-body">
                            <select class="form-control" id="select_demo" onchange=onKidChange(this)></select>
                            <br/>
                            <h3 id="agevalue"></h3>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
</html>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。