저녁 식사 비용 계산기가 문자열을 정수로 변환하는 데 문제가 있습니다

Question

저는 parseInt를 사용하여 .values를 문자열에서 숫자로 변환하고 있습니다. 그러나 사용자가 10 진수 값을 입력하면 출력은 NaN입니다. 여기 내 코드 :

Dinner Cost:<input type="text" id="cost" /><br /><br /> 
Tax Rate:<input type="text" id="taxRate" /><br /><br /> 

<button id="btn">Determine Total Costs</button><br /><br /> 

<p id="para"></p> 

document.getElementById("btn").addEventListener('click', totalCosts); 

function totalCosts() { 

    var dinnerCosts = document.getElementById("cost").value; 
    var taxRate = document.getElementById("taxRate").value; 
    taxRate = parseInt(taxRate); 
    dinnerCosts = parseInt(dinnerCosts); 


    var taxCost = dinnerCosts * taxRate; 
    var totalCost = dinnerCosts + taxCost; 

    return document.getElementById("para").innerHTML = "Your dinner cost " + dinnerCosts + ", your tax costs " + taxCost + ", for a total cost of " + totalCost; 
} 

내가 뭘 잘못하고 있니? 이 기본 문자열을 parseInt 대신 숫자로 변환하는 더 합리적인 방법이 있습니까?

감사합니다.

Answer 1

사용에서는 parseFloat을 (사용할 수 있습니다 이 Javascript 시나리오에서 강력한 유형 확인을 수행하는 것은 피하는 것입니다.

• un
• Lnull는
• NaN이 여기

값 간단하고 빠른 개요입니다 값 (사전 일명) 자바 스크립트 객체에 선언 된 변수

선언되지 않은 속성을 :보다

// 
var vfftest  = 0.05;      // float 
var viitest  = 3000;      // integer 
var vssblank  = '';       // empty string 
var vssnonblank = 'hello';     // non-empty string 
var vddempty  = {};       // dictionary with no name-value pairs 
var vddnonempty = {'alpha':1,'bravo':'two'}; // dictionary with name- value pairs 
var vnull   = null;      // null 

// check parseFloat 
console.log(parseFloat(vssnonblank)); // NaN 
console.log(parseFloat(vssblank)); // NaN 
console.log(parseFloat(vfftest));  // 0.05 
console.log(parseFloat(viitest));  // 3000 
console.log(parseFloat(vnull));  // NaN 
console.log(parseFloat(vddempty)); // NaN 
console.log(parseFloat(vddnonempty)); // NaN 
console.log(parseFloat(vnoExisto)); // EXCEPTION 

기타 참고하시기 바랍니다 this 링크를 클릭하고 이러한 전환에서 예외를 피하는 방법에 대해 알아보십시오.

Answer 2

Number 생성자를 리터럴 번호를 반환하도록 인스턴스화하지 않고 직접 사용할 수 있습니다. taxRate = parseFloat(taxRate);

당신이 그런 conversions.One 쉬운 방법에서 예외를 피해야한다 더 나은 프로그래밍 연습으로 : 또는 대신으로 parseInt() 사용의) parseFloat

document.getElementById("btn").addEventListener('click', totalCosts); 
 

 
function totalCosts() { 
 

 
    var dinnerCosts = document.getElementById("cost").value; 
 
    var taxRate = document.getElementById("taxRate").value; 
 
    taxRate = Number(taxRate); 
 
    dinnerCosts = Number(dinnerCosts); 
 

 

 
    var taxCost = dinnerCosts * taxRate; 
 
    var totalCost = dinnerCosts + taxCost; 
 

 
    return document.getElementById("para").innerHTML = "Your dinner cost " + dinnerCosts + ", your tax costs " + taxCost + ", for a total cost of " + totalCost; 
 
}

Dinner Cost:<input type="text" id="cost" /><br /><br /> 
 
Tax Rate:<input type="text" id="taxRate" /><br /><br /> 
 

 
<button id="btn">Determine Total Costs</button><br /><br /> 
 

 
<p id="para"></p>