如何在同一页面上显示javascript结果
[英]How to display javascript results on the same page
问题描述
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 个解决方案
解决方案1
0 2015-05-28 01:07:28
Create a div under the button and populate the innerHTML of the div : 在按钮下创建一个div并填充div的innerHTML ：
<!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>
解决方案2
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. 为此，您需要将元素设置为结果ID。
This line of code is calling the function getElementByID to get the element, which then lets you change its innerHTML property. 此行代码调用函数getElementByID来获取元素，该元素然后使您可以更改其innerHTML属性。
The element you assign to this can be whatever you want it to be. 您分配给它的元素可以是您想要的任何元素。
解决方案3
0 已采纳 2015-05-28 01:08:09
add an element to your html, something like this: 在您的html中添加一个元素，如下所示：
<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;
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.