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（），否则会打开一个新页面（请参阅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 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;
}

然后在主体中放入一个带有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"));
}

这样，您无需创建其他节点来保存结果数据。

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

7 个答案: