如何將javascript寫回html文件？

<!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將不會返回總成本。我究竟做錯了什麼？如何將javascript寫回html文件？

來源

2015-11-23 Vigan

做您在瀏覽器開發者工具控制檯中遇到任何錯誤？ –

不，我得到沒有語法錯誤我正在使用括號 – Vigan

你打電話給你的計算功能？ – Maxxi

你沒有完全得到那裏，錯過了一些東西，但在這裏是爲您的工作小提琴代碼...

<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

來源

2015-11-23 01:03:15 Ben

你不能設置innerHTML爲<textarea>你應該使用value相反，看到How to change the Content of a <textarea> with Javascript

來源

2015-11-23 00:47:24

因爲你沒有得到你的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;

來源

2015-11-23 00:47:57

如何將javascript寫回html文件？

回答

相關問題