Tagging each element with onclick function

**Falkon303** · 03-15-2009, 09:50 PM

Ok, so I am starting to build a javascript based sequencer/sampler.

The problem I hit is that I need to attach an "onclick" function that alerts the id of each individual elOpt I create... What is happening is that I can only get it to alert the 15th element... I tried inserting [j] into it, but no luck..

Any help appreciated.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
.step { height:20px;border:1px solid #333333;width:13px;padding:3px;float:left;margin:2px;background-color:#FFFFFF;}
.stepon {height:20px;border:1px solid #333333;width:13px;padding:3px;float:left;margin:2px;background-color:#C1B9E3;}
.contnr {float:none;display:block;}
</style>


<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>

<body >
<div style="width:400px;"id="seq" name="seq">&nbsp;<br /></div>
<input name="" type="button" value="add sampler" onclick="createnewrow();"/>
<label>
<input type="text" name="ploop" id="ploop" />
</label>
</body>
</html>
<script type="text/javascript">



function createnewseq(value)
{
j = 0
while (j<16)
{
elOpt = document.createElement('div');
elOpt.setAttribute("id","smp_" + value+ '_' + j);
if (j <= 3 || j <= 11 && j > 7) {elOpt.className = 'step';} else {elOpt.className = 'stepon';} 
function alrt() {alert("smp_" + value + '_' + j);};
elOpt.attachEvent("onclick", alrt);
document.getElementById("seqrow_" + value).appendChild(elOpt);
j++;
}
}
function createnewrow()
{
var randid =Math.floor(Math.random()*57489375);
sqrow = document.createElement('div');
sqrow.className = 'contnr';
sqrow.setAttribute("id","seqrow_" + randid);
document.getElementById("seq").appendChild(sqrow);
createnewseq(randid);
}
function playseq()
{for (k=0;k<16;k++)
{elOpt = document.createElement('div');
elOpt.className = 'step';
elOpt.setAttribute("id","smp_" + value);
document.getElementById("seqrow_" + value).appendChild(elOpt);}}
</script>

**Master_script_maker** · 03-15-2009, 10:21 PM

try:

Code:

function createnewseq(value) {
  j = 0;
  while (j<16) {
    elOpt = document.createElement('div');
    elOpt.id="smp_" + value+ '_' + j;
    if (j <= 3 || j <= 11 && j > 7) {elOpt.className = 'step';} else {elOpt.className = 'stepon';} 
    elOpt.onclick=(function(val, j) {return function() {alert("smp_"+val+"_"+j);};})(value, j);
    document.getElementById("seqrow_" + value).appendChild(elOpt);
    j++;
  }
}

also the script tags should be within the body tag:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
.step { height:20px;border:1px solid #333333;width:13px;padding:3px;float:left;margin:2px;background-color:#FFFFFF;}
.stepon {height:20px;border:1px solid #333333;width:13px;padding:3px;float:left;margin:2px;background-color:#C1B9E3;}
.contnr {float:none;display:block;}
</style>


<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>

<body >
<div style="width:400px;"id="seq" name="seq">&nbsp;<br /></div>
<input name="" type="button" value="add sampler" onclick="createnewrow();"/>
<label>
<input type="text" name="ploop" id="ploop" />
</label>
<script type="text/javascript">
function createnewseq(value) {
  j = 0;
  while (j<16) {
    elOpt = document.createElement('div');
    elOpt.id="smp_" + value+ '_' + j;
    if (j <= 3 || j <= 11 && j > 7) {
      elOpt.className = 'step';
    } else {
      elOpt.className = 'stepon';
    } 
    elOpt.onclick=(function(val, j) {return function() {alert("smp_"+val+"_"+j);};})(value, j);
    document.getElementById("seqrow_" + value).appendChild(elOpt);
    j++;
  }
}
function createnewrow() {
  var randid =Math.floor(Math.random()*57489375);
  sqrow = document.createElement('div');
  sqrow.className = 'contnr';
  sqrow.id="seqrow_" + randid;
  document.getElementById("seq").appendChild(sqrow);
  createnewseq(randid);
}
function playseq() {
  for (k=0;k<16;k++) {
    elOpt = document.createElement('div');
    elOpt.className = 'step';
    elOpt.id="smp_" + value;
    document.getElementById("seqrow_" + value).appendChild(elOpt);
  }
}
</script>
</body>
</html>

**Falkon303** · 03-16-2009, 12:18 AM

Thanx much for your help.

I am going to research how your function works, as I don't know the return function/property that well. Here's where it's at now -

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
.step { height:20px;border:1px solid #333333;width:13px;padding:3px;float:left;margin:2px;background-color:#FFFFFF;}
.stepon {height:20px;border:1px solid #333333;width:13px;padding:3px;float:left;margin:2px;background-color:#C1B9E3;}

.stepactive {height:20px;border:1px solid #333333;width:13px;padding:3px;float:left;margin:2px;background-color:#990000;}
.contnr {float:none;display:block;}

</style>


<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>

<body >
<div style="width:400px;"id="seq" name="seq">&nbsp;<br /></div>
<input name="" type="button" value="add sampler" onclick="createnewrow();"/>
<label>
<input type="text" name="ploop" id="ploop" />
</label>
<script type="text/javascript">
function seqclkoffon(value, defclass)
{if (document.getElementById(value).className == "stepactive")
{document.getElementById(value).className = defclass;} 
else
{document.getElementById(value).className = "stepactive";}}

function createnewseq(value) {
  j = 1;
  while (j<17) {
    elOpt = document.createElement('div');
    elOpt.id="smp_" + value+ '_' + j;
    if (j <= 4 || j <= 12 && j > 8) 
	{elOpt.className = 'step';elOpt.onclick=(function(val, j) {return function() {seqclkoffon("smp_"+val+"_"+j, 'step');};})(value, j);} 
	else 
	{elOpt.className = 'stepon';elOpt.onclick=(function(val, j) {return function() {seqclkoffon("smp_"+val+"_"+j, 'stepon');};})(value, j);} 
    
    document.getElementById("seqrow_" + value).appendChild(elOpt);
    j++;
  }
}
function createnewrow() {
  var randid =Math.floor(Math.random()*57489375);
  sqrow = document.createElement('div');
  sqrow.className = 'contnr';
  sqrow.id="seqrow_" + randid;
  document.getElementById("seq").appendChild(sqrow);
  createnewseq(randid);
}
function playseq() {
  for (k=0;k<16;k++) {
    elOpt = document.createElement('div');
    elOpt.className = 'step';
    elOpt.id="smp_" + value;
    document.getElementById("seqrow_" + value).appendChild(elOpt);
  }
}
</script>
</body>
</html>

The reaction time is a bit slow, but you can see how it will work. I may end up using "elmnt.style.backgroundColor =" instead of changing classes. That may improve the speed.

- Ben

**Master_script_maker** · 03-16-2009, 12:50 AM

I just tested it on several browsers and it seamed fine. Also, if you would like, I would explain how the function works.

**Falkon303** · 03-16-2009, 01:05 AM

That would be awesome. I'd love to know how that works.

I also added a location indicator/ticker. I am using a transparent png over here, but I set the location indicator/markey to a light yellow.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
.step { height:20px;border:1px solid #333333;width:13px;padding:3px;float:left;margin:2px;background-color:#FFFFFF;}
.stepon {height:20px;border:1px solid #333333;width:13px;padding:3px;float:left;margin:2px;background-color:#C1B9E3;}

.stepactive {height:20px;border:1px solid #333333;width:13px;padding:3px;float:left;margin:2px;background-color:#990000;}
.contnr {float:none;display:block;}

</style>


<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>

<body onload="timedCount()">
<div style="position:absolute;z-index:2;top:0px;left:0px;width:19px;background-color:#EAE899;background-position:left;background-repeat:repeat-y;height:200px;"  id="txt"></div>
<div style="width:400px;margin-left:11px;"id="seq" name="seq"></div>
<input name="" type="button" value="add sampler" onclick="createnewrow();"/>
<label>
<input type="text" name="ploop" id="ploop" />
</label>
<script type="text/javascript">
function seqclkoffon(value, defclass)
{if (document.getElementById(value).className == "stepactive")
{document.getElementById(value).className = defclass;} 
else
{document.getElementById(value).className = "stepactive";}}

function createnewseq(value) {
  j = 1;
  while (j<17) {
    elOpt = document.createElement('div');
    elOpt.id="smp_" + value+ '_' + j;
    if (j <= 4 || j <= 12 && j > 8) 
	{elOpt.className = 'step';elOpt.onclick=(function(val, j) {return function() {seqclkoffon("smp_"+val+"_"+j, 'step');};})(value, j);} 
	else 
	{elOpt.className = 'stepon';elOpt.onclick=(function(val, j) {return function() {seqclkoffon("smp_"+val+"_"+j, 'stepon');};})(value, j);} 
    
    document.getElementById("seqrow_" + value).appendChild(elOpt);
    j++;
  }
}
function createnewrow() {
  var randid =Math.floor(Math.random()*57489375);
  sqrow = document.createElement('div');
  sqrow.className = 'contnr';
  sqrow.id="seqrow_" + randid;
  document.getElementById("seq").appendChild(sqrow);
  createnewseq(randid);
  document.getElementById('txt').style.height = document.getElementById('seq').offsetHeight;
}
function playseq() {
  for (k=0;k<16;k++) {
    elOpt = document.createElement('div');
    elOpt.className = 'step';
    elOpt.id="smp_" + value;
    document.getElementById("seqrow_" + value).appendChild(elOpt);
	
  }
}
document.getElementById('txt').style.top = document.getElementById('seq').style.top;
var c=1;
var t;
function timedCount()
{
document.getElementById('txt').style.left = parseFloat(c) + parseFloat(c*24);
c=c+1;
if (c == 18) 
{c=1;timedCount();} 
else 
{t=setTimeout("timedCount()",125);}}
</script>
</body>
</html>

**Master_script_maker** · 03-16-2009, 09:59 PM

okay. so first here is a function formated:

Code:

var p=(function(t){
  return function() {
    document.write(t);
  };
})("hi");

The outer and inner functions are anonymous, they do not have names. The outer function takes one argument, t. Notice the 2 sets of parenthesis, in the first set, the function, and in the second, the string "hi". Whatever is in the second () is passed to the outer function in the first (), t is now "hi". The outer function returns the inner function, with the variable t set in the function's scope. If you were to alert(p), you would get the value

Code:

function() {
  document.write(t);
}

and if you were to evaluate p(); you would find that t was set to "hi".
This form of function is very useful when using multiple instances of the same function in a timeout or interval and you do not want the values to be overwritten, because of the scope.

Thread: Tagging each element with onclick function

Thread Tools

Search Thread

Tagging each element with onclick function

The Following User Says Thank You to Master_script_maker For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions