Область функции параллелограмма, javascript

Question

<h2>Area of a Parallelogram (A = base * height)</h2> 
    <form> 
    <label class = "left">Base: </label> <input id = "parallelogramAreaBase" type = "text" class = "right" /> <br />  
    <label class = "left">Height: </label> <input id = "parallelogramAreaHeight" type = "text" class = "right" /> <br /> 
    <label class = "left">Answer: </label> <input id = "answerAreaParallelogram" type = "text" class = "right" /> <br /> 
    <input type = "submit" value = "Submit" onclick = "areaParallelogramFunction(); return false" /> 
    </form> 

function areaParallelogramFunction(base, height) 
{ 
    base = document.getElementById("parallelogramAreaBase").value; 
    height = document.getElementById("parallelogramAreaHeight").value; 
    var answer = base * height; 
    document.getElementById("answerAreaParallelogram").value = answer; 
} 

Я не уверен, почему этот код не работает. Похоже, простая программа, пожалуйста, помогите.

Answer 1

Я знаю, что это ответ блок, но я хотел бы взять это пространство, чтобы обеспечить некоторое обучение для вас вместо того, чтобы решить вашу проблему, как она стоит. Это новое решение должно сделать правильный результат более понятным для вас (надеюсь).

Я начал, изменив HTML очень немного:

<h2>Area of a Parallelogram (A = base * height)</h2> 
<form id="areaForm"> 
    <label class="left">Base: </label> <input name="base" type="text" class="right" /><br />  
    <label class="left">Height: </label> <input name="height" type="text" class="right" /><br /> 
    <input type="submit" value="Solve" /><br /> 
    <label class="left">Answer: </label> <input name="answer" type="text" class="right" disabled /> 
</form> 

Так что же я могу изменить? Сначала вы могли заметить, что я положил ответ после кнопки. Это был выбор стиля для меня, поскольку Ответ не является частью формы, а вместо этого местом для показа результата. Также не то, что я добавил disabled. Это связано с тем, что пользователь не должен редактировать ответ, ответ представлен программой и не является редактируемым полем.

Еще одна вещь, которую вы заметите, - это те невероятно длинные, описательные идентификаторы, и вместо этого короткие имена. Имена будут играть определенную роль в JavaScript и облегчат нам жизнь. Также обратите внимание, что я добавил id в форму, описывающую форму. Это также относится к полям в форме. Поле base имеет только одно значение здесь, не нужно для areaFormBaseValue или подобного имени стиля.

Следующая страница - это JavaScript.

// Let's fetch the form to begin with, we'll be using it. 
// Notice the use of 'var', ALWAYS use 'var' when you 
// create a new variable. ALWAYS. 
var form = document.getElementById("areaForm"); 

// Let's add the event a much better way, mingling logic 
// (javascript) in your HTML is considered bad practice. 
form.onsubmit = function() { 
    // We chain the var statement with a comma, this is the 
    // exact same as making two seperate var statements. 
    // Now you can see we also calculate the result in this var 
    // statement. 
    var base = parseFloat(form.base.value), 
     height = parseFloat(form.height.value), 
     answer = base * height; 

    form.answer.value = answer; 

    // We return false here to prevent the form to be submitted naturally 
    return false; 
}; 

я удалить ссылку на вызов функции формирования HTML - это неодобрением в современном веб-разработки и является частью «разделения проблем». HTML - это место, где вы определяете макет своего представления, CSS позволяет определить, как представление отображается пользователю, а JavaScript определяет, как представление может взаимодействовать или мутировать. Все эти данные должны быть полностью отделены друг от друга - это означает отсутствие встроенных стилей или встроенного JavaScript (вместо этого используйте теги <style> и <script>).

Я включил некоторые комментарии, чтобы вы могли видеть, что происходит. Но то, что не включено в комментарии, - это доступ к полям. Обратите внимание, как только мы получаем элемент формы, мы можем просто получить доступ к этим полям по их имени . Это делает функцию очень маленькой (характер мудрая), которая также делает ее намного легче читать и следовать.

Я также добавил в звонки parseFloat, который примет строку (из поля type="text") и преобразует ее в число с плавающей запятой. Важно преобразовать значение в число. Это будет (если вы добавите еще какой-нибудь код), позволит вам определить, был ли введен неверный ввод и явно ли он ясно, каковы ваши намерения с кодом.

Наконец, вот ссылка на рабочий Fiddle вы можете играть с

SIDE ПРИМЕЧАНИЕ

Ваша кнопка определяется как "submit" вход, который собирается заставить отправить форму, щелчок будет игнорируются. Вы можете попробовать, сделав вместо этого "button", что делает ненужным ненужный return false;, но я настоятельно рекомендую вам просмотреть приведенные выше фрагменты и изучить современную разработку JavaScript и избежать ошибок, которые могут возникнуть в результате внедрения всей этой гадости в ваш HTML.

Answer 2

Ваш код работает как чемпион. Возможно, что-то не так с структурой вашего HTML-файла, но мы не можем его увидеть, потому что вы разместили только фрагменты.

W3C validator и HTML5 validator - ваши друзья.

Затем узнайте, как использовать консоль JavaScript. Если вы этого не делаете и используете другие инструменты тестирования, такие как валидатор, вы слишком много работаете.

Answer 3

Ваш JavaScript должен оставаться в тегах <script>!

<h2>Area of a Parallelogram (A = base * height)</h2> 
    <form> 
    <label class = "left">Base: </label> <input id = "parallelogramAreaBase" type = "text" class = "right" /> <br />  
    <label class = "left">Height: </label> <input id = "parallelogramAreaHeight" type = "text" class = "right" /> <br /> 
    <label class = "left">Answer: </label> <input id = "answerAreaParallelogram" type = "text" class = "right" /> <br /> 
    <input type = "submit" value = "Submit" onclick = "areaParallelogramFunction(); return false" /> 
    </form> 

<script> 
function areaParallelogramFunction(base, height) 
{ 
    base = document.getElementById("parallelogramAreaBase").value; 
    height = document.getElementById("parallelogramAreaHeight").value; 
    var answer = base * height; 
    document.getElementById("answerAreaParallelogram").value = answer; 
} 
</script>