Announcement

**nomanic** · Sep 1, 2011, 04:20 AM

for starters -

Code:

div.class = "bubble_green";

should be-

Code:

div.className = "bubble_green";

**nomanic** · Sep 1, 2011, 04:36 AM

try this too -

Code:

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

or in your case -

Code:

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

which gives us all together -

Code:

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** · Sep 1, 2011, 04:47 AM

Theres a problem with naming elements in ie though, a workaround is this function-

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

which makes our code -

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** · Sep 1, 2011, 07:18 AM

Just one of many possible solutions,
works in ie8 and new firefox...

Code:

<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** · Sep 1, 2011, 02:30 PM

It ain't purdy but,
it works in ie8 and firefox6.

Code:

<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** · Sep 1, 2011, 02: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** · Sep 1, 2011, 03:47 PM

Originally posted by Old Pedant View Post

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

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** · Sep 1, 2011, 04:06 PM

Originally posted by lankanmon View Post

Hi, im new to Js and i have this code:

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:

Code:

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

instead of:

Code:

<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** · Sep 1, 2011, 04:19 PM

Well, field *could* have contained "question_" as a string, no?

**DaveyErwin** · Sep 1, 2011, 04:32 PM

Originally posted by Old Pedant View Post

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/...at-google.html

**lankanmon** · Sep 1, 2011, 10:43 PM

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!

Announcement

Basic Js create element problem

Basic Js create element problem

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment