如何将我的表单值放在 javascript 数组中

How can i put my form value in javascript array

本文关键字：javascript 数组我的表单更新时间：2023-09-26

我想制作一个脚本，我可以将我的表单放入javascript数组中invoer[]并显示总计

它不断停止工作，我搜索了很多，我真的找不到正确的方法:D

这是我的JavaScript代码

var strijk = ['broek', 'hemd', 'tshirt', 'lakens', 'korte broek', 'babykledij'];
var minuten = [5, 10, 5, 6, 3, 3];
function invoerstrijk() {
    document.write("<form action='' method='get' name='strijkform'>");
    for (var a = 0; a < minuten.length; a++) {
        document.write(strijk[a] + "<input id='" + strijk[a] + "' name ='" + strijk[a] + "' type='text' />" + "<BR>");
    }
    document.write("<button onclick='opgeven()'>opgeven</button>");
    document.write("</form>");
}
function opgeven() {
    var invoer = [];
    for (var a = 0; a < minuten.length; a++) {
        invoer[a] = document.getElementByI(strijk[a]).value;
    }
    var totaal;
    for (var a = 0; a < minuten.length; a++) {
        totaal += parseint(invoer[a]) * parseint(minuten[a]);
    }
    document.write("<input name=" + strijk[a] + " type='text' value=" + invoer[a] + " readonly />");
    if (invoer != []) {
        document.write("totaal aantal minuten" + totaal);
    } else {
        document.write("geen invoer");
    }
}

我的 html 看起来像这样

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<script type="text/javascript" >
//my javasccript
</script>
<button id="B1" onclick="invoerstrijk()" >Nieuwe strijk</button>
</body>
</html>

这应该有效：

var strijk = ['broek', 'hemd', 'tshirt', 'lakens', 'korte broek', 'babykledij'];
var minuten = [5, 10, 5, 6, 3, 3];
function invoerstrijk() {
  document.write("<form action='' method='get' name='strijkform' onsubmit='return false;'>");
  for (var a = 0; a < minuten.length; a++) {
    document.write(strijk[a] + "<input id='" + strijk[a] + "' name ='" + strijk[a] + "' type='text' />" + "<BR>");
  }
  document.write("<button onclick='opgeven()'>opgeven</button>");
  document.write("</form>");
}
function opgeven() {
  var invoer = [];
  for (var a = 0; a < minuten.length; a++) {
    invoer.push(document.getElementById(strijk[a]).value);
  }
  var totaal = 0;
  for (var a = 0; a < minuten.length; a++) {
    totaal += (parseInt(invoer[a]) * parseInt(minuten[a]));
  }
  // !!! this is wrong because it is out of for !!!
  //document.write("<input name=" + strijk[a] + " type='text' value=" + invoer[a] + " readonly />");
  if (invoer.length > 0) {
    document.write("totaal aantal minuten " + totaal);
  } else {
    document.write("geen invoer");
  }
}

一些解释：

onsubmit='return false;' - 不发送表单并重新加载页面。
invoer.push（document.getElementById（strijk[a]）.value）; - 要将元素放入数组中使用 push。
var totaal = 0; - 初始化变量 0 因为它是未定义的。
，好：解析int; Bad： getElementByI， Good： getElementById
具有只读输入的行是错误的，因为它不在 for 中，因此未定义变量。

普伦克示例