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

这样一来，你就不会需要创建一个额外的节点，以保存结果数据。