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

Question

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

代码：


<html>
    <head>
        <title>JS Select Exercise</title>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/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/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
</html>

谢谢！

Answer 1

在设置的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/bootstrap@5.0.0-beta2/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/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
</html>

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

Repeated First Data In JavaScript Console Log Output By Chrome Inspect

javascript

logging

google-chrome

devtools

inspect