createElement Javascript

**Deadweight** · 09-16-2013, 02:10 AM

What im trying to is something a little weird and different. The code below just creates a few divs, css, and more javascript using javascript. Everything works fine besides the javascript. For some reason i can not get it to work.
What im trying to do is make the links

Code:

<a class="fl" onClick="new_text(\'calculator\')">Calculator</a><br /><a class="fl" onClick="new_text(\'train\')">Train</a>

onclick to view on the on the div element that is also created on the other statement.
i am using this javascript to make it appear on the other one:

Code:

function new_text(value) {x = document.getElementById(value);y = document.getElementById("hidden");y.style.display = "block"; if(y.innerHTML != x.innerHTML){y.innerHTML = x.innerHTML;}}

Any help would be great. I dont understand why this wont work

What is going wrong: When i click one anchor it works the first time; however, when i click the second it fails to work and change the innerHTML. Not sure why it wont change it tho :/

Thanks in advance.

Code:

<html>
<head>
<script>
function load_test(){
//creates StyleSheet
var ss1 = document.createElement('style');
var def = 'body {background-color:red;} .main_div {width:200px; border:1px solid white; position:absolute; top:150px; right:0px;background-color:black;color:white;text-indent: 2px;} .links {width:100%;border-top:1px solid white;padding:0;margin-top:2px;} a.fl {cursor:pointer;text-decoration:underline;color:red;} a.fl:hover {text-decoration:none;color:blue;} #hidden {display:none; background-color:black; color:red; width:200px;position:absolute;top:150px;left:0px;} .hidden_test {display:none;}';
ss1.setAttribute("type", "text/css");
var hh1 = document.getElementsByTagName('head')[0];
hh1.appendChild(ss1);
if (ss1.styleSheet) {   // IE
    ss1.styleSheet.cssText = def;
} else {                // the world
    var tt1 = document.createTextNode(def);
    ss1.appendChild(tt1);
}
//creates javascript
var ss = document.createElement('script');
var scr = 'function new_text(value) {x = document.getElementById(value);y = document.getElementById("hidden");y.style.display = "block"; if(y.innerHTML != x.innerHTML){y.innerHTML = x.innerHTML;}}';
ss.text = scr;
var hh = document.getElementsByTagName('head')[0];
hh.appendChild(ss);
//creates Main Div
var main_div = document.createElement('div');
var string = 'This is adding extra elements to a page that a user created! It is very simple to use.';
var links = '<div class="links"><a class="fl" onClick="new_text(\'calculator\')">Calculator</a><br /><a class="fl" onClick="new_text(\'train\')">Train</a></div>';
main_div.className = 'main_div'; 
var final = string+links
main_div.innerHTML = final;
document.body.appendChild(main_div);
//creates sub div
var sub_div = document.createElement('div');
var content = 'Something';
var objs = '<div id="calculator" class="hidden">This is the calculator</div><div id="train" class="hidden">This is the train command</div>';
sub_div.setAttribute("id", "hidden");
sub_div.innerHTML = content+objs;
document.body.appendChild(sub_div);

}
</script>
</head>
<body onload="load_test()">
<a class="style" href="">Something</a>
</body>
</html>

**jscheuer1** · 09-16-2013, 05:16 AM

When you do this the first time (from the new_text function):

Code:

y.innerHTML = x.innerHTML;

It wipes out the innerHTML of 'hidden' and replaces it with either the innerHTML of 'train' or the innerHTML of 'calculator'. So the next time you run new_text, neither the 'train' nor 'calculator' divs are there, and you get an error (from Chrome's developer tools console):

Uncaught TypeError: Cannot read property 'innerHTML' of null
new_text
onclick createcode-h.htm:1

There are various ways of dealing with this situation, here's one (additions highlighted):

Code:

<html>
<head>
<script>
function load_test(){
//creates StyleSheet
var ss1 = document.createElement('style');
var def = 'body {background-color:red;} .main_div {width:200px; border:1px solid white; position:absolute; top:150px; right:0px;background-color:black;color:white;text-indent: 2px;} .links {width:100%;border-top:1px solid white;padding:0;margin-top:2px;} a.fl {cursor:pointer;text-decoration:underline;color:red;} a.fl:hover {text-decoration:none;color:blue;} #hidden {display:none; background-color:black; color:red; width:200px;position:absolute;top:150px;left:0px;} .hidden_test {display:none;}';
ss1.setAttribute("type", "text/css");
var hh1 = document.getElementsByTagName('head')[0];
hh1.appendChild(ss1);
if (ss1.styleSheet) {   // IE
    ss1.styleSheet.cssText = def;
} else {                // the world
    var tt1 = document.createTextNode(def);
    ss1.appendChild(tt1);
}
//creates javascript
var ss = document.createElement('script');
var scr = 'function new_text(value) {x = document.getElementById(value);y = document.getElementById("hidden");y.style.display = "block"; if(y.innerHTML != x.innerHTML){y.innerHTML = x.innerHTML;}}';
ss.text = scr;
var hh = document.getElementsByTagName('head')[0];
hh.appendChild(ss);
//creates Main Div
var main_div = document.createElement('div');
var string = 'This is adding extra elements to a page that a user created! It is very simple to use.';
var links = '<div class="links"><a class="fl" onClick="new_text(\'calculator\')">Calculator</a><br /><a class="fl" onClick="new_text(\'train\')">Train</a></div>';
main_div.className = 'main_div'; 
var final = string+links
main_div.innerHTML = final;
document.body.appendChild(main_div);
//creates sub div
var sub_div = document.createElement('div');
var content = 'Something';
var objs = '<div id="calculator" class="hidden">This is the calculator</div><div id="train" class="hidden">This is the train command</div>';
sub_div.setAttribute("id", "hidden");
sub_div.innerHTML = content+objs;
document.body.appendChild(sub_div);
var hidden2 = sub_div.cloneNode('true');
hidden2.id = '';
hidden2.className = 'hidden_test';
var div;
while((div = sub_div.getElementsByTagName('div')[0])){
	sub_div.removeChild(div);
}
document.body.appendChild(hidden2);
}
</script>
</head>
<body onload="load_test()">
<a class="style" href="">Something</a>
</body>
</html>

**Deadweight** · 09-16-2013, 09:05 PM

Thanks for your suggestion. All i did was wrap a div around the "var content" and replaced the id with the id i gave the new id. Ill post it below:

Code:

<html>
<head>
<script>
function load_test(){
//creates StyleSheet
var ss1 = document.createElement('style');
var def = 'body {background-color:red;} .main_div {width:200px; border:1px solid white; position:absolute; top:150px; right:0px;background-color:black;color:white;text-indent: 2px;} .links {width:100%;border-top:1px solid white;padding:0;margin-top:2px;} a.fl {cursor:pointer;text-decoration:underline;color:red;} a.fl:hover {text-decoration:none;color:blue;} #hidden {background-color:black; color:red; width:200px;position:absolute;top:150px;left:0px;} .hidden {display:none;}';
ss1.setAttribute("type", "text/css");
var hh1 = document.getElementsByTagName('head')[0];
hh1.appendChild(ss1);
if (ss1.styleSheet) {   // IE
    ss1.styleSheet.cssText = def;
} else {                // the world
    var tt1 = document.createTextNode(def);
    ss1.appendChild(tt1);
}
//creates javascript
var ss = document.createElement('script');
var scr = 'function new_text(value) {x = document.getElementById(value);y = document.getElementById("other"); if(y.innerHTML != x.innerHTML){y.innerHTML = x.innerHTML}}';
ss.text = scr;
var hh = document.getElementsByTagName('head')[0];
hh.appendChild(ss);
//creates Main Div
var main_div = document.createElement('div');
var string = 'This is adding extra elements to a page that a user created! It is very simple to use.';
var links = '<div class="links"><a class="fl" onClick="new_text(\'calculator\')">Calculator</a><br /><a class="fl" onClick="new_text(\'train\')">Train</a></div>';
main_div.className = 'main_div'; 
var final = string+links
main_div.innerHTML = final;
document.body.appendChild(main_div);
//creates sub div
var sub_div = document.createElement('div');
var content = '<div id="other">Something</div>';
var objs = '<div id="calculator" class="hidden">This is the calculator</div><div id="train" class="hidden">This is the train command</div>';
sub_div.setAttribute("id", "hidden");
sub_div.innerHTML = content+objs;
document.body.appendChild(sub_div);

}
</script>
</head>
<body onload="load_test()">
<a class="style" href="">Something</a>
</body>
</html>

Thread: createElement Javascript

Thread Tools

Search Thread

createElement Javascript

Similar Threads

Resolved createElement with <br /> tags?

DOM createElement/appendChild/etc generator?

document.createElement???

Loading javascript content dynamically into Google map javascript

Javascript.AJAX link inside javascript dropdownmenu

Bookmarks

Bookmarks

Posting Permissions