Question

I would like to write a (Javascript?) function to be included in HTML pages that allows me to render the function arguments tagged as kbd separated by “+”s and able to take an arbitrary number of input arguments.

So, for example, fnRenderKBD(Ctrl+X, Y, Z) would render as Ctrl+X+Y+Z.

The important thing is that the function should be able to take a variable number of arguments.

Is it possible to write such a function (if so, how)? I have next to no knowledge of JS.

Answer 1

My answer at the bottom is not the best thing I have ever written. A better solution would look something like:

function fnRenderKBD(elem, keysToDisplay) {
    var delimiter = '';
    var content = null;
    for(var i = 0, length = keysToDisplay.length; i < length; i++) {
        var renderedKey = document.createElement('kbd');
        renderedKey = setText(renderedKey, keysToDisplay[i]);

        if (i > 0) {
            elem.appendChild(document.createTextNode('+'));
        }

        elem.appendChild(renderedKey);
    }
}

function setText(elem, text) {
   if (elem.textContent){
      elem.textContent = text;
   }else{
      elem.innerText = text;
   }

   return elem;
}

(function() {
    var keys = [
        'Ctrl+X',
        'Y',
        'Z'
    ];

    var elem = document.getElementById('display');

    fnRenderKBD(elem, keys);
}());​

Demo: http://jsfiddle.net/wPg7z/

---

Something like this should work:

function fnRenderKBD(elem, keysToDisplay)
{
    var delimiter = '';
    var content = '';
    for(var i = 0, length = keysToDisplay.length; i < length; i++) {
        content+= delimiter + '<kbd>' + keysToDisplay[i] + '</kbd>';
        delimiter = '+';
    }

    elem.innerHTML = content;
}

(function() {
    var keys = [
        'Ctrl+X',
        'Y',
        'Z'
    ];

    var elem = document.getElementById('display');

    fnRenderKBD(elem, keys);
})();
​

Demo: http://jsfiddle.net/gTYxP/1/