Значение не отображается в форме ввода - PullRequest
Новая
       0

Значение не отображается в форме ввода

0 голосов
/ 18 июня 2020

Я учусь и практикуюсь с javascript, я пытаюсь вычислить объем сферы , но это не показывает значение в форме ввода . Я не знаю, где я пропускаю или неправильный код, может ли кто-нибудь мне помочь, я новичок в Javascript. Большое спасибо

Это мой HTML код: 

<!DOCTYPE HTML>
   <html lang="en">
      <head>
         <meta charset="UTF-8">
         <title>Calculate</title>
      </head>

      <body>
         volume of a sphere
         <form action="">
            Enter radius: <input type="text" name = "radius" id="radius">

            Volume: <input type="text" name="volume" id="volume">
            <input type = "submit" onclick="calculate()" value="Calculate">
         </form>
     </body>
   <script src="javascript/javascript.js"></script>
 </html>

Это мой js код 

function calculate(){
     var radius = document.getElementById("radius").value;
     var volume = (4 / 3) * Math.PI * Math.pow(radius, 3);

     document.getElementById("volume").value = volume.toFixed(4).;
}

Ответы [ 4 ]

0 голосов
/ 18 июня 2020

Во-первых, есть доп. в вашем коде js необходимо удалить из строки 4 

     document.getElementById("volume").value = volume.toFixed(4);

, а объем не отображается, потому что, когда вы нажимаете кнопку отправки, вы отправляете форму и отправляете запрос на получение, который обновляет вашу страницу, поэтому данные не отображается

для решения этой проблемы у вас есть два варианта:

1 - разместить кнопку за пределами формы 

         <form action="">
            Enter radius: <input type="text" name = "radius" id="radius">

            Volume: <input type="text" name="volume" id="volume">
         </form>
            <input type = "button" onclick="calculate()" value="Calculate">

, но в этом контексте бессмысленно устанавливать тип кнопки ввода для отправки вместо этого используйте кнопку 2 - попробуйте использовать запретить по умолчанию js код 

document.getElementById("calculateButton").addEventListener('click', function (event) {
    event.preventDefault();
})

function calculate() {

    var radius = document.getElementById("radius").value;
    var volume = (4 / 3) * Math.PI * Math.pow(radius, 3);

    document.getElementById("volume").value = volume.toFixed(4);
}
0 голосов
/ 18 июня 2020

Ваш тег скрипта находится вне тела. Внутри должно быть так: 

<!DOCTYPE HTML>
   <html lang="en">
      <head>
         <meta charset="UTF-8">
         <title>Calculate</title>
      </head>

      <body>
         volume of a sphere
         <form action="">
            Enter radius: <input type="text" name = "radius" id="radius">

            Volume: <input type="text" name="volume" id="volume">
            <input type = "submit" onclick="calculate()" value="Calculate">
         </form>
         <script src="javascript/javascript.js"></script>
     </body>
 </html>
0 голосов
/ 18 июня 2020

Пара вещей

  • Вы используете форму с отправкой, поэтому, когда вы нажимаете кнопку, форма обновляется, что очистит любые ваши вычисления. Вам нужно снять форму.
  • У вашего java скрипта есть ошибка, дополнительный пункт здесь volume.toFixed (4) .; точка между) и точкой с запятой
0 голосов
/ 18 июня 2020

У вас была синтаксическая ошибка в последней строке вашей функции. Итак, я внес исправление, и вот оно: 

function calculate(){
     var radius = document.getElementById("radius").value;
     var volume = (4 / 3) * Math.PI * Math.pow(radius, 3);

     document.getElementById("volume").value = volume.toFixed(4);
}
<form action="javascript: void(0);">
    Enter radius: <input type="text" name = "radius" id="radius">

    Volume: <input type="text" name="volume" id="volume">
    <input type = "submit" onclick="calculate()" value="Calculate">
</form>

Если вы видите атрибут action, я добавил туда javascript. Просто чтобы обработать стандартную работу формы. Если вы удалите эту строку javascript: void(0);, ваше вычисленное значение будет отображаться всего на несколько миллисекунд и отправит форму.

* Примечание. Всегда проверяйте консоль, если вы не получаете ожидаемого результата. Чтобы проверить консоль, вы проверяете элемент и выбираете вкладку консоли.

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

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

...