get selected element in Bootstrap Button Dropdown

Question

I've a bootstrap Dropdown component in my page :

<div class="btn-group">
   <button class="btn dropdown-toggle" data-toggle="dropdown" title="Police"><i class="fa fa-font"></i>&nbsp;<b class="caret"></b></button>
   <ul class="dropdown-menu" id="fonts"></ul>
</div>

And I'm filling this Dropdown component using this script :

var fonts = [
    'Serif',
    'Sans',
    'Arial',
    'Arial Black',
    'Courier', 
    'Courier New',
    'Comic Sans MS',
    'Helvetica',
    'Impact',
    'Lucida Grande',
    'Lucida Sans',
    'Tahoma',
    'Times',
    'Times New Roman',
    'Verdana'
];

var fontsDropDown   = document.getElementById('fonts');
fonts.forEach(function(police){
    var li  = document.createElement('li');
    var a   = document.createElement('a');
    a.style = "font-family:'" + police + "'";
    a.appendChild(document.createTextNode(police));
    li.appendChild(a);
    fontsDropDown.appendChild(li);
});

And I have an editable div :

<div id="editor" contentEditable="true"> Enter your text here.. </div>

I want when I choose some element in that Dropdown component to change the font for selected text in the editable div, I tried to add an eventListener for each <a> in the <ul> for the Dropdown component :

var fontsArray = Array.prototype.slice.call(document.querySelectorAll('#fonts li a'));
fontsArray.forEach(function(value){
    value.addEventListener('click', function(){
        document.execCommand('fontName', false, value);
    }, false);
});

but it's not working, I tried to test the document.execCommand('fontName', false, value); on the button for the Dropdown component directly as the following:

document.getElementById('fonts').addEventListener('click', function(){
        document.execCommand('fontName', false, 'Comic Sans MS');
    }, false);

And it works, so I think I just need to get the selected element value on the Dropdown component ' and replace it with the third parameter for the document.execCommand() .

I tired to search for the script that do that, and all I can find is with jQuery :

$(function(){

    $(".dropdown-menu li a").click(function(){

      $(".btn:first-child").text($(this).text());
      $(".btn:first-child").val($(this).text());

   });

});

But I want to get the selected item using pure JavaScript.

How can I do that ?

Answer 1

Hey Aimad I believe this will do the fix:

var fontsArray = document.getElementById('fonts').getElementsByTagName('a');
var l = fontsArray.length;
for(i = 0; i<l; i++){
  tag = fontsArray[i];
  tag.addEventListener('click', function(){
    var value = this.innerHTML;
    document.execCommand('fontName', false, value);
  }, false);
};

you need to redefine the value by var value = this.innerHTML; to be able to access the name of the font.

Hope that help.

Cheers