...

View Full Version : Basic Js create element problem



lankanmon
09-01-2011, 09:55 AM
Hi, im new to Js and i have this code:


var div = document.createElement("div");
div.id = field+count;
div.name = field+count;
div.class = "bubble_green";
var p = document.createElement("p");
p.appendChild(document.createTextNode('Question '+count));
div.appendChild(p);
field_area.appendChild(div);

assuming that the variables are all correct and working,

why is only this produced:


<div id="question_3"><p>Question 3</p></div>

instead of:


<div id="question_3" name="question_3" class="bubble_green"><p>Question 3</p></div>

and is there a solution?

nomanic
09-01-2011, 10:20 AM
for starters -



div.class = "bubble_green";


should be-



div.className = "bubble_green";

nomanic
09-01-2011, 10:36 AM
try this too -



div.setAttribute("name","XXXX"+X);


or in your case -



div.setAttribute("name",field+count);


which gives us all together -



var div = document.createElement("div");
div.id = field+count;
div.setAttribute("name",field+count);
div.className = "bubble_green";
var p = document.createElement("p");
p.appendChild(document.createTextNode('Question '+count));
div.appendChild(p);
field_area.appendChild(div);

nomanic
09-01-2011, 10:47 AM
Theres a problem with naming elements in ie though, a workaround is this function-



function createNamedElement(type, name) {
var element = null;
// Try the IE way; this fails on standards-compliant browsers
try {
element = document.createElement('<'+type+' name="'+name+'">');
} catch (e) {
}
if (!element || element.nodeName != type.toUpperCase()) {
// Non-IE browser; use canonical method to create named element
element = document.createElement(type);
element.name = name;
}
return element;
}


which makes our code -



function createNamedElement(type, name) {
var element = null;
// Try the IE way; this fails on standards-compliant browsers
try {
element = document.createElement('<'+type+' name="'+name+'">');
} catch (e) {
}
if (!element || element.nodeName != type.toUpperCase()) {
// Non-IE browser; use canonical method to create named element
element = document.createElement(type);
element.name = name;
}
return element;
}

var div = createNamedElement("div",field+count);
div.id = field+count;
div.className = "bubble_green";
var p = document.createElement("p");
p.appendChild(document.createTextNode('Question '+count));
div.appendChild(p);
field_area.appendChild(div);


that should work!

DaveyErwin
09-01-2011, 01:18 PM
Just one of many possible solutions,
works in ie8 and new firefox...


<style>
.bubble_green{color:Green}
</style>

<script>
function init(){
field="fld";
count=1;
var field_area = document.getElementById("field_area")
var myDiv = document.createElement("div");
myDiv.id = field+count;
myDiv.setAttribute("name",field+count);
myDiv.className = "bubble_green";
var p = document.createElement("p");
p.appendChild(document.createTextNode('Question '+count));
myDiv.appendChild(p);
field_area.appendChild(myDiv);
alert(document.getElementsByName(field+count)[0].id)}
</script>

<body onload="init()">
<div id="field_area"></div>
</body>

DaveyErwin
09-01-2011, 08:30 PM
It ain't purdy but,
it works in ie8 and firefox6.


<script type="text/javascript">

addEvent = function(target, event, method) {
if (target.addEventListener) {
target.addEventListener(event, method, false);
} else if (target.attachEvent) {
target.attachEvent("on" + event, method);
}
}

function initialize ( ) {
evryThng=document.getElementsByTagName("*");
for(i=evryThng.length;i--;){
if(evryThng[i].name == "area1"){
addEvent (evryThng[i], 'mouseover', changeColor);
addEvent (evryThng[i], 'mouseout', changeOutColor);
}
}
aArea=document.getElementsByName("area1");
aStringRed=document.getElementsByName("stringRed");
for (var i=0; i < aArea.length; i++) {
addEvent (aArea[i], 'mouseover', changeColor);
addEvent (aArea[i], 'mouseout', changeOutColor);
}
}

function changeColor(e) {
e = e || window.event;
target = e.target || window.event.srcElement;
target.style.color = "red";
}
function changeOutColor(e) {
e = e || window.event;
target = e.target || window.event.srcElement;
target.style.color = "black";
}
</script>

<body onload="initialize ( )">
<div name="area1"> <h1 name="stringRed"> Mercury </h1> </div>
<div name="area1"> <h1 name="stringRed"> Venus </h1> </div>
<div name="area1"> <h1 name="stringRed"> Earth </h1> </div>
</body>

Old Pedant
09-01-2011, 08:54 PM
Can I ask a really silly question: WHY do you NEED a name on a <div>????

What possible use is it?

(Yes, yes, I know you can do getElementsByName(), but if the name and id are the same, and since the id MUST be unique, why would you do getElementsByName("bubble_green")[0] to get that one and only element with that name when you could do getElementById("bubble_green") more efficiently and simpler??)

And yes, I see Davey's last code, with the multiple names. But that's not what the original poster was trying to do. No?

DaveyErwin
09-01-2011, 09:47 PM
Can I ask a really silly question: WHY do you NEED a name on a <div>????

What possible use is it?

(Yes, yes, I know you can do getElementsByName(), but if the name and id are the same, and since the id MUST be unique, why would you do getElementsByName("bubble_green")[0] to get that one and only element with that name when you could do getElementById("bubble_green") more efficiently and simpler??)

And yes, I see Davey's last code, with the multiple names. But that's not what the original poster was trying to do. No?

Of course I totally agree, divs with name attributes
are probably less than usefull and, having name and
id the same is just plain wrong. I was trying to mimic
the originally posted code ....


var div = document.createElement("div");
div.id = field+count;
div.name = field+count;
div.class = "bubble_green";
var p = document.createElement("p");
p.appendChild(document.createTextNode('Question '+count));
div.appendChild(p);
field_area.appendChild(div);

DaveyErwin
09-01-2011, 10:06 PM
Hi, im new to Js and i have this code:


var div = document.createElement("div");
div.id = field+count;
div.name = field+count;
div.class = "bubble_green";
var p = document.createElement("p");
p.appendChild(document.createTextNode('Question '+count));
div.appendChild(p);
field_area.appendChild(div);

assuming that the variables are all correct and working,

why is only this produced:


<div id="question_3"><p>Question 3</p></div>

instead of:


<div id="question_3" name="question_3" class="bubble_green"><p>Question 3</p></div>

and is there a solution?

I doubt it produced an id of question_3
more likely the id was whatever field+count
yeilded .Or perhaps the posted code
contains a typo here ...

div.id = field+count;

most likely the actual code is ...

div.id ="question_3";

Thats just a guess ?

Old Pedant
09-01-2011, 10:19 PM
Well, field *could* have contained "question_" as a string, no?

DaveyErwin
09-01-2011, 10:32 PM
Well, field *could* have contained "question_" as a string, no?

Your guesses are way better than mine.

So to cut to the chase ....

<script>
function init(){
alert(document.getElementsByName("myName")[0])
}
</script>
<body onload="init()">
<div id="myName" name="myName">xxx</div>
</body>

C:)ause ie has eaten too much glue.:)http://latestnewscheck.blogspot.com/2011/07/ultimate-picture-describing-that-google.html

lankanmon
09-02-2011, 04:43 AM
I made alot of the changes you guys suggested and it works... I really appreciate all of your help and the time you guys gave into helping me out. Thank You!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum