Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    New Coder
    Join Date
    Feb 2011
    Posts
    34
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Basic Js create element problem

    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?

  • #2
    Regular Coder nomanic's Avatar
    Join Date
    Feb 2009
    Location
    United Kingdom
    Posts
    255
    Thanks
    9
    Thanked 33 Times in 33 Posts
    for starters -

    Code:
    div.class = "bubble_green";
    should be-

    Code:
    div.className = "bubble_green";

  • #3
    Regular Coder nomanic's Avatar
    Join Date
    Feb 2009
    Location
    United Kingdom
    Posts
    255
    Thanks
    9
    Thanked 33 Times in 33 Posts
    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);
    Last edited by nomanic; 09-01-2011 at 09:39 AM. Reason: better answer

  • #4
    Regular Coder nomanic's Avatar
    Join Date
    Feb 2009
    Location
    United Kingdom
    Posts
    255
    Thanks
    9
    Thanked 33 Times in 33 Posts
    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!

  • #5
    Regular Coder
    Join Date
    Aug 2010
    Posts
    970
    Thanks
    19
    Thanked 212 Times in 210 Posts
    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>

  • #6
    Regular Coder
    Join Date
    Aug 2010
    Posts
    970
    Thanks
    19
    Thanked 212 Times in 210 Posts
    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>
    Last edited by DaveyErwin; 09-01-2011 at 07:31 PM. Reason: sorry i put this in wrong thread

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,438
    Thanks
    75
    Thanked 4,372 Times in 4,337 Posts
    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?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #8
    Regular Coder
    Join Date
    Aug 2010
    Posts
    970
    Thanks
    19
    Thanked 212 Times in 210 Posts
    Quote 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);

  • #9
    Regular Coder
    Join Date
    Aug 2010
    Posts
    970
    Thanks
    19
    Thanked 212 Times in 210 Posts
    Quote 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 ?

  • #10
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,438
    Thanks
    75
    Thanked 4,372 Times in 4,337 Posts
    Well, field *could* have contained "question_" as a string, no?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #11
    Regular Coder
    Join Date
    Aug 2010
    Posts
    970
    Thanks
    19
    Thanked 212 Times in 210 Posts
    Quote 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>

    Cause ie has eaten too much glue.http://latestnewscheck.blogspot.com/...at-google.html
    Last edited by DaveyErwin; 09-01-2011 at 09:36 PM. Reason: added link to funny picture

  • #12
    New Coder
    Join Date
    Feb 2011
    Posts
    34
    Thanks
    5
    Thanked 0 Times in 0 Posts
    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!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •