为什么javascript赢了'；不写回html文件吗？_Javascript_Html_Function

为什么javascript赢了'；不写回html文件吗？

javascript html function

为什么javascript赢了'；不写回html文件吗？,javascript,html,function,Javascript,Html,Function,您不能为设置innerHTML。您应该使用值，请参见，因为您没有获取HTML元素的值，而是获取它自己的元素： <!DOCTYPE html> <html lang="el"> <head> <form id="purchase""> <table border=1> <thead> <tr> <th>Menu</th> <th>Price

您不能为

设置

innerHTML

。您应该使用

值

，请参见，因为您没有获取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>


除此之外，正如@DaveAnderson所指出的，您还需要使用.value
设置文本区域
：
var qC= document.getElementById("quantityCoffee").value;
var qT= document.getElementById("quantityTea").value;
var qW= document.getElementById("quantityWater").value;

你没有完全达到目标，错过了一些东西，但这里有一个工作小提琴的代码为你
 document.getElementById("display").value = sum;


菜单
价格
量
咖啡
$2.99
茶叶
$1.99 
水
$1.25
;
document.getElementById（“checkCost”）.onclick=函数总成本（e）{
e、 预防默认值（）；
var qC=document.getElementById（“QuantityOffee”）.value；
var qT=document.getElementById（“quantityTea”）.value；
var qW=document.getElementById（“quantityWater”）.value；
变量和=（qC*2.99）+（qT*1.99）+（qW*1.25）；
document.getElementById（“显示”）.value=“成本为”+总和；
}

浏览器开发人员工具控制台中是否有错误？没有，我没有语法错误。我正在使用括号。您在哪里调用计算函数？html中有很多语法错误。首先，您需要将表单/表格放入标记中。不是标签。@maxxi我在使用onclick提交表单时调用它，错了吗？
<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>