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 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Feb 2013
    Posts
    5
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Problem with Button Ids in Javascript

    This is my code to create a set of 10 buttons vertically.


    Code:
    <!DOCTYPE html>
    <html>
    <body>
    <script>
    
    function myFunction()
    {
    for(i=0;i<10;i++)
    {
    var btn=document.createElement("BUTTON");
    var t=document.createTextNode("JOIN");
    
    document.body.appendChild(btn);
    btn.appendChild(t); 
    
    document.write("<br><br>");
    }
    };
    
    </script>
    <body onload="myFunction()">
    </body>
    </html>


    What I want is, How do I get the Id's of each of these 10 buttons, so that I can link 10 different pages to these buttons.


    I am a naive programmer, detailed explanation(+code) will be apprecialted.
    Last edited by kksandyrox; 02-19-2013 at 07:49 PM. Reason: forgot to subscribe for email notifications

  • #2
    God Emperor Fou-Lu's Avatar
    Join Date
    Sep 2002
    Location
    Saskatoon, Saskatchewan
    Posts
    16,994
    Thanks
    4
    Thanked 2,662 Times in 2,631 Posts
    Not a thing to do with PHP. Moving to Javascript forum.
    PHP Code:
    header('HTTP/1.1 420 Enhance Your Calm'); 
    Been gone for a few months, and haven't programmed in that long of a time. Meh, I'll wing it ;)

  • #3
    New Coder
    Join Date
    Feb 2013
    Posts
    37
    Thanks
    1
    Thanked 4 Times in 4 Posts
    I was able to work out something by adding a variable id name. CSS was used to confirm the unique ID names. I hope this helps.

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    #btn1 {background: #00ff00;}
    #btn2 {background: #ff0000;}
    #btn3 {background: #0000ff;}
    #btn4 {background: #ffff00;}
    #btn5 {background: #ff00ff;}
    #btn6 {background: #ffffff;}
    #btn7 {background: #ff9900;}
    #btn8 {background: #ff0099;}
    #btn9 {background: #cc9900;}
    #btn10 {background: #00ff00;}
    </style>
    <script type="text/javascript">
    function myFunction(){
    for(i=0;i<10;i++){
    var btn=document.createElement("BUTTON");
    var t=document.createTextNode("JOIN");
    var name = "btn" + i * 1 ;
    btn.setAttribute('id',name);
    document.body.appendChild(btn);
    btn.appendChild(t); 
    document.write("<br><br>");
    } 
    };
    </script> 
    </head>
    <body onload="myFunction()">
    </body>
    </html>

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,118
    Thanks
    80
    Thanked 4,554 Times in 4,518 Posts
    NO! Wrong!

    You can *NOT* use document.write( ) after the page is loaded!

    If you do, you WIPE OUT all other content on the page, including the JS code used to do the write!

    Instead of
    Code:
        document.write("<br><br>");
    you *MUST* do
    Code:
        document.body.appendChild(document.createElement("br"));
        document.body.appendChild(document.createElement("br"));
    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.

  • Users who have thanked Old Pedant for this post:

    kksandyrox (02-23-2013)

  • #5
    New Coder
    Join Date
    Feb 2013
    Posts
    37
    Thanks
    1
    Thanked 4 Times in 4 Posts
    I see, thanks for posting this correction. This does resolve the issue of the code after testing it again.

    Quote Originally Posted by Old Pedant View Post
    NO! Wrong!

    You can *NOT* use document.write( ) after the page is loaded!

    If you do, you WIPE OUT all other content on the page, including the JS code used to do the write!

    Instead of
    Code:
        document.write("<br><br>");
    you *MUST* do
    Code:
        document.body.appendChild(document.createElement("br"));
        document.body.appendChild(document.createElement("br"));

  • Users who have thanked Obsidian for this post:

    kksandyrox (02-23-2013)

  • #6
    New to the CF scene
    Join Date
    Feb 2013
    Posts
    5
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Worked my way around it.. Thanx a ton for the help.

    Did a little modifications though

    Code:
    <!DOCTYPE html>
    <html>
    <body>
    <script>
    
    var pages = new Array("page1.html","page2.html","page3.html","page4.html","page5.html","page6.html","page7.html","page8.html","page9.html");
    
    function myFunction()
    {
    for(i=0;i<10;i++)
    {
    var btn=document.createElement("BUTTON");
    btn.id = "join_btn" + i;
    btn.onclick = function() {
    var getID = parseInt(this.id.split("join_btn")[1]);
    document.location.href = pages[getID-1];
    }
    var t=document.createTextNode("JOIN");
    
    document.body.appendChild(btn);
    btn.appendChild(t); 
    
    document.write("<br><br>");
    }
    };
    
    </script>
    <body onload="myFunction()">
    </body>
    </html>

    Now i have a css script as below

    Code:
    <style type="text/css">
    .classname {
      -moz-box-shadow:inset 0px 0px 0px 0px #bbdaf7;
      -webkit-box-shadow:inset 0px 0px 0px 0px #bbdaf7;
      box-shadow:inset 0px 0px 0px 0px #bbdaf7;
      background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #79bbff), color-stop(1, #378de5) );
      background:-moz-linear-gradient( center top, #79bbff 5%, #378de5 100% );
      filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#378de5');
      background-color:#79bbff;
      -moz-border-radius:21px;
      -webkit-border-radius:21px;
      border-radius:21px;
      border:2px solid #84bbf3;
      display:inline-block;
      color:#ffffff;
      font-family:Arial;
      font-size:18px;
      font-weight:bold;
      padding:9px 31px;
      text-decoration:none;
      text-shadow:1px 1px 0px #528ecc;
    }.classname:hover {
      background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #378de5), color-stop(1, #79bbff) );
      background:-moz-linear-gradient( center top, #378de5 5%, #79bbff 100% );
      filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#378de5', endColorstr='#79bbff');
      background-color:#378de5;
    }.classname:active {
      position:relative;
      top:1px;
    }
    
    </style>
    <a href="#" class="classname">my button</a>

    HOW do I apply this CSS to theses dynamically created buttons?


  •  

    Tags for this Thread

    Posting Permissions

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