Javascript не отображается

Question

Я новичок в JavaScript. Я создал эту html-форму, которая вызывает функцию JS. Функция должна сделать простой расчет и вернуть общее значение в HTML, используя innerHTML, но по какой-то причине он не работает. Может кто-нибудь, пожалуйста, поможет найти, что с ним не так? Tks!

<form id="inputInfo" name="inputInfo"> 

    <span> Insert a value </span><br/> 
    <input type="number" id="value"> <br/> 
    <button id="send" type="submit" class="button" onclick="calculate()"> <span> Send </span></button> 

    <!--output from javascript--> 
    <p id="output1"> </p> 
    <p id="output2"> </p> 
    <p id="output3"> </p> 

</form> 

    //** Function below is into a .js file **// 

function calculate() { 

var value = document.getElementById("value"); 
var commission; 
var finalValue; 
var message; 

if(value <= 0){ 
    commission = 0; 
    finalValue = 0; 
    message = "* Value is wrong! *"; 

} else { 
    commission = value < 250 ? 25 : (value * 0.1); 
    finalValue = value + commission; 
    message = ""; 

    } 

document.getElementById("output1").value.innerHTML = finalValue; 
document.getElementById("output2").value.innerHTML = commission; 
document.getElementById("output3").innerHTML = message; 
} 

Answer 1

Линия var value = document.getElementById("value");, вы только доступ к DOM входа. Вам нужно будет сделать .value для того, чтобы фактически получить "значение" на входе:

var value = document.getElementById("value").value;

Что касается выходных частей:

document.getElementById("output1").value.innerHTML = finalValue; document.getElementById("output2").value.innerHTML = commission; document.getElementById("output3").innerHTML = message;

Снимите .value и используйте только .innerHTML.

Как и выше, вы получаете доступ к DIM с помощью document.getElementById("output1"), и вы устанавливаете значение innerHTML.

Полный пример кода: https://jsfiddle.net/u87a7e6b/

<form id="inputInfo" name="inputInfo"> 

    <span> Insert a value </span> 
    <br/> 
    <input type="number" id="value"> 
    <br/> 
    <button id="send" type="button" class="button" onclick="calculate()"> <span> Send </span></button> 

    <!--output from javascript--> 
    <p id="output1"> </p> 
    <p id="output2"> </p> 
    <p id="output3"> </p> 

</form> 

<script> 
function calculate() { 
    var value = document.getElementById("value").value; 
    var commission; 
    var finalValue; 
    var message; 

    if (value <= 0) { 
    commission = 0; 
    finalValue = 0; 
    message = "* Value is wrong! *"; 

    } else { 
    commission = value < 250 ? 25 : (value * 0.1); 
    finalValue = value + commission; 
    message = ""; 
    } 

    document.getElementById("output1").innerHTML = finalValue; 
    document.getElementById("output2").innerHTML = commission; 
    document.getElementById("output3").innerHTML = message; 
} 
</script> 

Answer 2

Обратите внимание, что после коррекции доступа DOM, переменная value содержит строковое значение текста, введенного в элемент ввода. Он должен быть преобразован в число для добавления, чтобы добавить числа вместе, а не объединять их как строки. Одно из решений заключается в замене линии

if (value <= 0) { 

с этими двумя

value = parseFloat(value); 
    if(value <= 0 || isNaN(value) { 

Answer 3

Вам нужно добавить строку:

value = parseInt(value); 

В противном случае JavaScript может относиться к «значение» в качестве типа строка.

Вот полный код

function calculate() { 
 
    var value = document.getElementById("value").value; 
 

 
    value = parseInt(value); 
 
    var commission; 
 
    var finalValue; 
 
    var message; 
 

 
    if (value <= 0) { 
 
    commission = 0; 
 
    finalValue = 0; 
 
    message = "* Value is wrong! *"; 
 

 
    } else { 
 
    commission = value < 250 ? 25 : (value * 0.1); 
 
    finalValue = value + commission; 
 
    message = ""; 
 
    } 
 

 
    document.getElementById("output1").innerHTML = finalValue; 
 
    document.getElementById("output2").innerHTML = commission; 
 
    document.getElementById("output3").innerHTML = message; 
 
}

<form id="inputInfo" name="inputInfo"> 
 

 
    <span> Insert a value </span> 
 
    <br> 
 
    <input type="number" id="value"> 
 
    <br> 
 
    <button id="send" type="button" class="button" onclick="calculate()"> <span> Send </span></button> 
 

 
    <!--output from javascript--> 
 
    <p id="output1"> </p> 
 
    <p id="output2"> </p> 
 
    <p id="output3"> </p> 
 

 
</form>