Web Analytics Made Easy -
StatCounter Basic Js create element problem - CodingForum

Announcement

Collapse
No announcement yet.

Basic Js create element problem

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new 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
    for starters -

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

    Code:
    div.className = "bubble_green";
    <DmncAtrny> I will write on a huge cement block "BY ACCEPTING THIS BRICK THROUGH YOUR WINDOW, YOU ACCEPT IT AS IS AND AGREE TO MY DISCLAIMER OF ALL WARRANTIES, EXPRESS OR IMPLIED, AS WELL AS DISCLAIMERS OF ALL LIABILITY, DIRECT, INDIRECT, CONSEQUENTIAL OR INCIDENTAL, THAT MAY ARISE FROM THE INSTALLATION OF THIS BRICK INTO YOUR BUILDING."
    <DmncAtrny> And then hurl it through the window of a Sony officer
    <DmncAtrny> and run like hell

    Portfolio, Tutorials - http://www.nomanic.biz/

    Comment


    • #3
      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; Sep 1, 2011, 05:39 AM. Reason: better answer
      <DmncAtrny> I will write on a huge cement block "BY ACCEPTING THIS BRICK THROUGH YOUR WINDOW, YOU ACCEPT IT AS IS AND AGREE TO MY DISCLAIMER OF ALL WARRANTIES, EXPRESS OR IMPLIED, AS WELL AS DISCLAIMERS OF ALL LIABILITY, DIRECT, INDIRECT, CONSEQUENTIAL OR INCIDENTAL, THAT MAY ARISE FROM THE INSTALLATION OF THIS BRICK INTO YOUR BUILDING."
      <DmncAtrny> And then hurl it through the window of a Sony officer
      <DmncAtrny> and run like hell

      Portfolio, Tutorials - http://www.nomanic.biz/

      Comment


      • #4
        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!
        <DmncAtrny> I will write on a huge cement block "BY ACCEPTING THIS BRICK THROUGH YOUR WINDOW, YOU ACCEPT IT AS IS AND AGREE TO MY DISCLAIMER OF ALL WARRANTIES, EXPRESS OR IMPLIED, AS WELL AS DISCLAIMERS OF ALL LIABILITY, DIRECT, INDIRECT, CONSEQUENTIAL OR INCIDENTAL, THAT MAY ARISE FROM THE INSTALLATION OF THIS BRICK INTO YOUR BUILDING."
        <DmncAtrny> And then hurl it through the window of a Sony officer
        <DmncAtrny> and run like hell

        Portfolio, Tutorials - http://www.nomanic.biz/

        Comment


        • #5
          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>

          Comment


          • #6
            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; Sep 1, 2011, 03:31 PM. Reason: sorry i put this in wrong thread

            Comment


            • #7
              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?
              Be yourself. No one else is as qualified.

              Comment


              • #8
                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);

                Comment


                • #9
                  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 ?

                  Comment


                  • #10
                    Well, field *could* have contained "question_" as a string, no?
                    Be yourself. No one else is as qualified.

                    Comment


                    • #11
                      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; Sep 1, 2011, 05:36 PM. Reason: added link to funny picture

                      Comment


                      • #12
                        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!

                        Comment

                        Working...
                        X