Как создать вызов функции в JavaScript с XHTML?

Вот код, который у меня есть. У меня возникли проблемы с получением кода для выполнения функции и правильного вывода данных из функции в текстовое поле "Total BMI", которое я искал часами, пытаясь выяснить это. это задание класса, у меня возникли проблемы с ним, потому что я не понимаю синтаксис, используемый в javascript для выполнения всего, что мне нужно. Мой учитель буквально не помогает, так как это наше второе задание, и у него никогда не было лекции о том, как даже начать писать код в Javascript. Спасибо за любую помощь, которую может оказать любой.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Strict//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>BMI Calculator</title>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
<link rel="stylesheet" href="BMI.css" type="text/css" />
<script type="text/javascript">
/* <![CDATA[ */
function calcBMI(Height, Weight) {
     var h = parseInt(height);s
     var w = parseInt(Wieght);
     var TotalBMI = w * 703 / (h * h);
     document.write ("Your BMI is: " + TotalBMI)  
}

/* ]]> */
</script>

</head>
<body>
<h2>BMI Calculator</h2>
<form action="" name="BMI">
<table border="1">
<tr><td>Height :(in)</td><td><input type="text" name="Height" value="" /></td></tr>
<tr><td>Weight :(lbs)</td><td><input type="text" name="Weight" value="" /></td></tr>
<tr><td><input type = "button" value = "Calculate" onclick = "calcBMI('Height', 'Weight')"></td></tr>
<tr><td>Total BMI:</td><td><input type="text" name="TotalBMI" value="" /></td></tr>
</table>
</form>
</body>
</html>
Источник

2 ответа

Решение

Сначала давайте посмотрим на это:

onclick = "calcBMI('Height', 'Weight')"

Ваши передаваемые строки здесь, в которые нельзя преобразовать в целое число (по крайней мере, не тот тип, который вы ожидаете). Похоже, вы хотите получить значения ваших элементов с именами Height а также Width, Ну, это хорошее применение idкроме name"S.

<tr><td>Height :(in)</td><td><input type="text" id="Height" value="" /></td></tr>
<tr><td>Weight :(lbs)</td><td><input type="text" id="Weight" value="" /></td></tr>
...
<tr><td>Total BMI:</td><td><input type="text" id="TotalBMI" value="" /></td></tr>

Теперь не нужно никаких параметров для calcBMI() функции, потому что мы можем получить их прямо так:

document.getElementById("Height").value;

Итак, вот изменения в вашей функции:

function calcBMI() {
    var h = parseInt(document.getElementById("Height").value);
    var w = parseInt(document.getElementById("Weight").value);
    var TotalBMI = w * 703 / (h * h);
    document.getElementById("TotalBMI").value = "Your BMI is: " + TotalBMI;  
}

Обратите внимание, я изменил document.write() в .innerHTML, Потому что работает document.write() после загрузки страницы перезаписывает DOM.

Также обратите внимание, что отправка <form> обновит вашу страницу. Похоже, вам действительно не нужно <form>, поэтому я рекомендую просто удалить его. Либо так, либо запретите поведение обновления страницы по умолчанию.

Источник

Вот,

onclick = "calcBMI('Height', 'Weight')"

вы передаете струны 'Height' а также 'Weight', хотя вы хотите передать значения связанных полей. Формы не работают таким образом, так что вместо этого вы должны полностью избавиться от параметров,

onclick = "calcBMI()"

и в функции используйте обход DOM, чтобы получить нужные вам значения. Сначала добавьте немного id атрибуты полей, которые вас интересуют, например,

<tr><td>Height :(in)</td><td><input type="text" name="Height" value="" id="height" /></td></tr>
<tr><td>Weight :(lbs)</td><td><input type="text" name="Weight" value="" id="width" /></td></tr>

тогда получите их значение так:

function calcBMI() {
     var h = parseInt(document.getElementById('height').value);
     var w = parseInt(document.getElementById('weight').value);
     var TotalBMI = w * 703 / (h * h);
     document.write ("Your BMI is: " + TotalBMI)  
}
Источник
Другие вопросы по тегам