Блог

Главная - Вопросы по программированию - Кажется, я не могу вывести свою первую строку подсчета на общий итог

Кажется, я не могу вывести свою первую строку подсчета на общий итог

#javascript #html #css

Вопрос:

Поэтому я пытаюсь сделать подсчет одной строки для отображения на вводе общего итога при нажатии кнопки, но вместо этого мне нужно заполнить только всю строку, чтобы отобразить общий итог.

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

Потому что некоторые из моих JavaScript были неуместны, поэтому я включил его скриншот.

HTML:

     <body>
<head>
  <h1><strong> Book Ordering System </strong></h1>



 <table>
        <thead>
          <tr>
        <th> No.</td>
         <th>Book Title</th>
         <th>Author</th>
         <th>Catagory</th>
         <th>Unit Price</th>
             <th>Quantity</th>
             <th>Total</th>
          </tr>
        </thead>
<tbody>
  <!---------------- ROW 1 ------------------>
  <tr class="hover">
    <td>1</td>
    <td>
      <input type="number" />
    </td>
    <td>
      <input type="number" />
    </td>
    <td>
      <select name="type">
        <option value="Choose" selected>Choose a 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>
      <input type="number" name="unit price" placeholder="0.00" id="book1_price1" >
    </td>

    <td>
      <input type="number" name="Quality" placeholder="0" id="book1_quan1" >
    </td>

    <td>
      <input
        required
        type="number"
        name="total"
        value="0.00"
        readonly="readonly"
        id="book1_total"
      />
    </td>
  </tr>

  <!---------------- ROW 2 ------------------>

  <tr class="hover">
    <td>2</td>
    <td>
      <input type="number" />
    </td>
    <td>
      <input type="number" />
    </td>
    <td>
      <select name="type">
        <option value="Choose" selected>Choose a 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>
      <input type="number" name="unit price" placeholder="0.00" id="book2_price1" >
    </td>

    <td>
      <input type="number" name="Quality" placeholder="0" id="book2_quan1">
    </td>

    <td>
      <input
        required
        type="number"
        name="total"
        value="0.00"
        readonly="readonly"
        id = "book2_total"
      />
    </td>
  </tr>

  <!---------------- ROW 3 ------------------>

  <tr class="hover">
    <td>3</td>
    <td>
      <input type="number" />
    </td>
    <td>
      <input type="number" />
    </td>
    <td>
      <select name="type">
        <option value="Choose">Choose a 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>
      <input type="number" name="unit price" placeholder="0.00" id="book3_price1">
    </td>

    <td>
      <input type="number" name="Quality" placeholder="0" id="book3_quan1" >
    </td>

    <td>
      <input
        required
        type="number"
        name="total"
        value="0.00"
        readonly="readonly"
        id="book3_total"
      />
    </td>
  </tr>

  <!---------------- ROW 4 ------------------>

  <tr class="hover">
    <td>4</td>
    <td>
      <input type="text" />
    </td>
    <td>
      <input type="text" />
    </td>
    <td>
      <select name="type">
        <option value="Choose">Choose a 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>
      <input type="number" name="unit price" placeholder="0.00" id="book4_price1">
    </td>

    <td>
      <input type="number" name="Quality" placeholder="0" id="book4_quan1">
    </td>

    <td>
      <input
        required
        type="number"
        name="total"
        value="0.00"
        readonly="readonly"
        id="book4_total"
      />
    </td>
  </tr>

  <!---------------- ROW 5 ------------------>

  <tr class="hover">
    <td>5</td>
    <td>
      <input type="text" />
    </td>
    <td>
      <input type="text" />
    </td>
    <td>
      <select name="type">
        <option value="Choose">Choose a 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>
      <input type="number" name="unit price" placeholder="0.00" id="book5_price1" >
    </td>

    <td>
      <input type="number" name="Quality" placeholder="0" id="book5_quan1" >
    </td>

    <td>
      <input
        required
        type="number"
        name="total"
        value="0.00"
        readonly="readonly"
        id="book5_total"
      />
    </td>
  </tr>
</tbody>

<tfoot>
  <!------------ Last Row ------------------->
  <tr>
    <td colspan="5">
      
      <input type="button" value="Calculate Grand Total Price" onclick="calculateTotal();">
       
    </td>

    <td colspan="2">
      <input
        type="number"
        name="total_final"
        id="total_final"
        value="0.00"
        style="font-size: 18px; background-color: silver"
        readonly="readonly"
      />
    </td>
  </tr>
</tfoot>

Мой JavaScript:

 <script>
  function calculateTotal() {

   let Book1_fulltotal = 0

   const NumberOfBooks = 5;

for (let i = 1; i <= NumberOfBooks;   i) {

let BookTotal = parseFloat(document.getElementById("book"   i   "_price1").value) * parseFloat(document.getElementById("book"   i   "_quan1").value);
document.getElementById("book"   i   "_total").value = BookTotal.toFixed(2); 

Book1_fulltotal  = parseFloat(document.getElementById("book"   i   "_total").value);
}

const new_avg = Book1_fulltotal 
document.getElementById("total_final").value = new_avg.toFixed(2)
}
      for (let i = 1; i <= 5;   i) {
        document.getElementById("book"   i   "_price1").value = (0).toFixed(2);
        document.getElementById("book"   i   "_quan1").value = (0).toFixed(2);
        document.getElementById("book"   i   "_total").value = (0).toFixed(2);
}
    </script>

Ответ №1:

У вас есть некоторые синтаксические ошибки в вашем HTML. После того, как я это исправлю, ваша функция js будет работать хорошо.

 function calculateTotal() {
  let Book1_fulltotal = 0;

  const NumberOfBooks = 5;

  for (let i = 1; i <= NumberOfBooks;   i) {
    let BookTotal =
      parseFloat(document.getElementById("book"   i   "_price1").value) *
      parseFloat(document.getElementById("book"   i   "_quan1").value);
    document.getElementById("book"   i   "_total").value = BookTotal.toFixed(2);

    Book1_fulltotal  = parseFloat(
      document.getElementById("book"   i   "_total").value
    );
  }

  const new_avg = Book1_fulltotal;
  document.getElementById("total_final").value = new_avg.toFixed(2);
}
for (let i = 1; i <= 5;   i) {
  document.getElementById("book"   i   "_price1").value = (0).toFixed(2);
  document.getElementById("book"   i   "_quan1").value = (0).toFixed(2);
  document.getElementById("book"   i   "_total").value = (0).toFixed(2);
} 
 <body>
  <h1><strong> Book Ordering System </strong></h1>

  <table>
    <thead>
      <tr>
        <th>No.</th>
        <th>Book Title</th>
        <th>Author</th>
        <th>Catagory</th>
        <th>Unit Price</th>
        <th>Quantity</th>
        <th>Total</th>
      </tr>
    </thead>
    <tbody>
      <!---------------- ROW 1 ------------------>
      <tr class="hover">
        <td>1</td>
        <td>
          <input type="number" />
        </td>
        <td>
          <input type="number" />
        </td>
        <td>
          <select name="type">
            <option value="Choose" selected>Choose a 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>
          <input
            type="number"
            name="unit price"
            placeholder="0.00"
            id="book1_price1"
          />
        </td>

        <td>
          <input
            type="number"
            name="Quality"
            placeholder="0"
            id="book1_quan1"
          />
        </td>

        <td>
          <input
            required
            type="number"
            name="total"
            value="0.00"
            readonly="readonly"
            id="book1_total"
          />
        </td>
      </tr>

      <!---------------- ROW 2 ------------------>

      <tr class="hover">
        <td>2</td>
        <td>
          <input type="number" />
        </td>
        <td>
          <input type="number" />
        </td>
        <td>
          <select name="type">
            <option value="Choose" selected>Choose a 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>
          <input
            type="number"
            name="unit price"
            placeholder="0.00"
            id="book2_price1"
          />
        </td>

        <td>
          <input
            type="number"
            name="Quality"
            placeholder="0"
            id="book2_quan1"
          />
        </td>

        <td>
          <input
            required
            type="number"
            name="total"
            value="0.00"
            readonly="readonly"
            id="book2_total"
          />
        </td>
      </tr>

      <!---------------- ROW 3 ------------------>

      <tr class="hover">
        <td>3</td>
        <td>
          <input type="number" />
        </td>
        <td>
          <input type="number" />
        </td>
        <td>
          <select name="type">
            <option value="Choose">Choose a 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>
          <input
            type="number"
            name="unit price"
            placeholder="0.00"
            id="book3_price1"
          />
        </td>

        <td>
          <input
            type="number"
            name="Quality"
            placeholder="0"
            id="book3_quan1"
          />
        </td>

        <td>
          <input
            required
            type="number"
            name="total"
            value="0.00"
            readonly="readonly"
            id="book3_total"
          />
        </td>
      </tr>

      <!---------------- ROW 4 ------------------>

      <tr class="hover">
        <td>4</td>
        <td>
          <input type="text" />
        </td>
        <td>
          <input type="text" />
        </td>
        <td>
          <select name="type">
            <option value="Choose">Choose a 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>
          <input
            type="number"
            name="unit price"
            placeholder="0.00"
            id="book4_price1"
          />
        </td>

        <td>
          <input
            type="number"
            name="Quality"
            placeholder="0"
            id="book4_quan1"
          />
        </td>

        <td>
          <input
            required
            type="number"
            name="total"
            value="0.00"
            readonly="readonly"
            id="book4_total"
          />
        </td>
      </tr>

      <!---------------- ROW 5 ------------------>

      <tr class="hover">
        <td>5</td>
        <td>
          <input type="text" />
        </td>
        <td>
          <input type="text" />
        </td>
        <td>
          <select name="type">
            <option value="Choose">Choose a 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>
          <input
            type="number"
            name="unit price"
            placeholder="0.00"
            id="book5_price1"
          />
        </td>

        <td>
          <input
            type="number"
            name="Quality"
            placeholder="0"
            id="book5_quan1"
          />
        </td>

        <td>
          <input
            required
            type="number"
            name="total"
            value="0.00"
            readonly="readonly"
            id="book5_total"
          />
        </td>
      </tr>
    </tbody>

    <tfoot>
      <!------------ Last Row ------------------->
      <tr>
        <td colspan="5">
          <input
            type="button"
            value="Calculate Grand Total Price"
            onclick="calculateTotal();"
          />
        </td>

        <td colspan="2">
          <input
            type="number"
            name="total_final"
            id="total_final"
            value="0.00"
            style="font-size: 18px; background-color: silver"
            readonly="readonly"
          />
        </td>
      </tr>
    </tfoot>
  </table>
</body>
Метки: ,