Когда я заполняю 3 поля ввода, мой конечный результат не отображается. Но когда я заполняю 2 из 3 входов, результаты отображаются - PullRequest
Новая
       2

Когда я заполняю 3 поля ввода, мой конечный результат не отображается. Но когда я заполняю 2 из 3 входов, результаты отображаются

0 голосов
/ 21 января 2019

У меня есть функция, которая использует 3 входа.К сожалению, когда я заполняю все 3 ввода.Результат отображается в течение 1 секунды и уходит ... Но когда я заполняю только 2 из 3 входов.Результат будет отображаться, но, конечно, не хватает некоторых входных данных.

<!DOCTYPE html>
<html>
  <head lang="en">
      <h1> BMI Calculator</h1>
  <meta charset="UTF-8">
  <script src="js/jquery-3.3.1.js"></script>
  <script src="js/script.js"></script>

  </head>
<body>

  <form>
    <label><b>Lengte</b></label>
        <input type="number" name="message" id="user_lengte" required><span>cm</span><br>
    <label><b>Gewicht</b></label>
        <input type="number" name="message" id="user_gewicht" required><span>kg</span><br>
    <label><b>Leeftijd</b></label>
        <input type="number" name="message" id="user_leeftijd" required><span>jr</span><br>
<button type="submit" onclick="showBMI();" value="Calculate">Berekenen</button><br/>
    <label>&nbsp;</label><br>
    <label>Your BMI: </label>
        <p><span id='display'></span></p>
 </form>

</body>
</html>

    function showBMI() {

        var gewicht = document.getElementById("user_gewicht").value;
        var lengte = document.getElementById("user_lengte").value;
        var leeftijd = document.getElementById("user_leeftijd").value;


        document.getElementById('display').innerHTML = 
        (88.362 + (13.397 * gewicht) + (4.799 * lengte) - (5.677 * leeftijd)).toFixed(2)

        //88.362 + ( 13.397 x weight in kg ) + ( 4.799 x height in cm ) - ( 5.677 x age in years )
};

Я хотел бы иметь возможность заполнить все 3 ввода и отобразить их.

Ответы [ 4 ]

0 голосов
/ 21 января 2019

Вам необходимо добавить событие onsubmit в тег формы 

<form onsubmit="return false">

Тогда будет хорошо удалить событие onclick из кнопки отправки и вызвать метод showBMI () для события onsubmit следующим образом: 

<form onsubmit="showBMI(); return false">
0 голосов
/ 21 января 2019

Изменить тип кнопки на «кнопку» 

<button type="button" onclick="showBMI();" value="Calculate">Berekenen</button><br/>
0 голосов
/ 21 января 2019 

function showBMI() {

        var gewicht = document.getElementById("user_gewicht").value;
        var lengte = document.getElementById("user_lengte").value;
        var leeftijd = document.getElementById("user_leeftijd").value;


        document.getElementById('display').innerHTML = 
        (88.362 + (13.397 * gewicht) + (4.799 * lengte) - (5.677 * leeftijd)).toFixed(2)

        //88.362 + ( 13.397 x weight in kg ) + ( 4.799 x height in cm ) - ( 5.677 x age in years )
};


$(document).on('click', '#showBMI', function (e) {

showBMI();

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
  <head lang="en">
      <h1> BMI Calculator</h1>
  <meta charset="UTF-8">
  </head>
<body>

  <form>
    <label><b>Lengte</b></label>
        <input type="number" name="message" id="user_lengte" required><span>cm</span><br>
    <label><b>Gewicht</b></label>
        <input type="number" name="message" id="user_gewicht" required><span>kg</span><br>
    <label><b>Leeftijd</b></label>
        <input type="number" name="message" id="user_leeftijd" required><span>jr</span><br>
<button id="showBMI" value="Calculate">Berekenen</button><br/>
    <label>&nbsp;</label><br>
    <label>Your BMI: </label>
        <p><span id='display'></span></p>
 </form>

</body>
</html>

function showBMI() {

        var gewicht = document.getElementById("user_gewicht").value;
        var lengte = document.getElementById("user_lengte").value;
        var leeftijd = document.getElementById("user_leeftijd").value;


        document.getElementById('display').innerHTML = 
        (88.362 + (13.397 * gewicht) + (4.799 * lengte) - (5.677 * leeftijd)).toFixed(2)

        //88.362 + ( 13.397 x weight in kg ) + ( 4.799 x height in cm ) - ( 5.677 x age in years )
};


$(document).on('click', '#showBMI', function (e) {

showBMI();

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
  <head lang="en">
      <h1> BMI Calculator</h1>
  <meta charset="UTF-8">
  </head>
<body>

  <form>
    <label><b>Lengte</b></label>
        <input type="number" name="message" id="user_lengte" required><span>cm</span><br>
    <label><b>Gewicht</b></label>
        <input type="number" name="message" id="user_gewicht" required><span>kg</span><br>
    <label><b>Leeftijd</b></label>
        <input type="number" name="message" id="user_leeftijd" required><span>jr</span><br>
<button id="showBMI" value="Calculate">Berekenen</button><br/>
    <label>&nbsp;</label><br>
    <label>Your BMI: </label>
        <p><span id='display'></span></p>
 </form>

</body>
</html>
0 голосов
/ 21 января 2019

Поскольку у вас есть тип кнопки «отправить», поведение по умолчанию заключается в отправке формы и принудительном обновлении страницы, которую можно отключить, передав событие в метод showBMI и используя event.preventDefault();

function showBMI(e) {
        e.preventDefault();
        

        var gewicht = document.getElementById("user_gewicht").value;
        var lengte = document.getElementById("user_lengte").value;
        var leeftijd = document.getElementById("user_leeftijd").value;


        document.getElementById('display').innerHTML = 
        (88.362 + (13.397 * gewicht) + (4.799 * lengte) - (5.677 * leeftijd)).toFixed(2)

        //88.362 + ( 13.397 x weight in kg ) + ( 4.799 x height in cm ) - ( 5.677 x age in years )
};
<!DOCTYPE html>
<html>
  <head lang="en">
      <h1> BMI Calculator</h1>
  <meta charset="UTF-8">
  <script src="js/jquery-3.3.1.js"></script>
  <script src="js/script.js"></script>

  </head>
<body>

  <form>
    <label><b>Lengte</b></label>
        <input type="number" name="message" id="user_lengte" required><span>cm</span><br>
    <label><b>Gewicht</b></label>
        <input type="number" name="message" id="user_gewicht" required><span>kg</span><br>
    <label><b>Leeftijd</b></label>
        <input type="number" name="message" id="user_leeftijd" required><span>jr</span><br>
<button type="submit" onclick="showBMI(event);" value="Calculate">Berekenen</button><br/>
    <label>&nbsp;</label><br>
    <label>Your BMI: </label>
        <p><span id='display'></span></p>
 </form>

</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...