Question

我正在尝试制作一个计算器，以便...好吧，计算一下。无论如何，我试图通过使用表单提交将4个变量设置为4个用户输入。但是，无论我做什么，我都无法获取要设置的变量。帮助将不胜感激！

   

    <!DOCTYPEhtml>
<html>
<head>
<title>NatHisCalc</title>
</head>
<body>
<h1><center><b><p>Test</p></b></center></h1>
<center><b><p id='output'>loading...</p></b></center>
<center><b><p id='output2'>loading...</p></b></center>
<center><b><p id='output3'>loading...</p></b></center>
<center><b><p id='output4'>loading...</p></b></center>
<form id="a" action="/action_page.php">
  Input X <input type="number" name="x"><br><br>
  <input type="button" onclick="calc()" value="Submit">
</form>
<form id="a" action="/action_page.php">
  Input X <input type="number" name="y"><br><br>
  <input type="button" onclick="calc()" value="Submit">
</form>
<form id="a" action="/action_page.php">
  Input X <input type="number" name="a"><br><br>
  <input type="button" onclick="calc()" value="Submit">
</form>
<form id="a" action="/action_page.php">
  Input X <input type="number" name="b"><br><br>
  <input type="button" onclick="calc()" value="Submit">
</form>
<script>
function calc() {
var x = document.getElementById("x").submit();
var y = document.getElementById("y").submit();
var a = document.getElementById("a").submit();
var b = document.getElementById("b").submit();
var u = (0.101*(y/100))*(480000*(a/100))            
var j = (0.581*(x/100))*(120000*(b/100))  
if (x > 150 || x < 50) {
window.alert('Hold on... Those inputs will result in an unreasonable output. You can click ');
}
var preresult = j + u;
if (preresult < 177000) {
document.getElementById('output').innerHTML = 'Test';
} else {
document.getElementById('output').innerHTML = 'Test1';
}
if (u > 179999) {
document.getElementById('output').innerHTML = 'Test2';
}
document.getElementById('output2').innerHTML = 'Test3' + j;
document.getElementById('output3').innerHTML = 'Test4 ' + u;
document.getElementById('output4').innerHTML = 'Test5 ' + preresult;
}
</script>
</body>
</html>

Answer 1

研究您的代码，看来您使事情变得应有的复杂。首先，您无需在输入上调用submit函数来获取其值。如果要获取x的值，则只需访问value这样的document.getElementById("x").value属性。其次，您实际上不需要四个按钮，只需要做的是一个按钮来提交表单，并在输入字段中添加required，这将使浏览器在所有表单提交之前都不会提交表单充满。最后，id属性在整个页面中必须是唯一的。您将表单和输入字段都设置为ID a，这是不可接受的。它不会显示任何错误，但会给您带来麻烦。您可以在这里看到我的工作，在该工作中，单击按钮后阻止提交表单，只是调用了calc函数来进行计算。

 <!DOCTYPEhtml>
<html>
<head>
<title>NatHisCalc</title>
</head>
<body>
<h1><center><b><p>Test</p></b></center></h1>
<center><b><p id='output'>loading...</p></b></center>
<center><b><p id='output2'>loading...</p></b></center>
<center><b><p id='output3'>loading...</p></b></center>
<center><b><p id='output4'>loading...</p></b></center>
<form onsubmit="event.preventDefault(); calc();" action="/action_page.php">
  Input X <input type="number" id="x" required><br><br>
  Input Y <input type="number" id="y" required><br><br>
  Input A <input type="number" id="a" required><br><br>
  Input B <input type="number" id="b" required><br><br>
  <input type="submit" value="Submit">
</form>
<script>


function calc() {
  var x = document.getElementById("x").value;
  var y = document.getElementById("y").value;
  var a = document.getElementById("a").value;
  var b = document.getElementById("b").value;

  var u = (0.101*(y/100))*(480000*(a/100))            
  var j = (0.581*(x/100))*(120000*(b/100))  
  if (x > 150 || x < 50) {
  window.alert('Hold on... Those inputs will result in an unreasonable output. You can click ');
  }
  var preresult = j + u;
  if (preresult < 177000) {
  document.getElementById('output').innerHTML = 'Test';
  } else {
  document.getElementById('output').innerHTML = 'Test1';
  }
  if (u > 179999) {
  document.getElementById('output').innerHTML = 'Test2';
  }
  document.getElementById('output2').innerHTML = 'Test3' + j;
  document.getElementById('output3').innerHTML = 'Test4 ' + u;
  document.getElementById('output4').innerHTML = 'Test5 ' + preresult;
}

</script>
</body>
</html>

这个使用表单提交来满足变量的计算器不起作用

1 个答案: