PDA

View Full Version : 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.




<!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:
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:

<!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 -


<!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.



<!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:
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
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.