JavaScript - как изменить innerHTML - Отличная библиотека

Я утверждаю значения входных элементов DOM с функциями JavaScript.JavaScript - как изменить innerHTML

Это простое приложение для химии имеет два входных элемента DOM, которые могут содержать два значения.

Если ("Водород"). Значение document.getElementById является = 2 и
document.getElementById ("Кислород"). Значение = 1, то document.getElementById ("Молекула") .innerHTML должен = "ВОДА".

Посмотрите на 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>

источник

2015-10-05 Cody Taylor

Это не работает, потому что метод Molecule запускается только один раз при загрузке страницы (когда все значения равны нулю).

onload="Molecule()"

Если вы хотите, чтобы страница реагировать на ввод пользователя нужно добавить обработчики событий к input полей, которые являются частью расчета. Попробуйте удалить прослушиватель событий onload и добавьте onclick="Molecule()" к вашим Hydrogen и Oxygeninput элементов.

источник

2015-10-05 19:27:36 pherris

Еще лучше, вызовите 'Molecule()' в конце каждой другой функции. (Похоже, что это основной метод изменения состояния) – Katana314

Это сработало! :) Спасибо, pherris –

JavaScript - как изменить innerHTML

ответ

Смежные вопросы