时间戳

首页 > 解决方案 > 输出未显示为未呈现的表单数据（document.getElement）

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

问题描述

<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"] 当在表单中输入数字但在脚本中没有显示输出时，两个数组都无法通过表单读取数据。错误在于数组，好像我直接在脚本中的数组中传递值它运行良好，如果你可以帮助我调试

标签： javascripthtmlarraysjson

解决方案

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

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));

推荐阅读