Manipulating button via DOM, JavaScript -
i'm trying find index of clicked button, can manipulate other elements same index, don't know how!
html:
<body> <div id="area"> <h1>javascript</h1> <button class="knapp">click!</button> <p class="text">adöfkljg ldjfögj jsdflkgjh kjddflkgjh dfgkjdöjg </p> <button class="knapp">click!!</button> <p class="text">dfghödifgjöoeirugeöori dijfoidj oidoi odi!</p> </div> <script src="visa.js"></script> </body>
javascript:
var text = document.getelementsbyclassname("text"); var butt = document.getelementsbyclassname("knapp"); window.onload = start(); function start(){ (i=0; i<text.length; i++){ text[i].style.visibility = "hidden"; }; }; this.onclick = function(){ var index = butt.indexof(this); };
fiddle: http://jsfiddle.net/x9lgg/2/
<div id="area"> <h1>javascript</h1> <button class="knapp">click!</button> <p class="text">adöfkljg ldjfögj jsdflkgjh kjddflkgjh dfgkjdöjg </p> <button class="knapp">click!!</button> <p class="text">dfghödifgjöoeirugeöori dijfoidj oidoi odi!</p> </div>
try javascript
, index of button when button clicked:
var button = document.getelementsbyclassname("knapp"); var txt = document.getelementsbyclassname("text"); ( var = 0; < button.length; i++ ) (function(j){ button[j].addeventlistener("click",function(){ console.log(j); // shows index if ( txt[j].style.visibility == "hidden" ) { // show hides p element depend on button index txt[j].style.visibility = "visible"; } else { txt[j].style.visibility = "hidden"; } },false); })(i);
it alert 0
when first button clicked , 1
when second one, you'll able manipulate other elements ( , hides p
element )
note: in script on here this.onclick...
this
keyword refers window
object, in manner can't achieve goal
Comments
Post a Comment