如何在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。更改为类并在文档上循环。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>