PDA

View Full Version : 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
<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:

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.


<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):


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):


<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:


<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>