JavaScript 结果未显示在同一页面中答案

【问题标题】：JavaScript result not showing in same pageJavaScript 结果未显示在同一页面中
【发布时间】：2012-10-09 21:22:32
【问题描述】：

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 对编程有好处吗？

【问题讨论】：

标签： javascript innerhtml

【解决方案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();">

【讨论】：

【解决方案2】：

必须在页面完成加载之前调用任何 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 ..." ;
}

【讨论】：

【解决方案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;

【讨论】：

【解决方案4】：

试试这个代码

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

【讨论】：

【解决方案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/

【讨论】：

【解决方案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>

【讨论】：

【解决方案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"));
}

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

【讨论】：

如果您想在其他位置添加文本，而不是在末尾，则在页面中创建一个元素并将 result 的值附加到该元素的 innerHTML。