getElementByID（）。innerHTML从来不适用于我

我似乎无法理解document.getElementById("").innerHTML alert("")的工作原理 - 所以函数很好。getElementByID（）。innerHTML从来不适用于我

在每一个大学运动我这样做的远，我试图用getElement ... innerHTML，因为我觉得这是做事情比alert/document.write的更为有效的方式，而且......它永远不会奏效，直到永远。

我是否缺少一些关于它的关键规则？

这里是一个非常“早期天”的例子，没有工作：

<html> 
<head> 
<title>total of 3</title> 
<script language="javascript"> 
    function total() 
    { 
     var number1 = 0; 
     var number2 = 0; 
     var number3 = 0; 
     var total = 0; 

     number1 = parseInt(document.m.number1.value); 
     number2 = parseInt(document.m.number2.value); 
     number3 = parseInt(document.m.number3.value); 
     total = number1 + number2 + number3; 

     alert("your total is " + total); 
     document.getElementById("a").innerHTML = total; 

    } 
</script> 

</head> 

<body> 
<form name="m"> 
<table border="1" width="500" height="100"> 
<tr> 
    <td>First Number</td> 
    <td><input name="number1" type="text"></td> 
</tr> 
<tr> 
    <td>Second Number</td> 
    <td><input name="number2" type="text"></td> 
</tr> 
<tr> 
    <td>Third Number</td> 
    <td><input name="number3" type="text"></td> 
</tr> 
<tr> 
    <td align="right"><input type="Reset" name="Reset" id="Reset" value="Reseet"></td> 
    <td><input type="submit" name="Submit" id="Submit" value="Submit" onClick="total()"></td> 
</tr> 
</table> 
</form> 
<p id="a"></p> 
</body> 
</html>

来源

2016-01-23 bodovix

它正在工作，但是当你使用''按钮而不停止它的默认行为（提交表单）时，页面被重新加载（因为缺少'action'属性） - 用空的段落'a' – Andreas

更改您输入类型从提交到输入键入按钮 .....

<td><input type="button" name="Submit" id="Submit" value="Submit" onClick="total()"></td>

，因为使用提交您更新页面，所以你不能看到你的结果..

，并使用按钮页面不会刷新，你会得到你的结果：对

来源

2016-01-23 17:19:16

最简单的解决方案通常是最好的！这解决了我的问题，我确定其他人也会这样，但这是最简单的，惊人的响应时间，来自所有人，谢谢！ – bodovix

这是因为你提交一个表单，所以当你点击该按钮它刷新页面，从而不运行写入页面的脚本部分。

警报暂停脚本的执行（并暂停刷新），这就是警报部分工作的原因。

为了防止窗体刷新页面，您应该在提交事件中防止默认值。

因此，对于您的总功能：

function total() 
{ 

    var number1=0; 
    var number2=0; 
    var number3=0; 
    var total=0; 

    number1=parseInt(document.m.number1.value); 
    number2=parseInt(document.m.number2.value); 
    number3=parseInt(document.m.number3.value); 
    total=number1+number2+number3; 

    alert("your total is "+total); 
    document.getElementById("a").innerHTML= total; 
    event.preventDefault(); 

}

虽然这应该在Chrome中正常工作，一些浏览器可能需要您与函数一起传递事件。所以把它作为参数发送给你的总功能。

来源

2016-01-23 17:08:55

发生这种情况的原因是您使用的是提交按钮，因此您的表单会提交并导致页面更改（或因为您没有任何操作而重新加载）。

因为它重新加载，你已经失去了你已经改变的任何东西。您可以使用preventDefault来停止事件的默认操作，在这种情况下阻止提交表单。

由于您正在使用内联js，您必须将事件对象传递给您的总功能，然后调用preventDefault（）。

<input type="submit" name="Submit" id="Submit" value="Submit" onClick="total(event)">

，然后在JS

function total(event){ 
    event.preventDefault(); 
    //...rest of your code 
}

演示

function total(event){ 
 
    event.preventDefault(); 
 
    var number1=0; 
 
    var number2=0; 
 
    var number3=0; 
 
    var total=0; 
 

 
    number1=parseInt(document.m.number1.value); 
 
    number2=parseInt(document.m.number2.value); 
 
    number3=parseInt(document.m.number3.value); 
 
    total=number1+number2+number3; 
 

 
    alert("your total is "+total); 
 
    document.getElementById("a").innerHTML= total; 
 

 
}

<form name="m"> 
 
<table border="1" width="500" height="100"> 
 
<tr> 
 
    <td>First Number</td> 
 
    <td><input name="number1" type="text"></td> 
 
</tr> 
 
<tr> 
 
    <td>Second Number</td> 
 
    <td><input name="number2" type="text"></td> 
 
</tr><tr> 
 
    <td>Third Number</td> 
 
    <td><input name="number3" type="text"></td> 
 

 
</tr><tr> 
 
    <td align="right"><input type="Reset" name="Reset" id="Reset" value="Reseet"></td> 
 
    <td><input type="submit" id="Submit" name="submit" value="Submit" onClick="total(event)"></td> 
 
</tr> 
 
</table> 
 
</form> 
 
<p id="a"></p>

来源

2016-01-23 17:09:30

或者简单地改变bu的类型tton'' – Andreas

你的代码工作，它不改变内部HTML，因为submit按钮刷新页面。尝试：

<input type="submit" name="Submit" id="Submit" value="Submit" onClick="total();return false;" >

来源

2016-01-23 17:10:12 YounesM

-1

参考更正后的代码，在这里它的工作，但你需要以其他方式把一些延迟时间，它只是闪烁一次，而

<html> 
<head> 
<title>total of 3</title> 


</head> 

<body> 
<form name="m"> 
<table border="1" width="500" height="100"> 
<tr> 
    <td>First Number</td> 
    <td><input name="number1" type="text"></td> 
</tr> 
<tr> 
    <td>Second Number</td> 
    <td><input name="number2" type="text"></td> 
</tr><tr> 
    <td>Third Number</td> 
    <td><input name="number3" type="text"></td> 

</tr><tr> 
    <td align="right"><input type="Reset" name="Reset" id="Reset" value="Reseet"></td> 
    <td><input type="submit" name="Submit" id="Submit" value="Submit" onClick="total()"></td> 
</tr> 
</table> 
<p id="a"></p> 
</form> 
<script > 

function total() 
    { 

var number1=0; 
var number2=0; 
var number3=0; 
var total=0; 

    number1=parseInt(document.m.number1.value); 
    number2=parseInt(document.m.number2.value); 
    number3=parseInt(document.m.number3.value); 
    total=number1+number2+number3; 
alert("your total is "+total); 

document.getElementById("a").innerHTML = total; 

    } 


</script> 

</body> 
</html>

来源

2016-01-23 17:16:35

“_Refer the corrected code ..._”脚本也可以在页面的''中使用。 “_...但是你需要延迟一些时间，否则它就会闪烁......”这是实际的问题 - 但延迟在这里没有任何用处。 – Andreas

getElementByID（）。innerHTML从来不适用于我

回答

相关问题