JS и событие onchange в html форме - PullRequest
Новая
       7

JS и событие onchange в html форме

0 голосов
/ 10 марта 2020

Ошибка моего кода довольно очевидна, но я ее не вижу.
Это очень просто, моя форма попросить height и weight и вычислить corporal mass index высоту пользовательского ввода в метрах и преобразовать в дюймы (функция работает нормально)
кг ввода и преобразовать в фунты (тоже работает нормально), но в этом процессе необходимо вычислить индекс и записать его в другое текстовое поле. это моя проблема!
Что я делаю не так ??? вот мой код: 

    		function myFunctionmts() {
    		  var x = document.getElementById("mters");
    		  var y = document.getElementById("inches");
    		  y.value = ((x.value*100)/2.54).toFixed(2);
    		  document.getElementById("mters").value=x.value;
    		  document.getElementById("inches").value=y.value;
    		}
    	</script>
    	<script>
    		function myFunctionkg() {
    		  var i = document.getElementById("imc");
    		  var p = document.getElementById("inches");
    		  var x = document.getElementById("kilos");
    		  var z = document.getElementById("pounds");
    		  var step1 = 0;
    		  var step2 = 0;
    		  var step3 = 0;
    		  z.value = (x.value/.454).toFixed(2);
    		  libras.value=z.value;
    		  document.getElementById("pounds").value=z.value;
    		  step1.value = z.value*703;
    		  step2.value = step1.value/p.value;
    		  step3.value = (step2.value/p.value).toFixed(1);
    		  document.getElementById("imc").value=step3.value
    		}
    	
<form method="POST" action="#"> 
    	<input type="text" name="mters" id="mters" required onchange="myFunctionmts()">
    	<input type="text" name="inches" id="inches" placeholder="Inches" readonly>
    	<input type="text" name="kilos" id="kilos" required onchange="myFunctionkg()">
    	<input type="text" name="pounds" id="pounds" placeholder="Pounds" readonly>
    	<input type="text" name="imc" id="imc" readonly>
    	<input type="submit" value="Save">
    </form>

1 Ответ

0 голосов
/ 10 марта 2020

Попробуйте использовать этот код:

HTML: 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Stack Overflow</title>

    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
    />

    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    <!-- Popper JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <form method="POST" action="#">
      <label for="mters">meter</label>
      <input
        type="text"
        name="mters"
        id="mters"
        required
        onchange="myFunctionmts()"
      />
      <label for="inches">inches</label>
      <input
        type="text"
        name="inches"
        id="inches"
        placeholder="Inches"
        readonly
      />
      <label for="kilos">kilos</label>
      <input
        type="text"
        name="kilos"
        id="kilos"
        required
        onchange="myFunctionkg()"
      />
      <label for="pounds">pounds</label>
      <input
        type="text"
        name="pounds"
        id="pounds"
        placeholder="Pounds"
        readonly
      />
      <label for="imc">imc</label>
      <input type="text" name="imc" id="imc" readonly />
      <input type="submit" value="Save" />
    </form>
    <script src="script.js"></script>
  </body>
</html>

JS: 

function myFunctionmts() {
  var x = document.getElementById('mters');
  var y = document.getElementById('inches');
  y.value = ((x.value * 100) / 2.54).toFixed(2);
  document.getElementById('mters').value = x.value;
  document.getElementById('inches').value = y.value;
}

function myFunctionkg() {
  var imc = document.getElementById('imc'); // mass index
  var inches = document.getElementById('inches'); //
  var kilos = document.getElementById('kilos');
  var pounds = document.getElementById('pounds'); // pounds
  var step1 = 0;
  var step2 = 0;
  var step3 = 0;
  pounds.value = (+kilos.value / 0.454).toFixed(2);

  // undefined error here, what is this libras all about ???
  // libras.value = z.value;

  step1 = +pounds.value * 703;
  step2 = +step1 / +inches.value;
  step3 = (+step2 / +inches.value).toFixed(1);
  console.log(step3);
  imc.value = step3;
}

Надеюсь, это поможет.

...