Javascript - 수량 변경시 가격 조정

Question

수량을 선택해야하는 바구니에 제품을 추가하는 양식이 있습니다. 수량이 수정되면 가격을 조정하려고합니다. 여기에 내 코드입니다 :

나는 다음과 같은 시나리오에 대한 가격을 조정해야

<script> 
    function increaseValue() { 
    var value = parseInt(document.getElementById('quantity').value, 10); 
    value = isNaN(value) ? 0 : value; 
    value++; 
    document.getElementById('quantity').value = value; 
    } 

    function decreaseValue() { 
    var value = parseInt(document.getElementById('quantity').value, 10); 
    value = isNaN(value) ? 0 : value; 
    value < 1 ? value = 1 : ''; 
    value--; 
    document.getElementById('quantity').value = value; 
    } 
    </script> 

    <div class="quantity-container"> 
    <span>1</span> 
<div class="value-button" id="decrease" onclick="decreaseValue()" value="Decrease Value">-</div> 
<input type="number" id="quantity" name="quantity" value="1" /> 
<div class="value-button" id="increase" onclick="increaseValue()" value="Increase Value">+</div> 
</div> 

:

• 수량은 '증가'버튼 수량이 감소하는 경우
• 를 사용하여 증가 (하지만 제로 수량을 방지하는 경우 $ 0.00 가격)으로
• 수량은 수량 텍스트 필드

에게 probl를 사용하여 업데이트하는 경우 em은 가격이 html 사이의 숫자를 사용하여 표시되므로 가격을 업데이트하는 방법이 혼란 스럽습니다. 나는 RegEx를 사용해야 만한다고 생각하니? 난 그냥 (가격은 SQL DB에서 온) 기본 가격 (이 예에서는 $ 15.49) 가격이 같은 적이 없기 때문에 하드 코드 수 없습니다

<div id="product-price"> 
$15<sup>.49</sup> 
</div> 

Answer 1

사용 ES6의 Template literals (``). 다음을 시도해보십시오 자세한 내용

: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

function increaseValue() { 
 
    var value = parseInt(document.getElementById('quantity').value, 10); 
 
    value = isNaN(value) ? 0 : value; 
 
    value++; 
 
    document.getElementById('quantity').value = value; 
 
    price = '$'+`<span>${p * value}</span>`; 
 
    document.getElementById('product-price').innerHTML=price; 
 
} 
 

 
function decreaseValue() { 
 
    var value = parseInt(document.getElementById('quantity').value, 10); 
 
    value = isNaN(value) ? 0 : value; 
 
    value < 1 ? value = 1 : ''; 
 
    value--; 
 
    document.getElementById('quantity').value = value; 
 
    price = '$'+`<span>${p * value}</span>`; 
 
    document.getElementById('product-price').innerHTML=price; 
 
} 
 
var p='15.49'; 
 
var price = '$'+`<span>${p}</span>`; 
 
document.getElementById('product-price').innerHTML=price;

<div id="myDiv"> 
 
    <div class="quantity-container"> 
 
    <span>1</span> 
 
    <div class="value-button" id="decrease" onclick="decreaseValue()" value="Decrease Value">-</div> 
 
    <input type="number" id="quantity" name="quantity" value="1" /> 
 
    <div class="value-button" id="increase" onclick="increaseValue()" value="Increase Value">+</div> 
 
</div> 
 

 
<div id="product-price"> 
 

 
</div>