CODEWITHSUNDEEP
javascripthtmlcss
Cees van den Toren
Cees van den Toren

Reputation: 1

Changing background color onclick

I dont know if it is possible to do but i this is my code.

function start(blauw){  
    document.getElementById(blauw).style.background="white";
}

<table>
    <tr>
        <td id= niks></td>
        <td id= niks></td>
        <td id= blauw onclick="start(id)">1</td>
        <td id= blauw onclick="start(id)">2</td>
        <td id= blauw>3</td>
        <td id= blauw>4</td>
        <td id= blauw>5</td>
        <td id= blauw>6</td>
        <td id= blauw>7</td>
        <td id= blauw>8</td>
        <td id= niks></td>
        <td id= niks></td>
    </tr>
</table>

i want to achieve that if i click on it the background will turn into white so people now what they are booking. but do i have to give everything an own ID? because right now if i click on "2" only "1" turns white and "2" won't turn white.

(excuse me for my bad english)

Upvotes: 0

Views: 2661

Answers (1)

Steven Web
Steven Web

Reputation: 1961

Instead of passing attributes just pass the element itselfe:

        function start(element) {
            element.style.background = "green";
        }
   <table>
        <tr>
            <td class=niks></td>
            <td class=niks></td>
            <td class=blauw onclick="start(this)">1</td>
            <td class=blauw onclick="start(this)">2</td>
            <td class=blauw>3</td>
            <td class=blauw>4</td>
            <td class=blauw>5</td>
            <td class=blauw>6</td>
            <td class=blauw>7</td>
            <td class=blauw>8</td>
            <td class=niks></td>
            <td class=niks></td>
        </tr>
    </table>

And as mentioned in the comments - ID`s had to be unique!!

EDIT:

Altered function to switch the background color.

    function start(element) {
        var backgroundColor = element.style.background;
        if (backgroundColor === "green") {
            element.style.background = "red";
        } else {
            element.style.background = "green";
        }
    }

So this is a very simple demo

See FIDDLE

Upvotes: 1

Related Questions