0

I want to loop an function by click on class. the code look like this.

Class Ways

HTML

<button class="btn">B</button>
<button class="btn">I</button>
<div id="ctn"></div>

JavaScript

<script>
var btn = document.getElementsByClassName('btn');
var ctn = document.getElementById('ctn');
ctn.contentEditable = true;

for(i=0; i<btn.length; i++){
var a = ["'bold'","'italic'"];
btn[i].addEventListener('click', function(){
document.execCommand(a[i],false,null);
}, false);}

</script>

When it click it doesn't happen anthing. look below the manual by using ID.

ID Ways

HTML

<button id="bold">B</button>
<button id="italic">I</button>
<div id="ctn"></div>

JavaScript

    var bold = document.getElementById('bold');
    var italic = document.getElementById('italic');

    bold.addEventListener('click', function(){document.execCommand('bold',false,null);}, false);
italic.addEventListener('click', function(){document.execCommand('italic',false,null);}, false);

with ID ways is it work. but Class doesn't work. how to loop function by class?

nb: answer it on JavaScript not JQuery. Thank you for reading :)

DavidSlavalia
  • 23
  • 1
  • 5
  • Why are your strings double quoted? `"'bold'"`. – James Montagne Aug 07 '14 at 15:12
  • #James its a value for first argument of addEventListener. ex. addEventListener('bold',function(){},false); – DavidSlavalia Aug 07 '14 at 15:14
  • `addEventListener("bold"` makes no sense. Bold isn't an event. And even if it was, there's no reason to have two sets of quotes. – James Montagne Aug 07 '14 at 15:16
  • #James oops sory, its for first argument of execCommand('bold',false,nul); – DavidSlavalia Aug 07 '14 at 15:18
  • Still shouldn't be double quoted. – James Montagne Aug 07 '14 at 15:19
  • The problem is the dupe quesiton and the fact you double quoted the strings. The deleted answer just missed that problem. – epascarello Aug 07 '14 at 15:20
  • #James Look my code. var a =["'bold'","'italic'"];. to create array to string u need double quotes or single quotes but cause i need a result that display string nested in single. so i put that's ways. viola the result 'bold' and 'italic' for first argument execCommand function – DavidSlavalia Aug 07 '14 at 15:22
  • 1
    @DavidSlavalia that is WRONG...you do NOT need the quotes! You are doing this `document.execCommand("'bold'",false,null);` Does your hardcoded string look like that? – epascarello Aug 07 '14 at 15:23
  • If someone here has enough votes to undelete @tymeJV's answer, I edited it to fix the quote issue. – epascarello Aug 07 '14 at 15:25
  • #James so u say execCommand is not need single quote? just execCommand(bold,false,null);? are u sure what you say? i tried document.write(a[0]); it return 'bold' not "'bold'". – DavidSlavalia Aug 07 '14 at 15:26
  • @DavidSlavalia You need to learn about strings. – epascarello Aug 07 '14 at 15:27
  • You know that one line works, change it to a variable `var x = "bold"; bold.addEventListener('click', function(){document.execCommand(x,false,null);}, false);` – epascarello Aug 07 '14 at 15:28
  • #epascarello what do you means the last comment? i don't get it. your code it same as mine. can you fix how to loop using by class? like as editor say. its binding problem, i think. i have see the answer but the example is too hardcore. so i need answer that by my code. – DavidSlavalia Aug 07 '14 at 15:31
  • The answer below is correct. And my comment above has different code. I am showing you the fact that the quotes are "WRONG". – epascarello Aug 07 '14 at 15:32
  • #epascarello my connection is lag. so it get delay. Thank you ma bro :). i think you're right. – DavidSlavalia Aug 07 '14 at 15:41
  • #epascarello sory to disquise. as i look function binding. for()[ (function)(i);} what is use for the last (i) on for bracket? – DavidSlavalia Aug 07 '14 at 15:44

1 Answers1

1

You need to use a closure to bind elements in a loop like that:

for(i=0; i<btn.length; i++){
    (function(i) {  //closure inside so i is correct. 
        var a = ["bold","italic"]; //removed quotes
        btn[i].addEventListener('click', function(){
            document.execCommand(a[i],false,null);
        }, false)
    })(i);
}
epascarello
  • 204,599
  • 20
  • 195
  • 236
tymeJV
  • 103,943
  • 14
  • 161
  • 157