Question

我正在尝试将HTML表单中的输入用作Javascript代码。输入是3个邮政编码，结果是计算它们之间的距离，然后是简单的算术。首先我创建了一个html表单

    <form>
*Enter 5 digit US ZipCodes<br><br>
Port ZipCode:<br>
<input type="text" id="PortZip" value="31402">
<br><br>
Importer ZipCode:<br>
<input type="text" id="ImporterZip" value="30308">
<br><br>
Exporter ZipCode:<br>
<input type="text" id="ExporterZip" value="30901">
<br><br>

<input type="button" value="Calculate" onclick="initialize()" />
</form>

然后我将3个邮政编码传递给JS

var zipCodesToLookup1 = new Array('document.getElementById("PortZip").value', 'document.getElementById("ImporterZip").value', 'document.getElementById("ExporterZip").value', 'document.getElementById("PortZip").value');

完整代码如下 -

    <html>
<head>
</head>
<body>
<form>
*Enter 5 digit US ZipCodes<br><br>
Port ZipCode:<br>
<input type="text" name="PortZip" value="31402">
<br><br>
Importer ZipCode:<br>
<input type="text" name="ImporterZip" value="30308">
<br><br>
Exporter ZipCode:<br>
<input type="text" name="ExporterZip" value="30901">
<br><br>

<input type="button" value="Calculate" onclick="initialize()" />
</form> 

<div id="zip_code_output"></div>
<div id="map_canvas" style="width:650px; height:600px;"></div>




<script type="text/javascript">
function initialize() {

     //INITIALIZE GLOBAL VARIABLES
     var zipCodesToLookup1 = new Array('document.getElementById("PortZip").value', 'document.getElementById("ImporterZip").value', 'document.getElementById("ExporterZip").value', 'document.getElementById("PortZip").value');
     var output           = '<tr><th scope="col">From</th><th scope="col">To</th><th scope="col">Miles</th></tr>';
     var difference = "0";
     var totalDist = 0;
    // document.write(difference);
     //EXECUTE THE DISTANCE MATRIX QUERY
     var service = new google.maps.DistanceMatrixService();
     service.getDistanceMatrix({
          origins:      zipCodesToLookup1,
          destinations: zipCodesToLookup1,
          travelMode:   google.maps.TravelMode.DRIVING,
          unitSystem:   google.maps.UnitSystem.IMPERIAL
     }, function(response, status) {
          if(status == google.maps.DistanceMatrixStatus.OK) {
               var origins = response.originAddresses;
               var destinations = response.destinationAddresses;
               for(var i=0; i < origins.length-1; i++) {
                     var results = response.rows[i].elements;
                     output += '<tr><td>' + origins[i] + '</td><td>' + destinations[i+1] + '</td><td>' + results[i+1].distance.text + '</td></tr>';
                     if (i != 0){
                     totalDist += results[i+1].distance.value;
                     }
                     else {
                     totalDist -= results[i+1].distance.value;
                     }

               }
              output += '<tr><td></td><td>OUT OF ROUTE DISTANCE -</td><td>'+(totalDist/1000*0.621371).toFixed(0)+ ' mi</td></tr>';


               document.getElementById('zip_code_output').innerHTML = '<table cellpadding="5">' + output + '</table>';
          }
     });
}

//FUNCTION TO LOAD THE GOOGLE MAPS API
function loadScript() {
     var script  = document.createElement("script");
     script.type = "text/javascript";
     script.src  = "http://maps.googleapis.com/maps/api/js?key=AIzaSyCDZpAoR25KSkPTRIvI3MZoAg1NL6f0JV0&sensor=false&callback=initialize";
     document.body.appendChild(script);
}

window.onload = loadScript;

</script>
?>

</body>
</html>

代码无效。我怀疑我的HTML表单代码不对。欢迎更正。

Answer 1

老兄，你在javascript中使用了document.getElementbyId。但是你的形式在哪里？你已经把它作为名字。你的数组初始化也是错误的。你将paramaters作为字符串传递。修改您的代码如下：

表格：

<form>
    *Enter 5 digit US ZipCodes<br><br>
    Port ZipCode:<br>
    <input type="text" id="PortZip" value="31402">
    <br><br>
    Importer ZipCode:<br>
    <input type="text" id="ImporterZip" value="30308">
    <br><br>
    Exporter ZipCode:<br>
    <input type="text" id="ExporterZip" value="30901">
    <br><br>

    <input type="button" value="Calculate" onclick="initialize()" />
</form>

javascript：

<script>
function initialize() {

            //INITIALIZE GLOBAL VARIABLES
            var zipCodesToLookup1 = new Array(document.getElementById("PortZip").value, document.getElementById("ImporterZip").value, document.getElementById("ExporterZip").value, document.getElementById("PortZip").value);
            var output           = '<tr><th scope="col">From</th><th scope="col">To</th><th scope="col">Miles</th></tr>';
            var difference = "0";
            var totalDist = 0;
            console.log(zipCodesToLookup1);
            // document.write(difference);
            //EXECUTE THE DISTANCE MATRIX QUERY
            var service = new google.maps.DistanceMatrixService();
            service.getDistanceMatrix({
                origins:      zipCodesToLookup1,
                destinations: zipCodesToLookup1,
                travelMode:   google.maps.TravelMode.DRIVING,
                unitSystem:   google.maps.UnitSystem.IMPERIAL
                }, function(response, status) {
                if(status == google.maps.DistanceMatrixStatus.OK) {
                    var origins = response.originAddresses;
                    var destinations = response.destinationAddresses;
                    for(var i=0; i < origins.length-1; i++) {
                        var results = response.rows[i].elements;
                        output += '<tr><td>' + origins[i] + '</td><td>' + destinations[i+1] + '</td><td>' + results[i+1].distance.text + '</td></tr>';
                        if (i != 0){
                            totalDist += results[i+1].distance.value;
                        }
                        else {
                            totalDist -= results[i+1].distance.value;
                        }

                    }
                    output += '<tr><td></td><td>OUT OF ROUTE DISTANCE -</td><td>'+(totalDist/1000*0.621371).toFixed(0)+ ' mi</td></tr>';


                    document.getElementById('zip_code_output').innerHTML = '<table cellpadding="5">' + output + '</table>';
                }
            });
        }

        //FUNCTION TO LOAD THE GOOGLE MAPS API
        function loadScript() {
            var script  = document.createElement("script");
            script.type = "text/javascript";
            script.src  = "http://maps.googleapis.com/maps/api/js?key=AIzaSyCDZpAoR25KSkPTRIvI3MZoAg1NL6f0JV0&sensor=false&callback=initialize";
            document.body.appendChild(script);
        }

        window.onload = loadScript;

        </script>

将ids添加到表单元素并删除数组中的引号。

使用HTML表单将输入数据传递到Javascript代码

1 个答案: