如何在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

1. 您不能有重复的 ID。

2. 您使用 form.name 而不是脚本中的 ID。更改为类并遍历 document.querySelectorAll(".formClass")

3. 为什么不对城市和首都进行 JSON 编码，而只是在脚本中使用它们呢？然后您可以在客户端生成表单

我的建议 - 未经针对您的阵列进行测试，因为我没有您的城市和资本阵列的示例。

const states = {

  "Odisha": ["Bhubaneswar"],

  "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() {

  document.getElementById("checkBut").addEventListener("click", () => {

    let c = 0;

    [...document.querySelectorAll("[name^=city]")].forEach(input => c += states[input.getAttribute("data-state")].indexOf(input.value) !== -1 ? 1 : 0);

    document.getElementById("total").innerText = "Your Score is " + c;

  });

});

#score {

  width: 80%

}

fieldset {

  min-width: 500px;

  display: inline-block;

}

fieldset input {

  float: right;

}

#total {

  float: right;

}

<div id="score">

  <form id="main">

  </form>

</div>