Question

我正在尝试创建一个简单的页面，单独计算衬衫的总成本，或者将它们加在一起作为最终总计。我想我非常接近，但我无法在输入框中添加或显示总数。也许你们可以帮助我。它是一个最后的课堂项目，我的老师似乎也无法帮助我。请上网帮我!!!!!

这是我的代码：函数的开头在头部，然后函数的调用就在底部。

<!doctype html>
<html>
  <head>
  <meta charset="utf-8">
  <title>Shirts</title>
  <link href="styles/eccomercestyle.css" rel="stylesheet" type="text/css">
  <script type="text/javascript">

    // cost of items in dollars
    var costShirt = 10; 



      function updateTotal(){
        var tot = 0;
        tot += f.blackShirt.value * costBlack +
    f.whiteShirt.value * costWhite +
    f.blueShirt.value * costBlue;
        document.getElementById("cost").value = tot.toFixed(2);
      }

  </script>
  </head>


  <body>
<div id="logo"> <a href="index.html"> <img src="instalogo.png" width="493" height="91" alt="Return home"/> </a> </div>
<h1 style="font-family: Segoe, 'Segoe UI', 'DejaVu Sans', 'Trebuchet MS', Verdana, sans-serif; font-size: medium; color: #FF7208;">Choose a style.</h1>
<div id="container">
    <table width="200" border="1" bordercolor="black">
    <tbody>
        <tr>
        <td><img src="blackcottonPNG.png" width="160" height="200" alt="Choose a quantity"/>

            <br>
      <form action="" method="POST" name="myForm" id="myForm">
         <label for="blackShirt"><strong>Black T $10.00 x </strong></label>
            <select id="blackShirt">
                <option>0</option>
                <option>1</option>
                <option>2</option>
                <option>3</option>
              </select>
            </br>
         </td>

        <td><img src="whitecottonPNG.png" width="160" height="200" alt="Choose a quantity"/>
                       <br>
       <label for="whiteShirt"><strong>Black T $10.00 x </strong></label>
       <select id="whiteShirt">
                <option>0</option>
                <option>1</option>
                <option>2</option>
                <option>3</option>
              </select>
            </br>
          </td>

        <td><img src="bluecottonPNG.png" width="160" height="200" alt="Choose a quantity"/>
            <br>
            <label for="blueShirt"><strong>Black T $10.00 x </strong></label>
            <select id="blueShirt">
                <option>0</option>
                <option>1</option>
                <option>2</option>
                <option>3</option>
              </select>
            </br>
          </form></td>
      </tr>
      </tbody>
  </table>

    <h3>SUBTOTAL:</h3>
    <div> $
    <input type="text" id="cost" value="0" readonly size="3"/>
  </div>
    <div>
    <input type="submit"/>
  </div>
</main>

    <script type="text/javascript">
      var f = document.forms['myForm'];
      var sel = document.getElementsByTagName("select");


      for(var i=0; i<sel.length; i++) {
        sel[i].onchange = function(){updateTotal()};
      }

     // here the form data is submitted to the server
      f.onsubmit = function(){
        alert("Your total cost will be: $" + f.cost.value);
        return false;
      }
      </script>
  </div>
</body>
</html>

Answer 1

您不能通过为元素赋值来设置元素的值。为此使用setAttribute方法。所以，你可以改变

document.getElementById("cost").value = tot.toFixed(2);

到

document.getElementById("cost").setAttribute('value', tot.toFixed(2));

应该做的诀窍......

简单的Javascript计算

1 个答案: