How to write into a table with Javascript?

Question

<Script>
function getExperience()
{
    var xp = document.getElementById('txt_XP').value;
    document.getElementByID("plank").innerHTML = xp/30;
}
</Script>

So here is my code, and my problem is that I seem to be unable to write over data in a table with the id's planl, oakPlank, teakPlank, and mahoganyPlank. I am thinking that I may be making an obvious mistake to someone who has done this sort of thing before, but I can't seem to catch it. Any help is much appreciated, and here is a snippet of my table, if it helps:

<tr>
    <td>Plank</td>
    <td id="plankXP">30</td>
    <td id="plank">0</td>
</tr>

EDIT: I didn't realize that this may be pertinent, my bad. This is the form I used to get input, which after putting an alert in to see if it could retrieve the XP, it functioned correctly:

<form name="experience" id="experience_frm" action="#">
    Experience: <input type="text" name="XP" id="txt_XP"/>
    <input type="submit" value="Go" onclick="getExperience();"/>
</form>

try putting alert in getExperience(), is it firing properly? — IT ppl
– IT ppl, Commented Apr 9, 2013 at 4:33
@MattBall I wouldn't think so. They seem to understand the difference between .value and .innerHTML, and even have the id including "txt"...so I'm guessing it's a textbox we haven't been shown. — Ian
– Ian, Commented Apr 9, 2013 at 4:40
I've made sure that getExperience is firing properly, the only problem is it won't seem to write over the 0 that I left as a placeholder in the third cell of that row. @ITppl — shermanzach
– shermanzach, Commented Apr 9, 2013 at 4:40

Ian · Accepted Answer · 2013-04-09 04:42:30Z

5

You have used the wrong document method. Javascript is case sensitive. You used:

document.getElementByID

for getting the id="plank" element. But you need to use:

document.getElementById

Notice the d (last character) change.

With this change, a simple example works for me:

http://jsfiddle.net/wqZAq/

answered Apr 9, 2013 at 4:42

Ian

51k13 gold badges104 silver badges111 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

shermanzach Over a year ago

Oh gosh. Thank you for that, I knew it had to be something small, I was just staring at it for the past hour and at that point I needed a second opinion. Awesome help.

Ian Over a year ago

@zsherman Haha no problem. These little typos are the worst thing too, and so hard to notice. Something that might've helped, is if you had your browser's console open, you should've gotten an exception, and would've at least helped narrow down what the problem could've been.

Ian Over a year ago

@zsherman Yeah, an IDE could help with autocomplete, but the browser's console will provide runtime exceptions and problems, and allow you to monitor some things. They're normally activated by pressing F12 (if it comes native), but could require downloading. In Firefox, it's Firebug (an addon). In Internet Explorer and Chrome, it's Developer Tools (same name, different things)

shermanzach Over a year ago

One follow-up question if any of you have time; what is causing the page to refresh after getExperience() fires?

Ian Over a year ago

@zsherman Your calling getExperience from a submit button. It's submitting the form!

Ravi · Accepted Answer · 2013-04-09 04:45:49Z

0

Try This

<Script>
function getExperience()
{
    var xp = document.getElementById('txt_XP').value;
    var newxp = parseInt(xp);
    var div = newxp/30;
    document.getElementById("plank").innerHTML = div;
}
</Script>
<table>
<tr>
    <td>Plank</td>
    <td id="plankXP">30</td>
    <td id="plank">0</td>
</tr>
</table>
<input type="text" id="txt_XP" name="txt_XP" />
<input type="button" onclick="getExperience();" />

answered Apr 9, 2013 at 4:45

Ravi

4632 silver badges11 bronze badges

Collectives™ on Stack Overflow

How to write into a table with Javascript?

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related