如何在javascript文件中获取城市和首都的输入数组？

Question

网页看起来像这样。我在代码中有两个数组作为输入，想在 showscore() 函数中检索数组的内容，我粘贴了我尝试过的代码片段。该查询将给出一个字符串列表，这些字符串存储在 arr1 和 arr2 中，并在以后的代码中进行混洗。将混洗后的 arr1 显示给用户，然后使用存储在城市数组中的表单输入响应。

<script type="text/javascript" src="scripts/getScore.js"></script>

<div id="score">

                <?php

                for ($i = 0; $i < $number; $i = $i + 1) {

                ?>

                    <form id="main">

                        <?php

                        echo $string1 . " " . $state[$i] . " " . $string2 ?>

                        <input type="text" placeholder="Enter answer" name="city[]" required />

                    <?php

                }

                    ?>

                    <input type='hidden' name='capital[]' value="<?php echo json_encode($capital); ?>" />

                    <button type="button" value="Submit" onclick="showscore()">Submit</button>

                    </form>

            </div>

getScore.js 中的 showscore() 函数是：

function showscore() {

var request;

if (window.XMLHttpRequest) {

    request = new XMLHttpRequest();

}

else {

    request = new ActiveXObject("Microsoft.XMLHTTP");

}

request.onreadystatechange = function () {

    if (this.readyState == 4 && this.status == 200) {

        console.log(this.responseText);

        document.getElementById("score").innerHTML = this.responseText;

    }

};

var myForm = document.forms.main;

var city = mForm.elements['city[]'];

var capital=myForm.elements['capital[]'];

console.log(city);

console.log(capital[0]);

var c =0;

for (var i = 0; i < capital.length; i++) {

    console.log(capital[i]);

    console.log(city[i]);

    if(city[i] == capital[i]){

        c++;

    }

}

console.log("Your Score is "+c);

}

Answer 1

您不能有重复的 ID。您使用 form.name 而不是脚本中的 ID。更改为类并遍历 document.querySelectorAll(".formClass")为什么不对城市和首都进行 JSON 编码，而只是在脚本中使用它们呢？然后您可以在客户端生成表单我的建议 - 未经针对您的阵列进行测试，因为我没有您的城市和资本阵列的示例。const states = {&nbsp; "Odisha": ["Bhubaneswar"],&nbsp; "Andhra Pradesh": ["Amaravati", "Hyderabad"]} // <?php echo json_encode(states); ?>;const form = document.getElementById("main");let html = ['<fieldset>']Object.keys(states).forEach(state => html.push(`<label>What is the capital of ${state}?</label> <input type="text" data-state="${state}" placeholder="Enter answer" name="city[]" required />`));html.push('<button type="button" id="checkBut">Check</button> <div readonly id="total"></div>')html.push('</fieldset>')form.innerHTML = html.join('<hr>')window.addEventListener("load", function() {&nbsp; document.getElementById("checkBut").addEventListener("click", () => {&nbsp; &nbsp; let c = 0;&nbsp; &nbsp; [...document.querySelectorAll("[name^=city]")].forEach(input => c += states[input.getAttribute("data-state")].indexOf(input.value) !== -1 ? 1 : 0);&nbsp; &nbsp; document.getElementById("total").innerText = "Your Score is " + c;&nbsp; });});#score {&nbsp; width: 80%}fieldset {&nbsp; min-width: 500px;&nbsp; display: inline-block;}fieldset input {&nbsp; float: right;}#total {&nbsp; float: right;}<div id="score">&nbsp; <form id="main">&nbsp; </form></div>