Проблема с простым сценарием вычисления

Question

Я пытаюсь сделать действительно простой калькулятор для своего сайта.

В принципе, я хочу, чтобы люди могли поместить свой вес в текстовое поле, нажмите «Рассчитать дозу», а затем сценарий умножит их вес на число, которое я установлю для каждой страницы.

Вот что я имею прямо сейчас. Он не только не работает, но также отключает отображение одного из моих объявлений:

<div> 
<input id="inputweight" type="text" /> 
<input type="button" value="Calculate Dose" onClick="calculate()"> 
<input id="result" /> 
</div> 

<script> 

    function calculate() { 
    var weight = document.getElementById('inputweight').value; 
    var result = document.getElementById('result'); 
    var dosage = weight.value * 1; 
    result.value = dosage; 

} 
</script> 

Что в этом плохого?

Answer 1

У вас не хватает закрывающий тег /> в кнопке

<input type="button" value="Calculate Dose" onClick="calculate()"/> 

Вы уже сохраненное значение веса

var weight = document.getElementById('inputweight').value; 

Так что вам не нужно это var dosage = weight.value * 1;

Так используйте вар dosage = weight * 1;

function calculate() { 
    var weight = document.getElementById('inputweight').value; 
    var result = document.getElementById('result'); 
    var dosage = weight * 1; 
    result.value = dosage; 
} 

Answer 2

эта линия:

var weight = document.getElementById('inputweight').value; 

и это:

var dosage = weight.value * 1; 

не работают вместе хорошо. Вы извлекаете значение, а затем значение этого ... которое не может работать.
Итак, замените вторую линию:

var dosage = weight * 1; 

Помимо: Вы должны проверить консоль на наличие ошибок, он должен показать там.

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

Answer 3

Просто обновите эту строку (удалить атрибут value который уже извлеченные выше):

var dosage = * 1; 

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

var dosage = parseInt(weight, 10) * 1; 

Answer 4

В вашем блоке кода вам не хватает закрытия / в конце второго входного заявления. Который должен дать вам проблему в вашем html.

<input type="button" value="Calculate Dose" onClick="calculate()"/> 

Вы также не нуждаетесь в весовом значении в третьей строке своей функции.Вместо этого он должен быть:

var dosage = weight * 1; 

Answer 5

Fiddle демонстрируя вашего пример модифицирован для работы: http://jsfiddle.net/x38ommxs/

function calculate() { 
 
    var weight = document.getElementById('inputweight').value; 
 
    var result = document.getElementById('result'); 
 
    var dosage = weight * 1; 
 
    result.value = dosage; 
 
}

<div> 
 
    <input id="inputweight" type="text" /> 
 
    <input type="button" value="Calculate Dose" onClick="calculate()" /> 
 
    <input id="result" /> 
 
</div>

Добавлена ​​недостающее закрывающего тега на кнопке

Измененной дозировки умножить значение, хранящееся в весе на единицу.