How to get a value from an rather than a prompt?

Question

I’m trying to make a surface area of a cylinder calculator as a beginner project. So far I’ve only used JavaScript to make it and it works fine.

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);

I am using prompt to get the variables but is there any way to use HTML <input> tags instead of prompt?

Possible duplicate of [How do I get the value of text input field using JavaScript?](https://stackoverflow.com/questions/11563638/how-do-i-get-the-value-of-text-input-field-using-javascript) — Sebastian Simon, May 22 '18 at 23:54

A J · Answer 1 · 2018-05-23T00:01:20.693

0

Create two text boxes in html and add a button.

Onclick of button, call a javaScript function which will take the values of the textboxes and calculate the volume.

Similar to Add two numbers and display result in textbox with Javascript

As far I understand from the code, you are doing JavaScript, not Java.

edited May 23 '18 at 00:01

answered May 22 '18 at 23:47

A J

1,439
4
25
42

score 0 · Answer 2 · answered May 23 '18 at 00:02

Do it with HTML and javascript. build a form and then use the values. inside a HTML Body:

<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>

score 0 · Answer 3 · answered May 23 '18 at 00:03

Create two textfields for input using

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

Use JavaScript to call a function and inside do

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

Now variables v1 and v2 has value of text boxes

Remember call the JavaScript inside the function else it will get empty value as soon as it loads the page.(use onclick on a button)

score 0 · Accepted Answer · answered May 23 '18 at 00:08

First, create a simple form in html. The onkeyup="calculate() part, indicates that whenever the onkeyup event ocurs, it fires the calculate() functiono in javascript.

Then, with javascript (not java!), we calculate. Look the comments on the code:

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">

How to get a value from an rather than a prompt?

4 Answers4