How come javascript won't write back into the html file?

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>

Hello guys, so i am trying to use a form to make a ordering menu. This is the code that i have so far. The trouble i am having is that the javascript won't return to total cost after it calculates it back into the text area once the button is clicked. What am i doing wrong?

do you get any errors in the browsers developer tools console? — Jaromanda X, Nov 23 '15 at 00:44
There are a lot of syntax errors in your html. For starters, you need to put your form/ table inside the tags. Not the tags. — mattdevio, Nov 23 '15 at 00:48
@maxxi I'm calling it when the form is submitted using onclick, is that wrong? — Vigan, Nov 23 '15 at 00:53

score 2 · Answer 1 · edited May 23 '17 at 12:03

2

You can't set innerHTML for a <textarea> you should use value instead, see How to change the Content of a <textarea> with Javascript

edited May 23 '17 at 12:03

Community

1
1

answered Nov 23 '15 at 00:47

Dave Anderson

11,836
3
58
79

score 2 · Accepted Answer · answered Nov 23 '15 at 01:03

You didn't quite get there, missed a few things, but here is the code with a working fiddle for you...

<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

score 1 · Answer 3 · answered Nov 23 '15 at 00:47

Because you are not getting the value of your HTML element, you are getting the element it self:

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

Along with this as noted by @DaveAnderson you need to set your textarea using .value as well:

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

How come javascript won't write back into the html file?

3 Answers3