JavaScript結果不顯示在同一頁面

Question

function result() 
{ 
    var a, b, c; 
    a = 10; 
    b = 20; 
    c = a+b; 
    document.write("The result of a+b is" + c); 
} 

<input type="button" value="Result" onclick=result();> 

我是JavaScript新手，正在逐步學習。我試着上面的例子，它的工作正常，但點擊按鈕結果後不顯示在同一個窗口。

我應該使用innerHTML嗎？但我怎麼用我不知道。使用innerHTML適合編程？

Answer 1

如果是出於調試目的，請使用console.log(value)，否則，請將該值保存在innerHTML中。

console.log("The result of a+b is" + c); 
alert("The result of a+b is" + c); // For very old browsers. 

使用innerHTML屬性：

document.getElementById('{id}').innerHTML = "The result of a+b is" + c; 

Answer 2

試試這個代碼

function result() 
{ 
    var a, b, c; 
    a = 10; 
    b = 20; 
    c = a+b; 
    console.log("The result of a+b is" + c); 
} 

Answer 3

任何document.write（）的網頁完成加載之前，必須被調用，否則它會打開一個新頁面（見this link尋求幫助）所以也許這就是你的問題

你可能要像做

function result() 
{ 
    var a, b, c; 
    a = 10; 
    b = 20; 
    c = a+b; 
    var content = document.getElementById('result_div').innerHTML; 
    content += "The result is ..." ; 
} 

Answer 4

這將結果寫在一個單獨的元素，而不會覆蓋整個文檔：

<script type="text/javascript"> 

    function result() 
    { 
     var a, b, c; 
     a = 10; 
     b = 20; 
     c = a+b; 
     var result = document.getElementById("result"); 
     result.innerHTML = "The result of a+b is" + c;  
    } 

</script> 

<input type="button" value="Result" onclick=result();> 
​<div id="result"></div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ 

看到http://jsfiddle.net/AcTM2/

Answer 5

更改方法結果：

function result() 
{ 
var a, b, c; 
a = 10; 
b = 20; 
c = a+b; 
document.getElementById('result').innerHTML="The result of a+b is" + c; 
} 

然後放在身體一個ID結果的div：

<div id="result"></div> 

Answer 6

document.write總是啓動一個新頁面，除非當前正在加載一個頁面。一旦當前頁面加載完成後，任何document.write語句都將寫入NEXT網頁以顯示，而不是當前頁面，因爲該頁面已經寫入。

使用DOM方法像這樣的：

<script type="text/javascript"> 

    function result() 
    { 
     var a, b, c; 
     a = 10; 
     b = 20; 
     c = a+b; 
     document.getElementById('foo').innerHTML = "The result of a+b is" + c; 
     return false 
    } 

</script> 
<span id="foo"></span> 
<input type="button" value="Result" onclick="return result();"> 

Answer 7

嘗試

function result() 
{ 
    var a, b, c; 
    a = 10; 
    b = 20; 
    c = a+b; 
    var result = "The result of a+b is" + c; 
    document.body.appendChild(document.createTextNode(result)); 
    document.body.appendChild(document.createElement("br")); 
} 

這樣一來，你就不會需要創建一個額外的節點，以保存結果數據。