Problem with Button Ids in Javascript

kksandyrox · 02-19-2013, 06:48 PM

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.

Fou-Lu · 02-19-2013, 07:01 PM

Not a thing to do with PHP. Moving to Javascript forum.

Obsidian · 02-19-2013, 10:19 PM

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>

Old Pedant · 02-19-2013, 11:25 PM

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"));

Obsidian · 02-20-2013, 03:57 PM

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

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"));

kksandyrox · 02-25-2013, 10:13 AM

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?