Функция выставления счетов Javascript

Question

Это вопрос, который я недавно посетил. есть на веб-странице, и пользователь может вводить значения для «цены за единицу» и «количества». когда пользователь нажимает кнопку «Найти количество», общее количество отображается в текстовом поле «сумма». Функция «calAmount» вычисляет общую сумму на основе уравнения: amount = unitprice * quantity. Но у меня возникла проблема с написанием этой функции «calAmount». Кто-нибудь может мне помочь?

<form name = "order" method = "POST"> 
     <p>Unit price : 
     <input type = "text" name = "unitPrice" maxlength = "9" /></p> 
     <p>Quantity &nbsp: 
     <input type = "text" name = "quantity" maxlength = "5"/></p> 
     <p>Amount: &nbsp: 
     <input type = "text" name = "amount" maxlength = "12"></p> 
     <input name = "btnCal" type = "button" id = "btnCal" value = "Find amount" onclick="calAmount()"/> 
     <br/><br/> 
    </form> 

Answer 1

• Использование querySelector с name атрибутом для выбора элемента.
• Доступ value свойство элемента.
• Использования Number() для преобразования value в Number

function calAmount() { 
 
    var unitPrice = document.querySelector('[name="unitPrice"]'); 
 
    var quantity = document.querySelector('[name="quantity"]'); 
 
    var amount = document.querySelector('[name="amount"]'); 
 
    amount.value = Number(unitPrice.value) * Number(quantity.value); 
 
}

<form name="order" method="POST"> 
 
    <p>Unit price : 
 
    <input type="text" name="unitPrice" maxlength="9" /> 
 
    </p> 
 
    <p>Quantity &nbsp: 
 
    <input type="text" name="quantity" maxlength="5" /> 
 
    </p> 
 
    <p>Amount: &nbsp: 
 
    <input type="text" name="amount" maxlength="12"> 
 
    </p> 
 
    <input name="btnCal" type="button" id="btnCal" value="Find amount" onclick="calAmount()" /> 
 
    <br/> 
 
    <br/> 
 
</form>

Answer 2

Вашей calAmount() функция должна быть, как это

function calAmount() { 
 
    var unitPrice = document.getElementById('unitPrice').value; 
 
    var quantity = document.getElementById('quantity').value; 
 

 
    document.getElementById('amount').value = unitPrice * quantity; 
 
}

<form name="order" method="POST"> 
 
    <p>Unit price : 
 
    <input type="text" name="unitPrice" id="unitPrice" maxlength="9" /> 
 
    </p> 
 
    <p>Quantity &nbsp: 
 
    <input type="text" name="quantity" id="quantity" maxlength="5" /> 
 
    </p> 
 
    <p>Amount: &nbsp: 
 
    <input type="text" name="amount" id="amount" maxlength="12"> 
 
    </p> 
 
    <input name="btnCal" type="button" id="btnCal" value="Find amount" onclick="calAmount()" /> 
 
    <br/> 
 
    <br/> 
 
</form>