JavaScript

Question

我正在用 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>

Answer 1

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

onload="Molecule()"

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

JavaScript - 如何更改 innerHTML

JavaScript - How to Change innerHTML

html

innerhtml