Question

 <!DOCTYPE html>
  <html lang="el">
  <head>



<form id="purchase"">
<table border=1>
    <thead>
    <tr>
  <th>Menu</th>
  <th>Price</th>
  <th>Quantity</th>            
  </tr>
  </thead>
  <tbody>
  <tr>
  <td>Coffee</td>
  <td id="coffeePrice" value="2.99">$2.99</td>
  <td><input type="number" 
       name="quantityCoffee"
       id="quantityCoffee"
       ></td>
  </tr>
  <tr>
  <td>Tea</td>
  <td id="teaPrice" value="1.99">$1.99 </td>
<td><input type="number" 
           name="quantityTea" 
           id="quantityTea"
           ></td>

  </tr>
  <tr>
  <td>Water</td>
<td id="waterPrice" value="1.25">$1.25</td>
<td><input type="number" 
           name="quantityWater" 
           id="quantityWater" 
           ></td>
  </tr>
  </tbody>
  </table>
   <input type="submit"
           name="totalCost" 
           value="Total Cost"
           onclick= "totalCost();">
    <textarea id="display"></textarea>
</form>



 <SCRIPT TYPE="text/javascript">;
  <-- 
  function totalCost()
 {
var qC= document.getElementById("quantityCoffee");
var qT= document.getElementById("quantityTea");
var qW= document.getElementById("quantityWater");

var sum= (qC * 2.99) + (qT * 1.99) + (qW * 1.25);

document.getElementById("display").innerHTML = sum;

 }

  function test()
     {
         document.getElementById("display").innerHTML = "Cost is ";
     }


 // -->;
  </SCRIPT>



</head>   

  </html>

大家好，所以我正在尝试使用表单来制作订购菜单。这是我到目前为止的代码。我遇到的麻烦是，一旦单击按钮，javascript计算回文本区域后，javascript将不会返回总成本。我做错了什么？

Answer 1

您不能为innerHTML设置<textarea>，而应使用value代替{{3}}

Answer 2

你没有完全到达那里，错过了一些事情，但这里的代码是一个有效的小提琴......

<form id="purchase">
    <table border="1">
        <thead>
           <tr>
               <th>Menu</th>
               <th>Price</th>
               <th>Quantity</th>            
           </tr>
       </thead>
       <tbody>
           <tr>
               <td>Coffee</td>
               <td id="coffeePrice" value="2.99">$2.99</td>
               <td>
                   <input type="number" name="quantityCoffee" id="quantityCoffee" value="0">
               </td>
           </tr>
           <tr>
               <td>Tea</td>
               <td id="teaPrice" value="1.99">$1.99 </td>
               <td>
                   <input type="number" name="quantityTea" id="quantityTea" value="0">
               </td>
           </tr>
           <tr>
               <td>Water</td>
               <td id="waterPrice" value="1.25">$1.25</td>
               <td>
                   <input type="number" name="quantityWater" id="quantityWater" value="0">
               </td>
           </tr>
        </tbody>
    </table>
    <input type="button" name="totalCost" value="Total Cost" id="checkCost">
    <textarea id="display"></textarea>
</form>

<script TYPE="text/javascript">;
document.getElementById("checkCost").onclick = function totalCost(e){
    e.preventDefault();
    var qC= document.getElementById("quantityCoffee").value;
    var qT= document.getElementById("quantityTea").value;
    var qW= document.getElementById("quantityWater").value;
    var sum= (qC*2.99)+(qT*1.99)+(qW * 1.25);

    document.getElementById("display").value =  "Cost is " + sum;
}
</script>

JS Fiddle

Answer 3

因为您没有获得HTML元素的value，所以您自己获得了元素：

var qC= document.getElementById("quantityCoffee").value;
var qT= document.getElementById("quantityTea").value;
var qW= document.getElementById("quantityWater").value;

如 @DaveAnderson 所述，您需要使用textarea设置.value：

 document.getElementById("display").value = sum;

为什么javascript不会写回html文件？

3 个答案: