Как получить значение из <input>вместо приглашения? - PullRequest
Новая
       6

Как получить значение из <input>вместо приглашения?

0 голосов
/ 23 мая 2018

Я пытаюсь сделать площадь поверхности калькулятора цилиндра как проект для начинающих.До сих пор я использовал только JavaScript, чтобы сделать это, и он прекрасно работает. 

var radius = prompt("What is the radius?");
var height = prompt("What is the height?");

var answer = 6.28*radius*radius+6.28*radius*height;

alert(answer);

Я использую prompt для получения переменных, но есть ли способ использовать теги HTML <input> вместо prompt?

Ответы [ 4 ]

0 голосов
/ 23 мая 2018

Сначала создайте простую форму в формате HTML.Часть onkeyup="calculate() указывает, что всякий раз, когда происходит событие onkeyup, оно запускает функцию calculate() в javascript.

Затем с помощью javascript (не java!) Мы вычисляем.Смотрите комментарии к коду: 

function calculate(){
var radius = document.getElementById("radius").value; //we get the radius
var height = document.getElementById("height").value; //we get the height

var answer = 6.28*radius*radius+6.28*radius*height; //same line you used before
document.getElementById("answer").innerHTML = answer; //we print the answer
}
<p>Radius:</p><input id="radius" type="number" onkeyup="calculate()">
<p>Height:</p><input id="height" type="number" onkeyup="calculate()">
<p>Answer:</p><p id="answer">
0 голосов
/ 23 мая 2018

Сделайте это с помощью HTML и JavaScript.построить форму, а затем использовать значения.внутри тела HTML: 

<form id="area-calculate" onsubmit="calculate()">
  radius: <input type="text" id="input1" placeholder="radius">
  height: <input type="text" id="input2" placeholder="height">
  <input type="submit" value="calculate">
</form>
<div id="answerPlaceHolder"></div>
<script>
  function calculate(){
    var radius = document.getElementById("input1").value;
    var height = document.getElementById("input2").value;
    var answer = 6.28*radius*radius+6.28*radius*height;
    document.getElementById("answerPlaceHolder").innerHTML = "the answer is: "+answer;
  }
</script>
0 голосов
/ 23 мая 2018

Создайте два текстовых поля для ввода, используя 

<input type=“text” id=“tf1”>
<input type=“text” id=“tf2”>

Используйте JavaScript для вызова функции и внутри do 

var v1=document.getElementById(“tf1”).value
var v2=document.getElementById(“tf2”).value

Теперь переменные v1 и v2 имеют значение текстовых полей

Не забудьте вызвать JavaScript внутри функции, иначе он получит пустое значение, как только загрузит страницу. (Используйте кнопку на кнопке)

0 голосов
/ 23 мая 2018

Создайте два текстовых поля в html и добавьте кнопку.

Нажмите кнопку, вызовите функцию javaScript, которая будет принимать значения текстовых полей и вычислять объем.

По аналогии с Добавьте два числа и отобразите результат в текстовом поле с Javascript

Насколько я понимаю из кода, вы делаете JavaScript, а не Java.

...