JS-Test Frage 7

by shapeshifta

HTML

<div id="test" style="color:green;padding:4px"></div>
<div class="group"></div>
<div class="group"></div>
<div class="group"></div>
<div class="group"></div>

JavaScript

//implement missing function
if(!document.getElementsByClassName){
    document.getElementsByClassName = function(cl) {
        var retnode = [];
        var myclass = new RegExp('\\b' + cl + '\\b');
        var el = this.getElementsByTagName('*');
        for (var i = 0, max = el.length; i < max; i++) {
            var classes = el[i].className;
            if (myclass.test(classes)){ retnode.push(el[i]) };
        }
        return retnode;
    };
}

//framework functions
function $(id){ return document.getElementById(id) }
function html(id, html){ $(id).innerHTML = html }
function css(id, style){ $(id).style.cssText += ';' + style }
function $$(class){ return document.getElementsByClassName(class) }

/* Gegeben sei dieses Miniframework. Nutzen Sie das Framework, um in das div mit der id test 'this is an awesome text' zu schreiben und setzen sie bei folgende Styles: 'color:red;background-color:blue'
Selektieren sie ebenso alle divs mit der Klasse group und schreiben Sie in jedes Element das Wort Element und dahinter eine fortlaufende Nummerierung, also Element 1-4, benutzen Sie dazu eine for-Schleife.
*/

//testrun
html('test','this is an awesome text');
css('test','color:red;background-color:blue');

var groups = $$('group');
for (var i = 0, max = groups.length; i < max; i++){
    groups[i].innerHTML = 'Element ' + i;
}