Javascript에서 숫자를 추가 할 때 문제가 있습니까?

Question

각 도서를 확인할 때 일부 도서의 가격을 추가하고 싶지만 문제가 있습니다. 그냥 문자열을 추가합니다. 예를 들어 책 (10 $)을 선택하면 가격이 10이되고 다른 책 (20 $)을 선택하면 책이 1020이됩니다.

내 코드 : 도서 1 권 :

책이 들어

<input 
    name="bookList" 
    type="checkbox" 
    id="bookList_1" 
    onChange=" 
    if (document.getElementById('bookList_1').checked) { 
    document.getElementById('priceDes').innerHTML=' total: '; 
    document.getElementById('price').innerHTML+=10; 
    } 
    " 
    value="book1" 
> 

:

<input 
    name="bookList" 
    type="checkbox" 
    id="bookList_2" 
    onChange=" 
    if (document.getElementById('bookList_2').checked) { 
     document.getElementById('priceDes').innerHTML=' total: '; 
     document.getElementById('price').innerHTML+=20; 
    } 
    " 
    value="book1" 
> 

그리고 가격과 priceDes는 <p> 태그 ... 당신의 솔루션에 대한 감사는)

Answer 1

document.getElementById('price').innerHTML=Number(document.getElementById('price').innerHTML)+20;

Answer 2

InnerHTML은 문자열입니다. + 연산자는 JavaScript의 문자열 연결 연산자이기도합니다. 그래서, 먼저 값을 "캐스팅"하십시오.

자바 스크립트로 숫자 문자열을 "캐스팅"쉬운 방법 : 곱셈 1 :

var rv = 1*a.innerHTML + 1*b.innerHTML; 

또는 숫자 생성자를 사용하는 대신에, 문자열을 연결하고 있기 때문에

var rv = Number(a.innerHTML) + Number(b.innerHTML); 

Answer 3

그건를 숫자 추가. '10'+ '20'은 '1020'를 제공하지 (30)

보십시오 : 당신의 p 태그가 HTML 내부 번호 만있는 경우 document.getElementById('price').innerHTML=parseInt(document.getElementById('pr‌​ice').innerHTML)+10;

그래도이 조심, 그것은 단지 작동합니다. parseInt('10$')은 10이지만, parseInt('$10')은 NaN이된다. number-type input 태그로 실험 할 수 있습니다.