Блог

Главная - Вопросы по программированию - Этот калькулятор, использующий отправку формы для удовлетворения переменных, не работает

Этот калькулятор, использующий отправку формы для удовлетворения переменных, не работает

#javascript #html

#javascript #HTML

Вопрос:

Я пытаюсь создать калькулятор, чтобы … ну, что-то вычислить. В любом случае, я пытаюсь настроить 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 '   preresu<
}
</script>
</body>
</html>

Комментарии:

1. Почему бы не создать четыре поля ввода и одну кнопку отправки вместо четырех полей ввода и четырех кнопок? Для выполнения ваших вычислений, не должен ли пользователь должен заполнить все четыре поля?

Ответ №1:

Заглянул в ваш код, кажется, что вы все слишком усложнили, чем это должно быть. Прежде всего, вы не вызываете submit функцию на входе, чтобы получить ее значение. Если вы хотите получить значение x , то вы просто получаете доступ к value свойству следующим образом document.getElementById("x").value . Во-вторых, вам действительно не нужны четыре кнопки, все, что вам нужно сделать, это ОДНА кнопка, которая отправляет форму, а добавление required полей ввода заставляет браузер не отправлять форму, пока не будут заполнены все формы. Наконец, 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 '   preresu<
}

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