рассчитать продажи продавца + комиссию из HTML-формы, которую пользователь заполняет / ввод текста

Question

Пользователь заполняет форму ниже, основываясь на том, сколько предметов он продал.

Затем калькулятор вычисляет, сколько продавец продал в пустые места ниже + сколько они заработали + 200 долларов дополнительно + 9% комиссии от общего объема продаж ... и затем форма выводит результаты.

• округляет выводимые результаты до 2 десятичных знаков.
• проверьте правильность ввода чисел
• убедитесь, что количество проданных товаров <0, поскольку никто не продает отрицательное количество товаров. </li>
• выравнивание по правому краю всех сумм.

Я написал, о чем, по-моему, должны быть функции, без надлежащего синтаксиса. Я супер зеленый с javascript и, к сожалению, в основном хорош только в HTML. Мне нужна помощь, чтобы сделать то, что я имею, соответствует полям формы должным образом ... это все очень подавляюще. Любое объяснение полезно.

<h1>Sales Commission Calculator</h1>
<hr>

    <section>

    <form name="salesperson_total">

    Salesperson: <input type="text" title="Please make sure that the salesperson's name is spelled correctly" name="sp" size="20">
    <br>
    <br>

    <h3>Input the number of items sold for each item number:</h3>

    Item 1: <input class="t" type="text" name="num_item1" size="8" value="num_item1"><br>
    Item 2: <input class="t" type="text" name="num_item2" size="8" value="num_item2"><br>
    Item 3: <input class="t" type="text" name="num_item3" size="8" value="num_item3"><br>
    Item 4: <input class="t" type="text" name="num_item4" size="8" value="num_item4"><br><br>
    <input type="button" value="Submit">
    <input type="reset" value="Reset"><br><br>

<table>
<tr>
    <th>Item #</th>
    <th>Price</th>
    <th>Number Sold</th>
    <th>Total</th>
</tr>

<tr>
    <td>1</td>
    <td>$239.99</td>
    <td><input type="text" class="t" name="int_item1"></td>
    <td><input type="text"  class="t" name="total_item1"></td>
</tr>
<tr>
    <td>2</td>
    <td>$129.75</td>
    <td><input type="text" class="t" name="int_item2"></td>
    <td><input type="text"  class="t" name="total_item2"></td>
</tr>
<tr>
    <td>3</td>
    <td>$99.95</td>
    <td><input type="text" class="t" name="int_item3"></td>
    <td><input type="text"  class="t" name="total_item3"></td>
</tr>
<tr>
    <td>4</td>
    <td>$350.89</td>
    <td><input type="text" class="t" name="int_item4"></td>
    <td><input type="text" class="t" name="total_item4"></td>
</tr>
<tr>
    <td colspan="3">Total Amount Sold:</td>
    <td><input type="text" class="t" name="final_total"></td>
</tr>
<tr>
    <td colspan="3">Total Weekly Earnings:</td>
    <td><input type="text"  class="t" name="salary"></td>
</tr>
</table>

</form>
</section>
<br>
<script>

var num_item1 = "";
var num_item2 = "";
var num_item3 = "";
var num_item4 = "";

var price1 = 239.99;
var price2 = 129.75;
var price3 = 99.95;
var price4 = 350.89;

var int_item1 = "";
var int_item2 = "";
var int_item3 = "";
var int_item4 = "";

var total_item1;
var total_item2;
var total_item3;
var total_item4;

var comm;

function numberSold() {
    num_item1
    num_item2
    num_item3
    num_item4

}

function totalSold() {
    total_item1 = num_item1 * price1;
    total_item2 = num_item2 * price2;
    total_item3 = num_item3 * price3;
    total_item4 = num_item4 * price4;
}

function amountSold() {
    total_item1 + total_item2 + total_item3 + total_item4;

}

function getComm() {
    comm = Math.floor(9/amountSold*100);
}

function weeklyEarned() {
 amountSold + comm + 200
document.write();
}

</script>

</section>

</body>
</html>

// ожидаемые результаты в описании см. Выше.

Answer 1

Я сделал это быстро, и этого должно быть достаточно, чтобы действовать как гид:

<h1>Sales Commission Calculator</h1>
    <hr>

    <section>

    <form name="salesperson_total">

    Salesperson: <input type="text" title="Please make sure that the salesperson's name is spelled correctly" name="sp" size="20">
    <br>
    <br>

    <h3>Input the number of items sold for each item number:</h3>

    Item 1: <input class="t" type="text" name="num_item1" id="item1" size="8" value="0" style="text-align:right;" onkeyup="checkNumItems();"><br>
    Item 2: <input class="t" type="text" name="num_item2" id="item2" size="8" value="0" style="text-align:right;" onkeyup="checkNumItems();"><br>
    Item 3: <input class="t" type="text" name="num_item3" id="item3" size="8" value="0" style="text-align:right;" onkeyup="checkNumItems();"><br>
    Item 4: <input class="t" type="text" name="num_item4" id="item4" size="8" value="0" style="text-align:right;" onkeyup="checkNumItems();"><br>
    <span id="msg" style="color:red;"></span><br><br> <!--This element is used to display an error message if any item entered is less than zero-->
    <input type="button" value="Submit" id="submitBtn" onclick="calculate()">
    <input type="reset" value="Reset" onclick="reset()"><br><br>

<table>
<tr>
    <th>Item #</th>
    <th>Price</th>
    <th>Number Sold</th>
    <th>Total</th>
</tr>

<tr>
    <td>1</td>
    <td>$239.99</td>
    <td><input type="text" class="t" name="int_item1" id="int_item1" style="text-align:right;"></td>
    <td><input type="text"  class="t" name="total_item1" id="total_item1" style="text-align:right;"></td>
</tr>
<tr>
    <td>2</td>
    <td>$129.75</td>
    <td><input type="text" class="t" name="int_item2" id="int_item2" style="text-align:right;"></td>
    <td><input type="text"  class="t" name="total_item2" id="total_item2" style="text-align:right;"></td>
</tr>
<tr>
    <td>3</td>
    <td>$99.95</td>
    <td><input type="text" class="t" name="int_item3" id="int_item3" style="text-align:right;"></td>
    <td><input type="text"  class="t" name="total_item3" id="total_item3" style="text-align:right;"></td>
</tr>
<tr>
    <td>4</td>
    <td>$350.89</td>
    <td><input type="text" class="t" name="int_item4" id="int_item4" style="text-align:right;"></td>
    <td><input type="text" class="t" name="total_item4" id="total_item4" style="text-align:right;"></td>
</tr>
<tr>
    <td colspan="3">Total Amount Sold:</td>
    <td><input type="text" class="t" name="final_total" id="final_total" style="text-align:right;"></td>
</tr>
<tr>
    <td colspan="3">Total Weekly Earnings:</td>
    <td><input type="text"  class="t" name="salary" id="salary" style="text-align:right;"></td>
</tr>
</table>

</form>
</section>
<br>

<!--Javascript-->
<script>

//Declare and initialize all variables
var num_item1 = "";
var num_item2 = "";
var num_item3 = "";
var num_item4 = "";

var price1 = 239.99;
var price2 = 129.75;
var price3 = 99.95;
var price4 = 350.89;

var int_item1 = "";
var int_item2 = "";
var int_item3 = "";
var int_item4 = "";

var total_item1 = 0;
var total_item2 = 0;
var total_item3 = 0;
var total_item4 = 0;

var comm = 0;
var earnings = 0;

//As the user enters a value in the item fields check if the number of items entered by the user is less than zero
function checkNumItems(){
    if(document.getElementById('item1').value < 0 || document.getElementById('item2').value < 0 || document.getElementById('item3').value < 0 || document.getElementById('item4').value < 0){
        //Display an error message if either one of the items is less than zero
        document.getElementById('msg').innerHTML = "Error: Values cannot be less than 0";
        //Disable the submit button if either one of the items is less than zero
        document.getElementById("submitBtn").disabled = true;
    }else{
        //Remove (or do not display) an error message if all items are more than 0
        document.getElementById('msg').innerHTML = "";
        //Enable submit button if all items are greater than zero
        document.getElementById("submitBtn").disabled = false;
}   }

//Function used to calculate  and fill in all fields when the user press Submit
function calculate(){
    //Get the values the user entered 
    num_item1 = document.getElementById('item1').value;
    num_item2 = document.getElementById('item2').value;
    num_item3 = document.getElementById('item3').value;
    num_item4 = document.getElementById('item4').value;     

    //Set the values into the fields of the column 'Number Sold'
    document.getElementById('int_item1').value = num_item1;
    document.getElementById('int_item2').value = num_item2;
    document.getElementById('int_item3').value = num_item3;
    document.getElementById('int_item4').value = num_item4;

    //Calculate the total for each item
    total_item1 = num_item1 * price1;
    total_item2 = num_item2 * price2;
    total_item3 = num_item3 * price3;
    total_item4 = num_item4 * price4;

    //Set the total for each fields of the 'Total' column
    document.getElementById('total_item1').value = total_item1;
    document.getElementById('total_item2').value = total_item2;
    document.getElementById('total_item3').value = total_item3;
    document.getElementById('total_item4').value = total_item4; 

    //Calculate the 'Total Amount Sold' field
    amountSold = total_item1 + total_item2 + total_item3 + total_item4;

    //Set (fill in) the 'Total Amount Sold' field
    document.getElementById('final_total').value = amountSold;

    //Calculate the commission
    comm = Math.floor(9/amountSold*100);

    //Caclulate the earnings
    earnings = amountSold + comm + 200;

    //Set the 'Total Weekly Earnings' field
    document.getElementById('salary').value = earnings;

}

//Function used to Reset the fields the salesperson enters when they press Reset
function reset(){
    document.getElementById('item1').value = 0;
    document.getElementById('item2').value = 0;
    document.getElementById('item3').value = 0;
    document.getElementById('item4').value = 0; 
}
</script>