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從來不適用於我

回答

相關問題