JavaScript - 如何更改innerHTML

我正在爭論使用JavaScript函數的輸入DOM元素的值。JavaScript - 如何更改innerHTML

這個簡單的化學應用程序有兩個輸入DOM元素，可以容納兩個值。

如果的document.getElementById（「氫」）。值= 2 和
的document.getElementById（「氧」）。值= 1，則的document.getElementById（「分子」） .innerHTML應該=「WATER」。

請看JavaScript。

爲什麼「分子（）」功能不起作用？

- 感謝

<!doctype> <html> 

<head> 

<!-- JavaScript (Button Controls) --> 

<script> 

function deleteHydrogen() { document.getElementById("Hydrogen").value--;} 

function addHydrogen() {document.getElementById("Hydrogen").value++ ;} 

function deleteCarbon() { document.getElementById("Carbon").value--; } 

function addCarbon() { document.getElementById("Carbon").value++;} 

function deleteOxygen() {document.getElementById("Oxygen").value--; } 

function addOxygen() { document.getElementById("Oxygen").value++;} 

function Molecule() { 
    if ((document.getElementById("Hydrogen").value=="2") && 
(document.getElementById("Oxygen").value=="1")) 
    {document.getElementById("Molecule").innerHTML="WATER"; } } 

</script> 
</head>

<body onload="Molecule()"> 

<input type="text" id="Hydrogen" style="width:160px; height:90px; font- 
size:50px; text-align:center;" value="0" /> 

<input type="text" id="Carbon" style="width:160px; height:90px; font- 
size:50px; text-align:center;" value="0" /> 

<input type="text" id="Oxygen" style="width:160px; height:90px; font- 
size:50px; text-align:center;" value="0" /> 


<img id="delete_H" src="delete_H.png" style="width:80px; height:80px;" 
onmousedown="deleteHydrogen()"/> 

<img id="add_H" src="add_H.png" style="width:80px; height:80px;" 
onmousedown="addHydrogen()" /> 

<img id="delete_C" src="delete_C.png" style="width:80px; height:80px;" 
onmousedown="deleteCarbon()"/> 

<img id="add_C" src="add_C.png" style="width:80px; 
height:80px;"onmousedown="addCarbon()"/> 

<img id="delete_O" src="delete_O.png" style="width:80px; height:80px;" 
onmousedown="deleteOxygen()"/> 

<img id="add_O" src="add_O.png" style="width:80px; height:80px;" 
onmousedown="addOxygen()"/> 


<p id="Molecule" style="width:510px; height:80px; font-size:50px; 
color:white; text-align:center; background:gray;"> molecule </p> 


</body> </html>

來源

2015-10-05 Cody Taylor

它不工作，因爲Molecule方法只運行一次加載網頁時（當所有的值都爲空）。

onload="Molecule()"

如果你想在頁面響應用戶輸入您需要添加事件偵聽器的input字段是計算的一部分。嘗試刪除onload事件監聽器並將onclick="Molecule()"添加到您的Hydrogen和Oxygeninput元素。

來源

2015-10-05 19:27:36 pherris

更好的是，在每個其他函數的末尾調用'Molecule（）'。（這似乎是改變國家的主要方法） – Katana314

它的工作！ :)謝謝你，帕里斯 –

JavaScript - 如何更改innerHTML

回答

相關問題