2015-05-28 64 views
0

我想知道如果有方法將它打印在計算按鈕下的同一頁上的文本字段中,而不是使用alert函數來顯示函數結果。以下是我迄今爲止:如何在同一頁面上顯示javascript結果

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title></title> 
 
\t <link rel="stylesheet" type="text/css" href="styles/formula_styles.css"> 
 

 
\t <script type="text/javascript"> 
 

 
\t \t var a,b,c; 
 
\t \t function setValues1() 
 
\t \t { 
 
\t \t \t a = Number(document.getElementById("a").value); 
 
\t \t \t b = Number(document.getElementById("b").value); 
 
\t \t \t c = Number(document.getElementById("c").value); 
 
\t \t } 
 

 
\t \t function and() 
 
\t \t { 
 
\t \t \t setValues1(); 
 
\t \t \t result1 = (-b + Math.sqrt(b*b -4*a*c))/(2*a); 
 
\t \t \t result2 = (-b - Math.sqrt(b*b -4*a*c))/(2*a); 
 
\t \t \t alert("The volume of this cube is " +result1 + " and " +result2); 
 
\t \t } 
 

 
\t </script> 
 

 
</head> 
 
<body> 
 

 
<nav> 
 
\t <a href="index.html">Home</a> // <a href="levels.html">Grade Levels</a> 
 
</nav> 
 

 
<div id="container"> 
 
\t <div id="formula"> \t 
 
\t \t <input type="text" id="a" placeholder="'A' Variable"/><br> 
 
\t \t <input type="text" id="b" placeholder="'B' Variable"/><br> 
 
\t \t <input type="text" id="c" placeholder="'C' Variable"/><br> 
 
\t \t <input type="button" onclick="and()" value="Calculate!"/> 
 
\t </div> 
 

 
</div> 
 
</body> 
 
</html>

+0

您可能需要狀態你有什麼問題。 – mhs

回答

0

的元素添加到您的HTML,這樣的事情:

<div id="results"></div> 

然後,而不是使用警報,你可以做沿此線的東西:

document.getElementById("results").innerHTML = "The volume of this cube is " +result1 + " and " +result2; 
0

創建按鈕下div和填充divinnerHTML

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

+0

非常感謝,這是完美的! –

0

你可以通過設置一個元素來做到這一點希望包含文本。

document.getElementById("result").innerHTML = "The volume of this cube is " +result1 + " and " + result2; 

爲此,您需要將元素設置爲結果ID。

這行代碼調用函數getElementByID來獲取元素,然後讓您更改它的innerHTML屬性。

您爲此指定的元素可以是任何您想要的元素。

相關問題