个人中心
gpt4 book ai didi

javascript - 为什么在数字输入中放置新值时总数不更新

转载 作者：行者123 更新时间：2023-11-28 19:31:10 25 4
gpt4 key购买 nike

这是我到目前为止所拥有的，但我被卡住了，因为当数量的数量发生变化时，我无法让输入元素改变数量。

function calculateTotal(quantity, price) {

  var total = quantity * price;

  return total;

}



function makeRow() {

  var i = 0;

  for (i = 0; i < 3; i++) {

    var total = calculateTotal(quantities[i], prices[i]);

    outputCartRow(filenames[i], titles[i], quantities[i], prices[i], total);

  }

}



function outputCartRow(file, title, quantity, price, total) {

  var content = "<tr><td><img src='" + file + "' class='photo' /></td>";

  content += "<td>" + title + "</td>";

  content += "<td><input class='quant' type='number' value='1'             
  onchange = 'newAmount' / > < /td>";

  content += "<td>" + price + "</td>";

  content += "<td class='amount'>" + total + "</td></tr>";



  var section = document.querySelector(".rows").innerHTML;

  document.querySelector(".rows").innerHTML = section + content;

}



function newAmount() {



  var quantity = document.getElementsByClassName("quant");

  var quantity1 = quantity[0];

  var quantity2 = quantity[1];

  var quantity3 = quantity[2];



  var amount1 = calculateTotal(quantity1, 80);

  var amount2 = calculateTotal(quantity2, 125);

  var amount3 = calculateTotal(quantity3, 75);



  var items = document.getElementsByClassName("amount");

  for (var i = 0; i < items.length; i++) {

    items[i] = amount1;

  }





}



$(document).ready(function() {

  $("input").change(function() {

    alert("The text has been changed.");

  });

});





js data;





var filenames = ["images/106020.jpg", "images/116010.jpg", "images/120010.jpg"];

var titles = ["Girl with a Pearl Earring", "Artist Holding a Thistle", "Portrait of Eleanor of Toledo"];

var quantities = [1, 1, 1];

var prices = [80, 125, 75];
<html lang="en">

<head>

  <meta charset="utf-8" />

  <meta name="viewport" content="initial-scale=1.0,maximum- 
    scale=1.0,width=device-width">

  <title>Chapter 08 - Project 01</title>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <link href="css/styles.css" rel="stylesheet" />

  <script src="js/data.js" type="text/JavaScript"></script>

  <script src="js/functions.js" type="text/JavaScript"></script>

</head>

<body onload="makeRow();">

  <div class="title">

    <h1>Shopping Cart</h1>

  </div>

  <table class="table-fill">

    <thead>

      <tr>

        <th colspan="2">Product</th>

        <th>#</th>

        <th>Price</th>

        <th>Amount</th>

      </tr>

    </thead>

    <tbody class="rows">



      <tbody>



        <tr class="totals">

          <td colspan="4">Subtotal</td>

          <td>$515.00</td>

        </tr>

        <tr class="totals">

          <td colspan="4">Tax</td>

          <td>$51.50</td>

        </tr>

        <tr class="totals">

          <td colspan="4">Shipping</td>

          <td>$40.00</td>

        </tr>

        <tr class="totals focus">

          <td colspan="4">Grand Total</td>

          <td>$606.50</td>

        </tr>

      </tbody>

  </table>

</body>

</html>

最佳答案

<form>标记

IMO 如果在一个页面上使用多个表单控件✱，一个<form>标签应该包裹在所有东西上。使用 <form> 有几个优点标签:

通用程序

// Reference <form> by #id
var main = document.getElementById('main');
// Collect radio buttons into a NodeList and convert it into an array
var radios = Array.from(document.querySelectorAll('[name=rad]'));
// Reference <button> by tagName
var button = document.querySelector('button');

HTMLForm | ControlsCollection | 元素 接口(interface)

// Reference <form> by #id or [name]
var main = document.forms.main;
// Collect radio buttons into a HTMLCollection and convert it into an array
var radios = Array.from(main.elements.rad);
// Reference <button> by index
var button = main.elements[4];

演示

演示中评论的细节

<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1.0,maximum- 
    scale=1.0,width=device-width">
  <title>Chapter 08 - Project 01</title>
  <style>
    html,
    body {
      font: 400 16px/1.4 Consolas;
    }
    
    caption {
      font-weight: 700;
      font-size: 1.2rem;
    }
    
    table {
      table-layout: fixed;
      border-spacing: 7px;
    }
    
    th {
      border-bottom: 3px ridge grey;
    }
    
    tfoot tr:nth-child(3) td:nth-child(2),
    tfoot tr:nth-child(3) td:nth-child(1) {
      border-bottom: 4px ridge grey;
    }
    
    .totals tr td,
    tbody tr td:nth-of-type(3),
    tbody tr td:nth-of-type(4),
    tbody tr td:last-of-type,
    tfoot tr td {
      text-align: right;
    }
    
    td.cap {
      text-align: left;
    }
    
    output::before {
      content: '$';
    }
    
    input {
      display: block;
      width: 6ch;
      text-align: center;
      font: inherit;
    }
  </style>
</head>

<body>
  <form id='cart'>
    <table>
      <caption>Shopping Cart</caption>
      <thead>
        <tr>
          <th colspan="2">Product</th>
          <th>Qty</th>
          <th width='10%'>Price</th>
          <th width='20%'>Amount</th>
        </tr>
      </thead>
      <tbody class="rows"></tbody>
      <tfoot class="totals">
        <tr>
          <td colspan="4">Subtotal</td>
          <td><output id='sub'></output></td>
        </tr>
        <tr>
          <td colspan="4">Tax (8.25%)</td>
      <td><output id='tax' data-tax='.0825'></output></td>
        </tr>
        <tr>
          <td colspan="4">Shipping ($3.00)</td>
          <td><output id='SH'></output></td>
        </tr>
        <tr>
          <td colspan="4">Grand Total</td>
          <td><output id='grand'></output></td>
        </tr>
      </tfoot>
    </table>
  </form>
  <script>
    // Reference the <form>
    var form = document.forms.cart;

    // Data arrays
    var imgArr = ["https://i.ibb.co/ZHvWsKb/o1z7p.jpg", "https://i.ibb.co/ZHvWsKb/o1z7p.jpg", "https://i.ibb.co/ZHvWsKb/o1z7p.jpg"];
    var capArr = ["Girl with a Pearl Earring", "Artist Holding a Thistle", "Portrait of Eleanor of Toledo"];
    var qtyArr = [0, 0, 0];
    var prcArr = [80.69, 124.99, 75.00];

    /*
    setRow() -- passes an index counter and 4 variables
    - Creates a template literal of a <tr>
    - Interpolates variables into TL
    - Parses the TL as HTML
    */
    function setRow(i, img, cap, qty, prc) {
      var R = `<tr id='R${i}'>
  <td><img class='img' src='${img}' width='50px'></td>
  <td class='cap'>${cap}</td>
  <td><input id='qty${i}' class='qty' type='number' min='0' max='99'></td>
  <td><output id='prc${i}' class='prc'></output></td>
  <td><output id='amt${i}' class='amt'></output></td>
  </tr>`;
      var rows = document.querySelector('.rows');
      rows.insertAdjacentHTML('beforeend', R);
      var rID = document.getElementById('R' + i);
      rID.children[2].children[0].value = qty;
      rID.children[3].children[0].value = prc.toFixed(2);
      rID.children[4].children[0].value = (parseFloat(qty) * parseFloat(prc)).toFixed(2);
    }

    /*
    overRide() -- passes a 3D array
    - Iterates through the 3D array 
    - On each iteration it passes array elements to the
      setRow() function
    */
    function overRide(x3DArray) {
      var img, cap, qty, prc;
      for (let x = 0; x < x3DArray[0].length; x++) {
        img = x3DArray[0][x];
        cap = x3DArray[1][x];
        qty = x3DArray[2][x];
        prc = x3DArray[3][x];
        var cart = setRow(x, img, cap, qty, prc);
      }
    }

    /*
    calcAmt() callback function -- passes the Event Object
    - Reference the tag receiving the user data (input.qty)
    - Reference the tag registered to event (form#cart)
    - Collect all form controls into a HTMLCollection
    */
    /*
    - if the clicked tag is NOT the registered tag...
    - if the clicked tag has the .qty class...
    - Reference the <tr> the clicked tag is nested in...
      ...get the index of <tr>...
      ...get the values of qty and prc...
      ...set the amt by qty x prc
    */
    /*
    - Collects all .amt into a NodeList then converts into an array.
    - map() the array and extract each .amt value
    - reduce() the array values into a single sum
    - Set the .totals column values to calculate totals when the user enters data.
    */
    function calcAmt(event) {
      var tgt = event.target;
      var cur = event.currentTarget;
      var UI = this.elements;

      if (tgt !== cur) {
        if (tgt.className === 'qty') {
          var rID = tgt.closest('tr').id;
          var idx = rID.split('').slice(1).join('');
          var qty = tgt.value;
          var prc = UI['prc' + idx].value;
          UI['amt' + idx].value = (parseFloat(qty) * parseFloat(prc)).toFixed(2);

          var amtArray = Array.from(document.querySelectorAll('.amt'));
          var subVal = amtArray.map(function(sub) {
            return parseFloat(sub.value);
          });
          var amtVal = subVal.reduce(function(acc, cur) {
            return acc + cur;
          }, 0);
          UI.sub.value = amtVal.toFixed(2);
          UI.tax.value = (parseFloat(UI.sub.value) * parseFloat(UI.tax.dataset.tax)).toFixed(2);
          UI.SH.value = (3).toFixed(2);
          UI.grand.value = (parseFloat(UI.sub.value) + parseFloat(UI.tax.value) + parseFloat(UI.SH.value)).toFixed(2);
        }
      }
    }

    /*
    Register the input event to the <form>
    When user enters data to input.qty the callback
    function calcAmt() is called
    */
    form.addEventListener('input', calcAmt);

    /*
    This is a 3D array of the data arrays which will be
    passed to the function overRide()
    */
    var table = [
      [...imgArr],
      [...capArr],
      [...qtyArr],
      [...prcArr]
    ];

    // Call the overRide() function -- pass the table array
    overRide(table);
  </script>
</body>

</html>

关于javascript - 为什么在数字输入中放置新值时总数不更新，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55011154/

25 4 0
文章推荐： javascript - Chrome 调试 HTML 事件中的 javascript
文章推荐： ios - 审查提交未完成，因为没有构建
文章推荐： javascript - 我们可以在 Javascript/jQuery 中添加 if/else 语句吗 "innerhtml"
文章推荐： python - Python 中的“无写”变量
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com