javascript - 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 语句将写入要显示的下一个网页，而不是当前网页，因为该网页已经写入。

使用这样的 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

改变方法结果：

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 4

尝试

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

这样，您无需创建额外的节点来保存结果数据。

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();>
​&lt;div id="result"></div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

见http://jsfiddle.net/AcTM2/

Answer 6

如果是出于调试目的，请使用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 7

试试这个代码

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