输出未显示为未呈现的表单数据（document.getElement）答案

【问题标题】：Output being not displayed as form data being not rendered (document.getElement)输出未显示为未呈现的表单数据（document.getElement）
【发布时间】：2020-07-30 05:54:35
【问题描述】：

<html>
<head>
</head>
<body style = "text-align:center;" id = "body">
<form id = "number" method="get" name="number">
<input type="text" id="number1" name="number1" value="" />
<input type="text" id="number2" name="number2" value="" />
</form>
<p id = "GFG_UP1" style = "font-size: 16px;">

</p>
<p id = "GFG_UP2" style = "font-size: 16px;">
</p>
<button onclick = "gfg_Run()">
Convert
</button>
<p id = "GFG_DOWN1" style = "color:red;
font-size: 20px; font-weight: bold;">
</p>
<p id = "GFG_DOWN2" style = "color:red;
font-size: 20px; font-weight: bold;">
</p>

<script>
var form = document.getElementById('number');
var el_up1 = document.getElementById("GFG_UP1");
var el_up2 = document.getElementById("GFG_UP2");
var el_down1 = document.getElementById("GFG_DOWN1");
var el_down2 = document.getElementById("GFG_DOWN2");
var array1 = form.elements.number1.value;
var array2 = form.elements.number2.value;
var numberArray1 = [];
var numberArray2 = [];
for (i = 0; i < array1.length; i++)
{
numberArray1[i] = "Phone" + i + ':'+array1[i];
}
el_up1.innerHTML = "Array = [" +array1+"]";;
 a = i;

for (i = 0 ; i < array2.length; i++)
{
numberArray2[i] = "Phone" + a + ':'+array2[i];
a++;
}
el_up2.innerHTML = "Array = [" +array2+"]";;
function gfg_Run(){
el_down1.innerHTML =
JSON.stringify(Object.assign(numberArray1));
el_down2.innerHTML =
JSON.stringify(Object.assign(numberArray2));
}
</script>
</body>
</html>

下面的代码应该给出两个 json 数组的输出 ["number0:34","number1:24","number2:31","number3:48"] ["number0:23","number1:43","number2:65","number3:52"] 当在表单中输入数字但在脚本中没有显示输出时，两个数组都无法通过表单读取数据。错误存在于数组中，就好像我在脚本中直接在数组中传递值它运行良好可以的话帮我调试一下

【问题讨论】：

我看到的第一个问题是使用array1.length 而不仅仅是array1，因为array1 和array2 是整数，而不是数组，这是您从表单中获取值的方式。
如何把它们做成数组

标签： javascript html arrays json

【解决方案1】：

我认为这不是您问题的完整答案，但我注意到的第一件事是，在您的 for 循环中，您尝试使用 array1 和 @987654324 的 .length 属性@，实际上不是数组：

var array1 = form.elements.number1.value;
var array2 = form.elements.number2.value;

您将它们设置为两个输入的.value 属性，理论上它们将是数字，但被.value 属性视为字符串，因为输入类型设置为“文本”。

所以我会这样做：

var form = document.getElementById('number');
var el_up1 = document.getElementById("GFG_UP1");
var el_up2 = document.getElementById("GFG_UP2");
var el_down1 = document.getElementById("GFG_DOWN1");
var el_down2 = document.getElementById("GFG_DOWN2");

/* grab the values from those text inputs, and parse them into integers (because
they will be strings because the input type is set to "text") */
var input1 = parseInt(form.elements.number1.value);
var input2= parseInt(form.elements.number2.value);
/* I also changed the names to input1 and input2 because it's confusing to have them 
labeled as 'arrays' when they're actually integers */

var numberArray1 = [];
var numberArray2 = [];

/* now just use those numerical values as your exit condition in your loops */
for (i = 0; i < input1; i++)
{
/* we're also going to use Array.push() to add vlues to the `numberarray` instead of trying to assign a value to the element at "i" */
numberArray1.push("Phone" + i + ':'+ (i+1));
}

/* I'm not 100% sure what you were trying to do here, but I'm guessing that you 
actually want to show the values 'numberArray1' here instead of the value of that 
first input, so we'll use the 'spread' operator to put that in there */
el_up1.innerHTML = `Array = [${...numberArray1}]`;
 a = i;

for (i = 0 ; i < input2; i++)
{
numberArray2.push("Phone" + a + ':'+ (i+1));
a++;
}
el_up2.innerHTML = `Array = [${...numberArray1}]`;
function gfg_Run(){
el_down1.innerHTML =
JSON.stringify(Object.assign(numberArray1));
el_down2.innerHTML =
JSON.stringify(Object.assign(numberArray2));

【讨论】：