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

【问题标题】：How come javascript won't write back into the html file?为什么javascript不会写回html文件？
【发布时间】：2015-11-23 00:43:31
【问题描述】：

 <!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 在将其计算回文本区域后不会返回到总成本。我做错了什么？

【问题讨论】：

您在浏览器开发者工具控制台中是否遇到任何错误？
不，我使用括号没有语法错误
你在哪里调用你的计算函数？
你的 html 中有很多语法错误。对于初学者，您需要将表单/表格放在标记内。不是标签。
@maxxi 我在使用 onclick 提交表单时调用它，有错吗？

标签： javascript html function

【解决方案1】：

您还没有完全到达那里，错过了一些东西，但这里的代码为您提供了一个有效的小提琴......

<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

【讨论】：

【解决方案2】：

您不能将innerHTML 设置为<textarea>，而应使用value，请参阅How to change the Content of a <textarea> with Javascript

【讨论】：

【解决方案3】：

因为你没有得到你的 HTML 元素的 value，你得到的是它自己的元素：

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

除了 @DaveAnderson 所述，您还需要使用 .value 设置您的 textarea：

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

【讨论】：