How to display javascript results on the same page
Question
I was wondering instead of using the alert function to show the function result if there was a way to print it in a text field on the same page underneath the Calculate Button. Here is what I have so far:
<!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" type="text/css" href="styles/formula_styles.css"> <script type="text/javascript"> var a,b,c; function setValues1() { a = Number(document.getElementById("a").value); b = Number(document.getElementById("b").value); c = Number(document.getElementById("c").value); } function and() { setValues1(); result1 = (-b + Math.sqrt(b*b -4*a*c))/(2*a); result2 = (-b - Math.sqrt(b*b -4*a*c))/(2*a); alert("The volume of this cube is " +result1 + " and " +result2); } </script> </head> <body> <nav> <a href="index.html">Home</a> // <a href="levels.html">Grade Levels</a> </nav> <div id="container"> <div id="formula"> <input type="text" id="a" placeholder="'A' Variable"/><br> <input type="text" id="b" placeholder="'B' Variable"/><br> <input type="text" id="c" placeholder="'C' Variable"/><br> <input type="button" onclick="and()" value="Calculate!"/> </div> </div> </body> </html>
3 answers
solution1
0 2015-05-28 01:07:28
Create a div under the button and populate the innerHTML of the div :
<!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" type="text/css" href="styles/formula_styles.css"> <script type="text/javascript"> var a, b, c; function setValues1() { a = Number(document.getElementById("a").value); b = Number(document.getElementById("b").value); c = Number(document.getElementById("c").value); } function and() { setValues1(); result1 = (-b + Math.sqrt(b * b - 4 * a * c)) / (2 * a); result2 = (-b - Math.sqrt(b * b - 4 * a * c)) / (2 * a); document.getElementById('result').innerHTML = "The volume of this cube is " + result1 + " and " + result2; } </script> </head> <body> <nav> <a href="index.html">Home</a> // <a href="levels.html">Grade Levels</a> </nav> <div id="container"> <div id="formula"> <input type="text" id="a" placeholder="'A' Variable" /> <br> <input type="text" id="b" placeholder="'B' Variable" /> <br> <input type="text" id="c" placeholder="'C' Variable" /> <br> <input type="button" onclick="and()" value="Calculate!" /> <div id="result"> </div> </div> </div> </body> </html>
solution2
0 2015-05-28 01:07:58
You can do this by setting up an element you wish to contain the text.
document.getElementById("result").innerHTML = "The volume of this cube is " +result1 + " and " + result2;
To do this you need set the element up with an ID of result.
This line of code is calling the function getElementByID to get the element, which then lets you change its innerHTML property.
The element you assign to this can be whatever you want it to be.
solution3
0 ACCPTED 2015-05-28 01:08:09
add an element to your html, something like this:
<div id="results"></div>
Then instead of using an alert, you can do something along the lines of this:
document.getElementById("results").innerHTML = "The volume of this cube is " +result1 + " and " +result2;
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.