Javascript colors and tables?

Question

Javascript colors and tables?

540 views Asked by Herman Lee Tzer Her At 12 June 2016 at 10:09

I'm doing revision in preparation for my Web Development exam, and came across this question:

My answer:

    function pallete() {
        var components = ["00", "33", "66", "99", "CC", "FF"];
        var context = document.body;
        var tab = document.createElement('table');
        for (i = 0; i < 6; i++) {
            for (j = 0; j < 6; j++) {
                var trow = document.createElement('tr');
                for (f = 0; f < 6; f++) {
                    var thead = document.createElement('th');
                    thead.innerHTML = "#" + components[i] + components[j] + components[f];
                    thead.style.color = components[i] + components[j] + components[f];
                    trow.appendChild(thead);
                }
                tab.appendChild(trow);
            }
        }
        context.appendChild(tab);
    }

I tested the code on the browser, but nothing is coming up! I think my logic is perfect though... Not sure what went wrong here. Please give me any pointers, thank you very much!

Original Q&A

There are 2 answers

Nafiul Islam On 12 June 2016 at 10:15

Use document.createElement() instead of context.createElement(). Also assign value to thead.innerHTML instead of using it as a set function

function pallete() {
    var components = ["00", "33", "66", "99", "CC", "FF"];
    var context = document.body;
    var tab = document.createElement('table');
    for (i = 0; i < 6; i++) {
        for (j = 0; j < 6; j++) {
            var trow = document.createElement('tr');
            for (f = 0; f < 6; f++) {
                var thead = document.createElement('th');
                thead.innerHTML = "#" + components[i] + components[j] + components[f];
                thead.style.color = components[i] + components[j] + components[f];
                trow.appendChild(thead);
            }
            tab.appendChild(trow);
        }
    }
    context.appendChild(tab);
}

Another suggestion will be to use 'td' instead of 'th'

**Nina Scholz** · Accepted Answer · 2016-06-12T10:30:47+00:00

Working example with

declaration block at top of function
document.createElement
td instead of th
innerHTML as assignment
td.style.backgroundColor instead of td.style.color
assignment to color needs # in front of color values, like #003366

function pallete() {
    var components = ["00", "33", "66", "99", "CC", "FF"],
        context = document.body,
        tab = document.createElement('table'),
        trow, td,
        i, j, f;

    for (i = 0; i < 6; i++) {
        for (j = 0; j < 6; j++) {
            trow = document.createElement('tr');
            for (f = 0; f < 6; f++) {
                td = document.createElement('td');
                td.innerHTML = "#" + components[i] + components[j] + components[f];
                td.style.backgroundColor = "#" + components[i] + components[j] + components[f];
                trow.appendChild(td);
            }
            tab.appendChild(trow);
        }
    }
    context.appendChild(tab);
}

<body onload="pallete();"></body>

TechQA.

Javascript colors and tables?

There are 2 answers

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in WEB-SAFE-COLORS

Popular Questions

Popular Tags

Trending Questions