How to write in a table div with Javascript

Question

0.00/5 (No votes)

See more:

JavaScript

var day = document.getElementById("day");
var holiday = new Date("October 30, 2012 12:55:00");

HTML

<table border="3px" align="center" style="border-color:black; border-style:solid; border-collapse:collapse; text-align:center;">
	<tr>
		<td width="100px";>days</td>
	</tr>
	<tr>
		<td id="day" width="100px";>here ist a space with html code (  ;)</td>
	</tr>
</table>

How can I write in the table div with the id day the variable holiday?

Posted 5-Sep-12 9:45am

Chi Ller

Updated 5-Sep-12 10:28am

v3

Add a Solution

3 solutions

Solution 3

A test/demo for how to write to the table cell (full HTML doc):

HTML

<html>
  <head>
    <script type="text/javascript">
	  var day = document.getElementById("day");
	  var holiday = new Date("October 30, 2012 12:55:00");
			
	  function writeToField() {
	    document.getElementById("day").innerHTML = holiday.toString();
	  }
    </script>
  </head>
  
  <body>
    <table border="3px" align="center" style="border-color:black; border-style:solid; border-collapse:collapse; text-align:center;">
	  <tr>
	    <td width="100px">days</td>
	  </tr>
	  <tr>
	    <td id="day" width="100px"> </td>
	  </tr>
    </table>
		
    <input type="button" id="testButton" value="Test"  onclick="writeToField();">
  </input></body>
</html>

Posted 5-Sep-12 10:39am

Andrei Straut

Updated 5-Sep-12 10:52am

v3

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Joan M · Accepted Answer · 2012-09-05T09:51:00

Solution 1

Take a look at these links:

http://stackoverflow.com/questions/4252130/passing-javascript-variable-to-html-textbox[^]

http://www.htmlgoodies.com/beyond/javascript/article.php/3471111/A-Quick-Tutorial-on-JavaScript-Variable-Passing.htm[^]

http://www.daniweb.com/web-development/javascript-dhtml-ajax/threads/194344/retrieve-value-of-javascript-variable-to-html-table-cells[^]

All in all I've searched google using variable javascript to html.

Good luck.

Posted 5-Sep-12 9:51am

Joan M

Comments

Andrei Straut 5-Sep-12 15:55pm

We posted at the same time. I'll leave my solution here instead of deleting though, maybe it'll help someone else, as well as providing direct access to it. I've upvoted yours too.

Kuthuparakkal 5-Sep-12 22:58pm

lot more stuff, my 5+

**Andrei Straut** · Accepted Answer · 2012-09-05T09:51:00

Solution 2

You can try this:

JavaScript

document.getElementById("day").innerHTML = holiday;

Also, you can find innerHTML reference here[^]

Furthermore, if you don't access the particular table cell in any other location, your can get rid of this whole line
var day = document.getElementById("day");

Posted 5-Sep-12 9:51am

Andrei Straut

Updated 5-Sep-12 9:53am

v2

Comments

Joan M 5-Sep-12 15:57pm

Nice, direct and clear answer... and yes... completely at the same time... :D 5ed too.

Chi Ller 5-Sep-12 16:04pm

so I should be able to write
day.innerHTML = (holiday);
if I want to have it in two steps. Am I right?

Andrei Straut 5-Sep-12 16:08pm

Yes, definitely. I suggested deleting that line because I was thinking of simplifying it a little bit as well as eliminating possible variable scope issues (Javascript variable is, well...pretty unintuitive), but if you want it in 2 steps, that would be ok as well.

You can find a fairly nice scope demo here[^]

Chi Ller 5-Sep-12 16:12pm

As far as i know your answer should work :D but it doesn´t :/ And if I do it in one step like you write it, it doesn´t work too.
Is it important to write it without brackets?

Andrei Straut 5-Sep-12 16:17pm

Oh heck, I missed the Date datatype on your variable, your errors will most likely come from there.
Try this instead: document.getElementById("day").innerHTML = holiday.toString();

Also, Date object reference here[^]

Other that that, you may want to fire up the developer console and see the error text (if any) on your page. Just press F12 in your browser, and check there

Chi Ller 5-Sep-12 16:24pm

ah ok I have the following Error:
TypeError:document.getElementById("day") is zero

Andrei Straut 5-Sep-12 16:29pm

Is
TypeError:document.getElementById("day") is zero
your exact error text, or does it in fact say that it's null?

Chi Ller 5-Sep-12 16:31pm

it´s the exact error

Andrei Straut 5-Sep-12 16:35pm

Hm...I just put together what you have in an HTML doc. Tested and it works (Chrome at least). I'm attaching it as a solution below, comment sections don't highlight or format properly

Chi Ller 5-Sep-12 16:41pm

yes it works but can´t I do it without a button:
<html>
<head>
<script type="text/javascript">
var day = document.getElementById("day");
var holiday = new Date("October 30, 2012 12:55:00");
document.getElementById("day").innerHTML = holiday.toString();
</script>
</head>
<body>
<table border="3px" align="center" style="border-color:black; border-style:solid; border-collapse:collapse; text-align:center;">
<tr>
<td width="100px";>days</td>
</tr>
<tr>
<td id="day" width="100px";>
</td>
</tr>
</table>
</body>
</html>

Andrei Straut 5-Sep-12 16:45pm

You'll still have to find a trigger for the code to execute, and if you don't want a button, document.ready[^] event comes to mind (jQuery though, if that's not an issue).

Or if you don't want jQuery and you want pure JavaScript, there's also checking the ready state[^]

Chi Ller 5-Sep-12 16:53pm

so can i write <table onload="writeToField()> ?

Andrei Straut 5-Sep-12 16:57pm

No, onLoad works only for a few elements on a page (body, script, and iFrame come to mind, maybe others, but definitely not table).

This being said however, you can definitely use <body onload="writeToField();">

Chi Ller 5-Sep-12 17:01pm

the problem is, the whole body is just included so if I write <body onload="writeToField();"> it will be on every page

Andrei Straut 5-Sep-12 17:04pm

Off the top of my head (may be better solutions, but I'm tired and this is the first that comes to mind) in the writeToField method add a check whether the table cell exists, or page title (I'm assuming they're different) is what you expect it to be for the page you need

Chi Ller 5-Sep-12 17:20pm

ok thanks now it works
Great and thank you for your big help (:

Andrei Straut 5-Sep-12 17:22pm

You're welcome. Glad to help