我正在使用 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>
最佳答案
它不起作用，因为 Molecule 方法仅在页面加载时运行一次(当所有值都为空时)。
onload="Molecule()"
如果您希望页面响应用户输入，则需要将事件监听器添加到作为计算一部分的input 字段。尝试删除 onload 事件监听器并将 onclick="Molecule()" 添加到您的 Hydrogen 和 Oxygen 输入元素。
关于JavaScript - 如何更改innerHTML，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32956184/