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

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 2

必須在頁面加載完成之前調用任何document.write（），否則它將打開一個新頁面（請參閱此鏈接以獲取幫助）所以這可能是你的問題

你可能想做點什么

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 3

如果是出於調試目的，請使用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 4

試試這個代碼

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

Answer 5

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

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

更改方法結果：

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

然后在body中放入一個帶有id結果的div：

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

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

這樣，您不需要創建其他節點來保存結果數據。