How do I write a variable in javascript from getelementbyid

Question

This is probably a simple question ( or I assume to be ) however, I still can't get it to work no matter how much i twinker with it. I am trying to write a variable inside a li tag. This variable should hold the text within another div tag like so:

<script type="text/javascript">
var item = document.getElementById('thistext').innerHTML;
                    function songlist () {
document.write("<div class='overview'><ul><li> item </li></ul></div>");
}
</script>


<div id="thistext">hello</div>

<!-- I want it to appear here -->
<div class="viewport">
<script type="text/javascript">
songlist ();
</script>
</div>

So basically I need the text within "thistext" div tag to appear within the li tag which is within the ul etc (I don't know if thats unnecessary info or not ) I've also tried putting the script and its function within the viewport tag itself and with:

document.getElementById("id").innerHTML = "value";

that layout too but it doesn't appear to be showing working and I can't seem to understand why. I'm looking forward to the responses and thanks in advance.

Neil Kennedy · Accepted Answer · 2012-09-06 14:55:28Z

4

Change it to

document.write("<div class='overview'><ul><li>" + item + "</li></ul></div>");

answered Sep 6, 2012 at 14:55

Neil Kennedy

6031 gold badge6 silver badges12 bronze badges

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

6 Comments

Alex K. Over a year ago

And don't try to read the element before its been loaded in the document.

Roy Over a year ago

Ah thanks that works, However it seems to come up with "undefined" is that because the "this text" is still loading after the viewport has loaded?

Neil Kennedy Over a year ago

Put the first script below the div. (i.e. make it the last thing on the page)

Roy Over a year ago

or is the $(document).ready() a possibility? as I have recently read up about it.

Neil Kennedy Over a year ago

Yes, but you'll have to change around your script to work. You'd end up putting songlist (); into the $(document).ready() function. You'd then have to change your songlist function to be $('.viewport').innerHTML("<div class='overview'><ul><li>" + item + "</li></ul></div>")

|

Simon · Accepted Answer · 2012-09-06 15:04:44Z

3

document.write("<div class='overview'><ul><li> item </li></ul></div>");

needs to be

document.write('<div class="overview"><ul><li>' + item + ' </li></ul></div>');

Edit:

I feel like I should point out that this isn't the best way to achieve this. Maybe something like this would better...

<script type="text/javascript">
   window.onload = function(){
      document.getElementById('viewport').innerHtml = document.getElementById('thistext').innerHtml;
   };
</script>

Saying that, have you looked in the jQuery framework at all? It makes DOM manipulation very easy. There is a time and a place for it though. If all you're doing is replacing the text in one <div> with the text from another <div> then maybe its not appropriate.

edited Sep 6, 2012 at 15:04

answered Sep 6, 2012 at 14:55

Simon

2,8312 gold badges20 silver badges24 bronze badges

2 Comments

Roy Over a year ago

Hmm I will look into that because I was thinking of implementing this idea throughout my site. thanks. But, viewport is a class and not a id would the "getelementbyid" still work for that?

Simon Over a year ago

oops sorry, missed that. getElementById would not work on a class. Using jQuery however you could use $('.viewport') instead. You can use almost anything to get a DOM element in jQuery :)

Josh Bedo · Accepted Answer · 2012-09-06 14:55:37Z

0

Like this?

document.write("<div class='overview'><ul><li>" + item + "</li></ul></div>");

answered Sep 6, 2012 at 14:55

Josh Bedo

3,4723 gold badges24 silver badges33 bronze badges

Comments

mortb · Accepted Answer · 2012-09-06 14:59:58Z

0

-now it works: You are missing '' in getElementById and teh function has to be moved after the div and you have to place the variable with surrounded by +''+ in the document write

jsfiddle: http://jsfiddle.net/fMNWt/

<div id="thistext">hello</div>
     <script type="text/javascript">
var item = document.getElementById('thistext').innerHTML;
                    function songlist () {
document.write("<div class='overview'><ul><li>" + item + "</li></ul></div>");
}
</script>  
<!-- I want it to appear here -->
<div class="viewport">
<script type="text/javascript">
songlist ();
</script>
</div>

answered Sep 6, 2012 at 14:59

mortb

9,9213 gold badges30 silver badges51 bronze badges

Collectives™ on Stack Overflow

How do I write a variable in javascript from getelementbyid

4 Answers 4

6 Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related