JavaScript - 如何更改 innerHTML答案

【问题标题】：JavaScript - How to Change innerHTMLJavaScript - 如何更改 innerHTML
【发布时间】：2016-01-02 13:22:26
【问题描述】：

我正在用 JavaScript 函数争论输入 DOM 元素的值。

这个简单的化学应用程序有两个输入 DOM 元素，可以保存两个值。

如果 document.getElementById("Hydrogen").value 为 = 2 和
document.getElementById("Oxygen").value 为 = 1，然后 document.getElementById("Molecule").innerHTML 应该 = "WATER"。

请查看 JavaScript。

为什么“Molecule()”函数不起作用？

-- 谢谢

<!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>

【问题讨论】：

标签： javascript html innerhtml

【解决方案1】：

它不起作用，因为Molecule 方法只在页面加载时运行一次（当所有值都为空时）。

onload="Molecule()"

如果您希望页面响应用户输入，您需要将事件侦听器添加到作为计算一部分的input 字段。尝试删除 onload 事件侦听器并将 onclick="Molecule()" 添加到您的 Hydrogen 和 Oxygen input 元素。

【讨论】：

更好的是，在所有其他函数的末尾调用Molecule()。（这似乎是改变状态的主要方法）