как использовать javascript для суммирования облаков - PullRequest
Новая
       4

как использовать javascript для суммирования облаков

2 голосов
/ 04 августа 2020

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

<head> <h1 style="font-family:times new roman; font-size: 18pt">Book Ordering Seystem</h1>
    <link rel="stylesheet" href="homestyle.css">
</head>
<br>
<table class="tg" id ="table">
    <thead>
    <tr>
        <th class="tg-eh3c">No.</th>
        <th class="tg-qu9t">Book Title</th>
        <th class="tg-qu9t">Author </th>
        <th class="tg-qu9t">Category</th>
        <th class="tg-qu9t">Unit price</th>
        <th class="tg-eh3c">Quantity</th>
        <th class="tg-eh3c">Total</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td class="tg-nt2e">1</td>
        <td class="tg-4msd"><input type="text"></td>
        <td class="tg-v4tt"><input type="text"></td>
        <td class="tg-v4tt">
            <select name="Category" class="Category">
                <option value="Category">Please choose the Category...</option>
                <option value="Business">Business</option>
                <option value="Fiction">Fiction</option>
                <option value="Mathematics">Mathematics</option>
                <option value="Technology">Technology</option>
            </select></td>
        <td class="tg-0tzc"><input id="up1" type="number" placeholder="0.00" step="0.00" style="text-align: right"></td>
        <td class="tg-kgwd"><input id="qn1" type="number" placeholder="0" step="0" style="text-align: right"></td>
        <td class="tg-kgwd"><input id="total1" type="number" placeholder="0.00" step="0.00" style="text-align: right ; background-color:silver"readonly value=0>
        </td>
    </tr>

    <tr>
        <td class="tg-nt2e">2</td>
        <td class="tg-4msd"><input type="text"></td>
        <td class="tg-v4tt"><input type="text"></td>
        <td class="tg-v4tt">
            <select name="Category" class="Category">
                <option value="Category">Please choose the Category...</option>
                <option value="Business">Business</option>
                <option value="Fiction">Fiction</option>
                <option value="Mathematics">Mathematics</option>
                <option value="Technology">Technology</option></select>
        </td>
        <td class="tg-0tzc"><input id="up2" type="number" placeholder="0.00" step="0.00" style="text-align: right"></td>
        <td class="tg-kgwd"><input id="qn2" type="number" placeholder="0" step="0" style="text-align: right"></td>
        <td class="tg-kgwd"><input id="total2" type="number" placeholder="0.00" step="0.00" style="text-align: right ; background-color:silver"readonly></td>
    </tr>
    <tr>
        <td class="tg-nt2e">3</td>
        <td class="tg-4msd"><input type="text"></td>
        <td class="tg-v4tt"><input type="text"></td>
        <td class="tg-v4tt">
            <select name="Category" id="Category">
                <option value="Category">Please choose the Category...</option>
                <option value="Business">Business</option>
                <option value="Fiction">Fiction</option>
                <option value="Mathematics">Mathematics</option>
                <option value="Technology">Technology</option></select>
        </td>
        <td class="tg-0tzc"><input id="up3" type="number" placeholder="0.00" step="0.00" style="text-align: right"></td>
        <td class="tg-kgwd"><input id="qn3" type="number" placeholder="0" step="0" style="text-align: right"></td>
        <td class="tg-kgwd"><input id="total3" type="number" placeholder="0.00" step="0.00" style="text-align: right ; background-color:silver"readonly></td>
    </tr>
    <tr>
        <td class="tg-nt2e">4</td>
        <td class="tg-4msd"><input type="text"></td>
        <td class="tg-v4tt"><input type="text"></td>
        <td class="tg-v4tt">
            <select name="Category" class="Category">
                <option value="Category">Please choose the Category...</option>
                <option value="Business">Business</option>
                <option value="Fiction">Fiction</option>
                <option value="Mathematics">Mathematics</option>
                <option value="Technology">Technology</option></select>
        </td>
        <td class="tg-0tzc"><input id="up4" type="number" placeholder="0.00" step="0.00" style="text-align: right"></td>
        <td class="tg-kgwd"><input id="qn4" type="number" placeholder="0" step="0" style="text-align: right"></td>
        <td class="tg-kgwd"><input id="total4" type="number" placeholder="0.00" step="0.00" style="text-align: right ; background-color:silver"readonly></td>
    </tr>
    <tr>
        <td class="tg-nt2e">5</td>
        <td class="tg-4msd"><input type="text"></td>
        <td class="tg-v4tt"><input type="text"></td>
        <td class="tg-v4tt">
            <select name="Category" class="Category">
                <option value="Category">Please choose the Category...</option>
                <option value="Business">Business</option>
                <option value="Fiction">Fiction</option>
                <option value="Mathematics">Mathematics</option>
                <option value="Technology">Technology</option></select>
        </td>
        <td class="tg-0tzc"><input id="up5" type="number" placeholder="0.00" step="0.00" style="text-align: right"></td>
        <td class="tg-kgwd"><input id="qn5" type="number" placeholder="0" step="0" style="text-align: right"></td>
        <td class="tg-kgwd"><input id="total5" type="number" placeholder="0.00" step="0.00" style="text-align: right ; background-color:silver"readonly></td>
    </tr>
    <tr>
        <td class="tg-ts62" colspan="6"><button id="result" type="button" onClick="multiply(); calculatetotal();" style="float: right;" >Calculate Grand Total Price</button></td>

        <td class="tg-rviu"><input type="number" placeholder="0.00" step="0.00" style="text-align: right; background-color:silver; font-size: 18pt" readonly></td>
    </tr>
    </tbody>
</table>

1 Ответ

1 голос
/ 05 августа 2020

Вы должны взглянуть на свой код: каждому открывающему тегу нужен соответствующий закрывающий тег. Каждый идентификатор должен быть уникальным, иначе используйте классы. Для итога и итоговой суммы не нужны кнопки вверх и вниз, они доступны только для чтения.

Для умножения сначала получите количество строк из таблицы для индексов. Затем вы можете получить для каждой строки с помощью getElementById элемент для количества и цены. С помощью значения вы можете получить значение. Умножьте и запишите его в поле суммы из этой строки.
Для расчета просто возьмите суммы из каждой строки, вычислите общую сумму и запишите ее в поле. 

function multiply() {
  let rows = document.querySelectorAll('table.tg tbody tr').length;

  for (let i=1; i<rows; i++) {
    let price = document.getElementById('up' + i).value;
    let quantity = document.getElementById('qn' + i).value;
    let sum = price*quantity;
    document.getElementById('total' + i).value = sum;
  }
}

function calculatetotal(){
  let rows = document.querySelectorAll('table.tg tbody tr').length;
  let sum = 0;
    
  for (let i=1; i<rows; i++) {
    let price = parseInt(document.getElementById('total' + i).value);
    sum += price;
  }
  
  document.getElementById('totalSum').value = sum;
}
<head> <h1 style="font-family:times new roman; font-size: 18pt">Book Ordering Seystem</h1>
    <link rel="stylesheet" href="homestyle.css">
</head>
<br>
<table class="tg" id ="table">
    <thead>
    <tr>
        <th class="tg-eh3c">No.</th>
        <th class="tg-qu9t">Book Title</th>
        <th class="tg-qu9t">Author </th>
        <th class="tg-qu9t">Category</th>
        <th class="tg-qu9t">Unit price</th>
        <th class="tg-eh3c">Quantity</th>
        <th class="tg-eh3c">Total</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td class="tg-nt2e">1</td>
        <td class="tg-4msd"><input type="text"></td>
        <td class="tg-v4tt"><input type="text"></td>
        <td class="tg-v4tt">
            <select name="Category" class="Category">
                <option value="Category">Please choose the Category...</option>
                <option value="Business">Business</option>
                <option value="Fiction">Fiction</option>
                <option value="Mathematics">Mathematics</option>
                <option value="Technology">Technology</option>
            </select></td>
        <td class="tg-0tzc"><input id="up1" type="number" placeholder="0.00" step="0.00" style="text-align: right"></td>
        <td class="tg-kgwd"><input id="qn1" type="number" placeholder="0" step="0" style="text-align: right"></td>
        <td class="tg-kgwd"><input id="total1" type="number" placeholder="0.00" step="0.00" style="text-align: right ; background-color:silver"readonly value=0>
        </td>
    </tr>

    <tr>
        <td class="tg-nt2e">2</td>
        <td class="tg-4msd"><input type="text"></td>
        <td class="tg-v4tt"><input type="text"></td>
        <td class="tg-v4tt">
            <select name="Category" class="Category">
                <option value="Category">Please choose the Category...</option>
                <option value="Business">Business</option>
                <option value="Fiction">Fiction</option>
                <option value="Mathematics">Mathematics</option>
                <option value="Technology">Technology</option></select>
        </td>
        <td class="tg-0tzc"><input id="up2" type="number" placeholder="0.00" step="0.00" style="text-align: right"></td>
        <td class="tg-kgwd"><input id="qn2" type="number" placeholder="0" step="0" style="text-align: right"></td>
        <td class="tg-kgwd"><input id="total2" type="number" placeholder="0.00" step="0.00" style="text-align: right ; background-color:silver"readonly></td>
    </tr>
    <tr>
        <td class="tg-nt2e">3</td>
        <td class="tg-4msd"><input type="text"></td>
        <td class="tg-v4tt"><input type="text"></td>
        <td class="tg-v4tt">
            <select name="Category" id="Category">
                <option value="Category">Please choose the Category...</option>
                <option value="Business">Business</option>
                <option value="Fiction">Fiction</option>
                <option value="Mathematics">Mathematics</option>
                <option value="Technology">Technology</option></select>
        </td>
        <td class="tg-0tzc"><input id="up3" type="number" placeholder="0.00" step="0.00" style="text-align: right"></td>
        <td class="tg-kgwd"><input id="qn3" type="number" placeholder="0" step="0" style="text-align: right"></td>
        <td class="tg-kgwd"><input id="total3" type="number" placeholder="0.00" step="0.00" style="text-align: right ; background-color:silver"readonly></td>
    </tr>
    <tr>
        <td class="tg-nt2e">4</td>
        <td class="tg-4msd"><input type="text"></td>
        <td class="tg-v4tt"><input type="text"></td>
        <td class="tg-v4tt">
            <select name="Category" class="Category">
                <option value="Category">Please choose the Category...</option>
                <option value="Business">Business</option>
                <option value="Fiction">Fiction</option>
                <option value="Mathematics">Mathematics</option>
                <option value="Technology">Technology</option></select>
        </td>
        <td class="tg-0tzc"><input id="up4" type="number" placeholder="0.00" step="0.00" style="text-align: right"></td>
        <td class="tg-kgwd"><input id="qn4" type="number" placeholder="0" step="0" style="text-align: right"></td>
        <td class="tg-kgwd"><input id="total4" type="number" placeholder="0.00" step="0.00" style="text-align: right ; background-color:silver"readonly></td>
    </tr>
    <tr>
        <td class="tg-nt2e">5</td>
        <td class="tg-4msd"><input type="text"></td>
        <td class="tg-v4tt"><input type="text"></td>
        <td class="tg-v4tt">
            <select name="Category" class="Category">
                <option value="Category">Please choose the Category...</option>
                <option value="Business">Business</option>
                <option value="Fiction">Fiction</option>
                <option value="Mathematics">Mathematics</option>
                <option value="Technology">Technology</option></select>
        </td>
        <td class="tg-0tzc"><input id="up5" type="number" placeholder="0.00" step="0.00" style="text-align: right"></td>
        <td class="tg-kgwd"><input id="qn5" type="number" placeholder="0" step="0" style="text-align: right"></td>
        <td class="tg-kgwd"><input id="total5" type="number" placeholder="0.00" step="0.00" style="text-align: right ; background-color:silver"readonly></td>
    </tr>
    <tr>
        <td class="tg-ts62" colspan="6"><button id="result" type="button" onClick="multiply(); calculatetotal();" style="float: right;" >Calculate Grand Total Price</button></td>

        <td class="tg-rviu"><input id='totalSum' type="number" placeholder="0.00" step="0.00" style="text-align: right; background-color:silver; font-size: 18pt" readonly></td>
    </tr>
    </tbody>
</table>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...