Only one function rather than many that are looking the same?

Question

Bonjour ! here is my question, I'm using, two "kinds" of JS short functions (5 lines of code per function) but I have to make, let's say, about 10 of each kind. It would be a total of 100 lines of code which is very long... So I was wondering if there could be an easy and very shorter way to implement this. I know very very few in javascript and I like roughly understand what I write. (If possible, avoid using JQ, for which I absolutely don't understand a word !) Here are the functions :

    function typedepolice() {
    var nodes = document.getElementById('stripid').childNodes;
    var nompolice = document.Selections.police.options[document.Selections.police.selectedIndex].value;
    for(var i=0; i<nodes.length; i++) {
         if (nodes[i].nodeName.toLowerCase() == 'div') {
        nodes[i].style.fontFamily = document.Selections.police.options[document.Selections.police.selectedIndex].value;
         }
    }
}

html calling : ...<select name="police" id="police" size="1" onchange="typedepolice()">...

function colbandeau() {
    var nodes = document.getElementById('stripid').childNodes;
    var colorFmsg = document.getElementById("colorFmsg").value;
        for(var i=0; i<nodes.length; i++) {
         if (nodes[i].nodeName.toLowerCase() == 'div') {
        nodes[i].style.background = '#' + document.getElementById("colorFmsg").value;
         }
    }
}

html calling : ...<input id="colorFmsg" class="color3" value="FFFFFF" size="5" onchange="colbandeau()">...

The first one refers to a selected option of a dropdown selection box. The second one to a color selected with JSColor which is a JS plugin to choose a color. As you see, they are intended to dynamically change CSS properties of numerous div children of one element which Id is "stripid", and are called by "onchange" events.

After a long search, I found the pattern of these functions in a reply in stackoverflow and they are exactly what I needed. For this, I thank very largely Vijay Agrawal, because it will improve a lot my web page.

NB : don't be afraid, "police" is meaning "font" in French :)

If someone could help me, it would be great !

score 0 · Accepted Answer · answered Jun 05 '13 at 05:14

You can create a function to set the stripid child nodes

function setNodeStyle(value, style) {
    var nodes = document.getElementById('stripid').childNodes;
    for (var i=0; i<nodes.length; i++) {
        if (nodes[i].nodeName.toLowerCase() == 'div') {
            nodes[i].style[style] = value;
        }
    }
}

Then you can call it in the other functions:

function colbandeau() {
    setNodeStyle(document.getElementById("colorFmsg").value, "background");
}

This will already save you quite a bit.

You can improve on this even more by setting an attribute that contains the value that is to be. To get you started:

<input class="color3 changer" value="FFFFFF" size="5" data-style="background">

Array.prototype.forEach.call(document.querySelector(".changer"), function (el) {
    el.addEventListener("change", function () {
        setNodeStyles(this.value, this.dataset.style);
    });
});

Thanx, I shall use your first way. It will for sure, make me save time and lines. Maybe one day I'll come back to see if I can deal with your second way. Thanx again for helping people here ! — iwonder, Jun 06 '13 at 03:18
Me again ! JSColor only gives the hex value of the colors, and not the '#' sign. And unfortunately, I can't find out where and how to add it in your script... Could you tell me ? — iwonder, Jun 06 '13 at 05:23

Only one function rather than many that are looking the same?

1 Answers1