Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Krzysztof Kucharzyk
.a{fill-rule:evenodd;}techdegree
Krzysztof Kucharzyk
Front End Web Development Techdegree Student 4,005 Points

Dynamically add input field, sum up values from input field - need help to change this code a lil bit.

Hey guys I have a question and I'm looking for help to change this code a lil bit cause I'm struggling to do this for the last hour and I can't seem to figure it out how to change it.

This script works exactly how I want it to be. I can add an input field, I can delete input field and what's the most important it sum up all values. https://jsfiddle.net/btxjkgr4/

What I need is to change this script that It can instead of creating div's, create next table rows with 3 columns to fit this table and sum up all values from 3rd column in each row:

<table class="table" id="tab_1">
      <tr>
        <th class="tg-031ec" colspan="3">Class</th>
      </tr>
      <tr>
        <td class="tg-031ec">Name</td>
        <td class="tg-031ec">Profile</td>
        <td class="tg-031ec">NO. Users</td>
      </tr>
      <tr>
        <td class="tg-031e">A</td>
        <td class="tg-031e"><input class="input_t4" type="text" name="fname"></td>
        <td class="tg-031e"><input class="input_t4" type="text" name="fname">value</td>
      </tr>
      <tr>
        <td class="tg-yw4lcr" colspan="2">Total:</td>
        <td class="tg-yw4l"><input class="input_t4" type="text" name="fname">SUM VALUE HERE</td>
      </tr>
    </table>

I'd appreciate for help, Cheers, Chris.

rydavim
rydavim
18,814 Points

Can you elaborate on why you want to do it this way, and why you want to use that specific script?

Looking at it it seems like it would be easier to start from scratch than to modify that script to use the table code you've posted here.

Steven Parker
Steven Parker
243,318 Points
Steven Parker
Steven Parker
243,318 Points

Let me guess ... homework assignment from school? :japanese_ogre:

Krzysztof Kucharzyk
.a{fill-rule:evenodd;}techdegree
Krzysztof Kucharzyk
Front End Web Development Techdegree Student 4,005 Points

@Steven Parker Nah it's not a school project or anything similar. This is more for my own and for learning purpose.

@rydavim Ummm It's not mandatority to use this specific script I thought it will be easier cause It does what I need to do which is add new input field where I can input some values and it will sum up all values from all input fields.

And what I want is to add table rows with 3 cols instead of just one input field. Would you mind to help me with this ?

rydavim
rydavim
18,814 Points

I would check out this course on creating interactive web pages with javascript. It's a similar project, and would give you a good foundation for writing this yourself.

I really can't recommend trying to modify that script to work with your current table markup. It's not really designed well for that, and it's likely to be more difficult and complicated than writing it from scratch.