仅当放置在HTML中时才具有简单的脚本功能

Simple script functions only when placed in HTML

本文关键字：简单 功能 脚本 HTML      更新时间：2023-09-26

以下是一些有效的代码。HTML是一个简单的选择元素。脚本使用来自调用的JSON数据填充它。

home.html：

<html>
<body>
    <div id="id01"></div>
    <select id="machines"></select>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="test.js"></script>
    <script>
        var xmlhttp = new XMLHttpRequest();
        var url = "blahblahblah.com/api/getmachinetypes";
        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                var myArr = JSON.parse(xmlhttp.responseText);
                myFunction(myArr);
            }
        };
        xmlhttp.open("GET", url, true);
        xmlhttp.send();
        function myFunction(arr) {
            var i;
            for(i = 0; i < arr.length; i++) {
                $('#machines').append('<option value=' + arr[i].Id + '>' + arr[i].Name + '</option>');
            }
        }
    </script>
</body>

但是，当我删除脚本并将其放在test.js中时，选择列表将不再填充。为什么会这样？

home.html：

<html>
<body>
    <div id="id01"></div>
    <select id="machines"></select>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="test.js"></script>
</body>

test.js:

var xmlhttp = new XMLHttpRequest();
var url = "blahblahblah.com/api/getmachinetypes";
xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        var myArr = JSON.parse(xmlhttp.responseText);
        myFunction(myArr);
    }
};
xmlhttp.open("GET", url, true);
xmlhttp.send();
function myFunction(arr) {
    var i;
    for(i = 0; i < arr.length; i++) {
        $('#machines').append('<option value=' + arr[i].Id + '>' + arr[i].Name + '</option>');
    }
}

try:

var xmlhttp = new XMLHttpRequest();
var url = "blahblahblah.com/api/getmachinetypes";
function myFunction(arr) {
        var i;
   for(i = 0; i < arr.length; i++) {
        $('#machines').append('<option value=' + arr[i].Id + '>' + arr[i].Name + '</option>');
    }
}
xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        var myArr = JSON.parse(xmlhttp.responseText);
        myFunction(myArr);
    }
};
xmlhttp.open("GET", url, true);
xmlhttp.send();
相关文章：