JavaScript -如何修改innerHTML

JavaScript - How to Change innerHTML

本文关键字：修改 innerHTML 何修改 JavaScript      更新时间：2023-09-26

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

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

如果document.getElementById("Hydrogen")。值= 2和
. getelementbyid("氧气")。值= 1，然后. 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>

这不起作用，因为Molecule方法只在页面加载时运行一次(当所有值为null时)。

onload="Molecule()"

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

相关文章：