你如何使用javascript填充最終銷售價格？

Question

我正在使用javascript創建一個簡單的計算器。理想情況下，我想要像DSW.com那樣工作。

我希望能夠輸入產品的數量，然後點擊一個有你的折扣的按鈕。並用最終價格填充span標籤或類似的東西。

任何類型的指導將有所幫助。

function calc() { 
 
     var i = document.getElementById("saleprice").value; 
 
     var p = document.getElementById("percentoff").value; 
 
     var o = (i/100) * p; 
 
     document.getElementById("finalprice").value = i - o; 
 
    }

<form action="javascript:calc()"> Sale Price: 
 
     <input type="text" id="saleprice" /> 
 
     <br /> Percent Off: 
 
     <input type="radio" name="percentoff" id="percentoff" value="50" />50% 
 
     <br /> Percent Off: 
 
     <input type="radio" name="percentoff" id="percentoff" value="30" />30% 
 
     <br /> Percent Off: 
 
     <input type="radio" name="percentoff" id="percentoff" value="20" />20% 
 
     <br /> Final Price: 
 
     <input type="text" id="finalprice" /> 
 
     <br /> 
 
     <input type="submit" /> </form>

謝謝！

Answer 1

通過百分比相乘就全價關：https://jsfiddle.net/yak613/07fa46nu/

function sale(percent){ 
    var price = document.getElementById('price').value; 
    var sale = price * percent; 
    document.getElementById('sale').value = sale; 
} 

HTML：

Full price: <input type="text" id="price"> 
<br> 
<button onclick="sale(.5)"> 
    50% 
</button> 
<button onclick="sale(.3)"> 
    30% 
</button> 
<button onclick="sale(.25)"> 
    25% 
</button> 
<button onclick="sale(.15)"> 
    15% 
</button> 
<button onclick="sale(0)"> 
    0% :(
</button> 
<br> 
Your price: 
<input type="text" id="sale">