자바 스크립트가 보이지 않음

Question

JavaScript를 사용하고 있습니다. JS 함수를 호출하는이 html 양식을 만들었습니다. 이 함수는 간단한 계산을 수행하고 innerHTML을 사용하여 HTML에 전체 값을 반환해야하지만 어떤 이유로 작동하지 않습니다. 누군가가 문제가 무엇인지 찾아 낼 수 있습니까? 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에만 액세스합니다. 출력 부분에 관해서는

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

:

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

가 .value을 제거 당신은 실제로 입력의 "값"을 얻기 위해 .value을 수행해야합니다 이 경우에만 .innerHTML을 사용하십시오.

위와 마찬가지로 document.getElementById("output1")으로 DIM에 액세스하고 innerHTML 값을 설정합니다.

전체 코드 샘플 : DOM 액세스 보정 후에 가변 value 입력 요소에 입력 된 텍스트의 스트링 값을 포함 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

참고. 숫자를 문자열로 연결하는 대신 숫자를 함께 더하기 위해 더하기 숫자로 변환해야합니다. 의 유형으로

value = parseInt(value); 

그렇지 않으면 자바 스크립트는 "값"을 처리 할 수 ​​있습니다 : 한 가지 해결책은 당신이 라인을 추가해야이 두

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

Answer 3

으로 라인을

if (value <= 0) { 

를 대체하는 것입니다 끈.

여기에 전체 코드

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>