為何javascript無法將其寫回到html文件中？

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將其計算回文本區域后，就不會返回總成本。 我究竟做錯了什么？

Answer 1

您不能為<textarea>設置innerHTML ，而應使用value ，請參見如何使用Javascript更改<textarea>的內容

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小提琴

Answer 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;

為何javascript無法將其寫回到html文件中？

問題描述

3 個解決方案

解決方案1
2 2015-11-23 00:47:24

解決方案2
2 已采納 2015-11-23 01:03:15

解決方案3
1 2015-11-23 00:47:57

為何javascript無法將其寫回到html文件中？

問題描述

3 個解決方案

解決方案1 2 2015-11-23 00:47:24

解決方案2 2 已采納 2015-11-23 01:03:15

解決方案3 1 2015-11-23 00:47:57

解決方案1
2 2015-11-23 00:47:24

解決方案2
2 已采納 2015-11-23 01:03:15

解決方案3
1 2015-11-23 00:47:57