Plz help in this code


#1

I have made a table in which we can add values like item, date of purchase and the item’s cost through HTML input widget.

I want to make a function which will return the total sum of the purchases made in the last cell of the last row.

The following is the HTML &CSS :

<style>
table {
border-collapse: collapse;
border: 2px solid rgb(200,200,200);
letter-spacing: 1px;
font-size: 0.8rem;
width: 500px;
}

td, th {
border: 1px solid rgb(190,190,190);
padding: 10px 20px;
}

th {
background-color: rgb(235,235,235);
}

td {
text-align: center;
}

tr:nth-child(even) td {
background-color: rgb(250,250,250);
}

tr:nth-child(odd) td {
background-color: rgb(245,245,245);
}

caption {
padding: 10px;
  font-size: 20px;
}

tbody {
  font-size: 15px;
  font-style: italic;
 }

#cont {
  float: left; 
  margin: 50px;
  border: 2px solid black;
  padding: 10px;
  border-radius: 5px;
}

#cont div {
  margin: 10px;
}
</style>

<div id="cont">

<div>
<label for="inp">Item:</label>
<input type="text" id="inp" name="inp">
  </div>

<div>
<label for="dt">Date:</label>
<input type="date" id="dt" name="dt">
</div>

<div>
<label for="cst">Cost:</label>
<input type="text" id="cst" name="cst">
  </div>

  <button>Add Item</button>

</div>

<table>

  <caption>My Expenditure</caption>

  <thead>
    <tr>
      <th>Item</th>
      <th>Date</th>
      <th>Cost (INR)</th>
    </tr>
  </thead>
  
  <tbody>
 <!--<tr>
      <td>Nike Sneakers</td>
      <td>19/3</td>
      <td>7000</td>
    </tr>
<tr>
      <td>Camera</td>
      <td>20/3</td>
      <td>26000</td>
    </tr>
<tr>
      <td>Book: Mr. Mercedes</td>
      <td>20/3</td>
      <td>450</td>
    </tr>-->
 </tbody>
  
  <tfoot>
    <tr>
      <td colspan="2">SUM</td>
      <td>0</td>
    </tr>
  </tfoot>
  
</table>

</div> 

The JS code that I wrote:

var item = document.getElementById("inp");
var dt = document.getElementById("dt");
var cst = document.getElementById("cst");
var btn = document.querySelector("button");
var tble = document.querySelector("table");

btn.addEventListener("click", addItem);

function addItem() {
  var myItem = item.value;
  item.value = "";
  
  var date = dt.value;
  dt.value = "";
  
  var cost = cst.value;
  cst.value = "";
  
  var newr = document.createElement('tr');
  
  var newd1 = document.createElement('td');
   var newd2 = document.createElement('td');
   var newd3 = document.createElement('td');
  
  newr.appendChild(newd1);
  newr.appendChild(newd2);
  newr.appendChild(newd3);
  
  newd1.textContent = myItem;
  newd2.textContent = date;
  newd3.textContent = cost;
  
  tble.appendChild(newr);
  
 item.focus();
}

I’m having difficulty in obtaining the sum of the cost like what method to use etc…


#2

you could use .value to get the value:

var cstValue = document.getElementById("cst").value;

this way, you can add it to sum and update sum


#3

I tried it but it’s not working. Can’t see where I’m going wrong.

I gave the total cell an id of “sum”.

<tfoot>
    <tr>
      <td colspan="2">SUM</td>
      <td id="sum">0</td>
    </tr>
  </tfoot>

I added var total = document.getElementById("sum"); total.textContent = 0; to the top and added total.textContent = total += cost; to the end of the function.

Because as you said above:

document.getElementById("cst") is cst and cst.value is cost.

Below is the full JS code:

var item = document.getElementById("inp");
var dt = document.getElementById("dt");
var cst = document.getElementById("cst");
var btn = document.querySelector("button");
var tble = document.querySelector("table");

var total = document.getElementById("sum");
total.textContent = 0;

btn.addEventListener("click", addItem);

function addItem() {
  var myItem = item.value;
  item.value = "";
  
  var date = dt.value;
  dt.value = "";
  
  var cost = cst.value;
  cst.value = "";
  
  var newr = document.createElement('tr');
  
  var newd1 = document.createElement('td');
   var newd2 = document.createElement('td');
   var newd3 = document.createElement('td');
  
  newr.appendChild(newd1);
  newr.appendChild(newd2);
  newr.appendChild(newd3);
  
  newd1.textContent = myItem;
  newd2.textContent = date;
  newd3.textContent = cost;
  
  tble.appendChild(newr);
  
  total.textContent = total += cost;
  
 item.focus();
}

It puts the total value in the sum along with “[object HTMLTableCellElement]” and it doesn’t add the next cost to the pervious cost.


#4

you don’t have a variable containing the total cost? You need to create a variable for this, to which you can add cost before inserting it into the webpage, that would be the recommended way

bin in which i can run the code more easily:

http://jsbin.com/dopoved/edit?html,css,js,output

that is just for me (and other people helping, to more easily being able to fiddle with the code)


#5

That’s what seems to be the problem for me I think. How do I get the total cost? I’ve already put 0 in the last cell. I’m getting very confused in this…

Yeah jsbin is also very good.

It’s not working. It says that you’re steaming…


#6

you should create a variable first, set it to zero. Then use textContent to display the value on the webpage (just use the variable here)

then if sum needs to be increased, you can increase the variable and then use textContent to display the updated variable on the webpage.


#7

I think I’m getting close.

I added var ttl = document.getElementById("sum"); var total = 0 at the top and added ttl.textContent = total += cost; in the bottom of the function.

But since I wrote cst.value = ""; so when I add the cost to the total it converts to string.

If I add an item of cost 20 and another item of cost 15, the total becomes 02015 instead of 035 :rofl:

var item = document.getElementById("inp");
var dt = document.getElementById("dt");
var cst = document.getElementById("cst");
var btn = document.querySelector("button");
var tble = document.querySelector("table");

var ttl = document.getElementById("sum");
var total = 0;

btn.addEventListener("click", addItem);

function addItem() {
  var myItem = item.value;
  item.value = "";
  
  var date = dt.value;
  dt.value = "";
  
  var cost = cst.value;
  cst.value = "";
  
  var newr = document.createElement('tr');
  
  var newd1 = document.createElement('td');
   var newd2 = document.createElement('td');
   var newd3 = document.createElement('td');
  
  newr.appendChild(newd1);
  newr.appendChild(newd2);
  newr.appendChild(newd3);
  
  newd1.textContent = myItem;
  newd2.textContent = date;
  newd3.textContent = cost;
  
  tble.appendChild(newr);
  
  ttl.textContent = total += cost;
  
 item.focus();
}


#8

then the values are strings, you would need something like parseInt to convert to integer.

this:

ttl.textContent = total += cost;

is waiting for a problem to happen, if you remove the shorthand you get:

ttl.textContent = total = total + cost;

who knows what corner condition this might give? A program doesn’t have to be written in the shortest amount of lines possible, you can perfectly update total variable first before displaying it on the webpage


#9

But still it will convert to a string. I’m working on converting it to a number by using Number()


#10

Not working…


#11

Why would you use Number over parseFloat or parseInt?


#12

I tried ttl.textContent = parseInt(total += cost); as well as ttl.textContent = Number(total += cost); . Both of them are not working

I think it has to do with cst.value = "". Since this is set to a string so no matter what we add, the result will always be a string. But even if I write cst.value = Number(0) or cst.value = 0, it doesn’t change anything.


#13

i already covered this several times:


#14

I did it. Wrote total = total + cost; and then ttl.textContent = total. Still same result.

I’m still working on it. Will get back to you…


#15

var ttl = document.getElementById("sum");, but there is no element with id sum


#16

Yeah It’s not in the above code that I wrote initially but I did put the id afterwards…


#17

Then its really difficult for me to help, if you do such kind of things. If you make changes i am not aware of, i need to chase these changes as well.

Please be a bit more forth coming with all the changes you make, and try to explain why you think your code is not working, and what you need help with


#18

I told you before. If you look at my first reply to you in this post.

I’m sorry maybe I wasn’t clear in my previous reply. I did not put the id in the code when I started this topic but afterwards I put it when I was trying to refer the total cell.


#19

Did you use parseFloat? Otherwise, we are still dealing with strings, which won’t work.

retrieving values from html will give strings, adding/concat string gives for example:

"5" + "5"

gives 55, while:

5 + 5

gives 10.

I got it to work, but its something i told you quite a while ago.

its only a small portion of what i asked, it seems you do not appreciate the way i help.


#20

Yes I used parseFloat but it’s not working. Plz look my code:

HTML & CSS:

<style>
table {
border-collapse: collapse;
border: 2px solid rgb(200,200,200);
letter-spacing: 1px;
font-size: 0.8rem;
width: 500px;
}

td, th {
border: 1px solid rgb(190,190,190);
padding: 10px 20px;
}

th {
background-color: rgb(235,235,235);
}

td {
text-align: center;
}

tr:nth-child(even) td {
background-color: rgb(250,250,250);
}

tr:nth-child(odd) td {
background-color: rgb(245,245,245);
}

caption {
padding: 10px;
  font-size: 20px;
}

tbody {
  font-size: 15px;
  font-style: italic;
 }

#cont {
  float: left; 
  margin: 50px;
  border: 2px solid black;
  padding: 10px;
  border-radius: 5px;
}

#cont div {
  margin: 10px;
}
</style>

<div id="cont">

<div>
<label for="inp">Item:</label>
<input type="text" id="inp" name="inp">
  </div>

<div>
<label for="dt">Date:</label>
<input type="date" id="dt" name="dt">
</div>

<div>
<label for="cst">Cost:</label>
<input type="text" id="cst" name="cst">
  </div>

  <button>Add Item</button>

</div>

<table>

  <caption>My Expenditure</caption>

  <thead>
    <tr>
      <th>Item</th>
      <th>Date</th>
      <th>Cost (INR)</th>
    </tr>
  </thead>
  
  <tbody>
 <!--<tr>
      <td>Nike Sneakers</td>
      <td>19/3</td>
      <td>7000</td>
    </tr>
<tr>
      <td>Camera</td>
      <td>20/3</td>
      <td>26000</td>
    </tr>
<tr>
      <td>Book: Mr. Mercedes</td>
      <td>20/3</td>
      <td>450</td>
    </tr>-->
 </tbody>
  
  <tfoot>
    <tr>
      <td colspan="2">SUM</td>
      <td id="sum">0</td>
    </tr>
  </tfoot>
  
</table>

</div> 

JS:

var item = document.getElementById("inp");
var dt = document.getElementById("dt");
var cst = document.getElementById("cst");
var btn = document.querySelector("button");
var tble = document.querySelector("table");

var ttl = document.getElementById("sum");
var total = 0;

btn.addEventListener("click", addItem);

function addItem() {
  var myItem = item.value;
  item.value = "";
  
  var date = dt.value;
  dt.value = "";
  
  var cost = cst.value;
  cst.value = "";
  
  var newr = document.createElement('tr');
  
  var newd1 = document.createElement('td');
   var newd2 = document.createElement('td');
   var newd3 = document.createElement('td');
  
  newr.appendChild(newd1);
  newr.appendChild(newd2);
  newr.appendChild(newd3);
  
  newd1.textContent = myItem;
  newd2.textContent = date;
  newd3.textContent = cost;
  
  tble.appendChild(newr);
  
  total = parseFloat(total + cost);
  
  ttl.textContent = total
  
 item.focus();
}

I’ve been running the code on codepen only. Will try on JSBin also incase theres a problem with cp.

I first assigned the value to the total variable and then put the total variable as the textContent of the last cell.

No way! Why would you think like that?
You have helped me out so many times in the past when I didn’t even know what JavaScript was!
I remember what you’ve told me while correcting my mistakes in my posts while experimenting with codes.

The reason I put my doubts on codecademy is because I know you will be there to help.

Sorry if I came off as rude. I said it because I thought you didn’t see that I’ve already given the id to the cell. It was not there when I first started this topic but I put it afterwards and told you about it.