Inserting a numeric value to cell with Javascript

Question

My professor has a unique task that prevents us from using any JQuery or basically anything that isn't Javascript or HTML/CSS.

I have to, on a mouse click, update the value within a cell with some numeric value. I am new to Javascript and basically here is what I am working with.

<table id="score">
                <tr>
                    <td> One's </td>
                    <td class="scoring" id="ones" onClick="inputScore()">  </td>
                </tr>
</table>

What I want to do is click the cell with id=ones and insert a value of 50 with the function inputScore(). What is the best way to approach this using only Javascript? Thanks in advance.

Edit: Code ported from comments:

<script>
  function inputScore() { 
    var x = 50; 
    document.getElementById("ones") = x; 
  } 
</script>

For an assignment question, can you please show what code you have started with? Most of us are reluctant to give complete answers to assignments or exams. Post your function definition, and where you got stuck. — Michael Berkowski
– Michael Berkowski, Commented Dec 4, 2012 at 17:08
...And for what it's worth, you should thank your professor for prohibiting jQuery while you learn. Lots of people never bother to learn how JavaScript really works, and get really stuck when the need comes use it as designed. — Michael Berkowski
– Michael Berkowski, Commented Dec 4, 2012 at 17:09
<script> function inputScore() { var x = 50; document.getElementById("ones") = x; } </script> This is more or less what I am trying to do, he didn't go into great detail on how to do this and I cannot find anything concrete online about this type of issue. — Zach M.
– Zach M., Commented Dec 4, 2012 at 17:10

Michael Berkowski · Accepted Answer · 2012-12-04 17:17:40Z

1

You have correctly targeted the element with getElementById(), but you need to set its innerHTML property to modify the cell's contents.

function inputScore() { 
  var x = 50; 
  document.getElementById("ones").innerHTML = x; 
}

You were very nearly there. In this case you could also use .innerText since you are not adding any additional HTML markup, only the number 50.

If you want, you might consider modifying this function to accept the new value as a parameter:

function inputScore(value) {
  // Set the contents to value
  document.getElementById("ones").innerHTML = parseInt(value, 10);
}
// Called as
inputScore(50)

As you learn, it is recommended to use the MDN documentation as your point of reference. Here is the documentation on .innerHTML.

edited Dec 4, 2012 at 17:17

answered Dec 4, 2012 at 17:11

Michael Berkowski

271k47 gold badges452 silver badges395 bronze badges

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

4 Comments

Zach M. Over a year ago

Thank you very much, I have a desire to learn this to the best of my ability, are there any publications that are well good for javascript? I like having books :P

Michael Berkowski Over a year ago

@ZachM. My favorite is JavaScript: The good Parts by Douglas Crockford, but it is not really a beginner book. It does explain how JS is often misused though, which is really valuable. I don't have any beginner book recommendations unfortunately. The MDN docs are really excellent, and avoid w3schools.com.

Zach M. Over a year ago

ah I had been using w3schools.com thank you for the heads up.

Michael Berkowski Over a year ago

@ZachM. Generally the info there is pretty out of date, and sometimes encourages bad practices. It is not affiliated with the w3c.

Collectives™ on Stack Overflow

Inserting a numeric value to cell with Javascript

Edit: Code ported from comments:

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Edit: Code ported from comments:

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related