CODEWITHSUNDEEP
javascriptjqueryhtmlcssonclick
user2628521
user2628521

Reputation:

When one is clicked, disable the other

So I have a mini slide menu in my website there is a menu you can choose what you want to read. There are points to click, when u clicked it the point get a red background. But there is a problem.
When i click one point and then an other point the first clicked point have to lose his background.

Here is my HTML:

<div id="slide_button" onClick="clicked(this);"><dir class="button_1"></dir></div>
<div id="slide_button" onClick="clicked(this);"><dir class="button_2"></dir></div>
<div id="slide_button" onClick="clicked(this);"><dir class="button_3"></dir></div>
<div id="slide_button" onClick="clicked(this);"><dir class="button_4"></dir></div>
<div id="slide_button" onClick="clicked(this);"><dir class="button_5"></dir></div>

Here is my JS:

function clicked(slide_button) {
    slide_button.getElementsByTagName("dir")[0].style.backgroundColor="red";
}

HERE IS AN EXAMPLE ON FIDDLE.


My "QUESTION IS" what i have to do to solve that?
What should I pay attention?

Upvotes: 0

Views: 103

Answers (7)

Siva
Siva

Reputation: 486

If you can look at the following jsfiddle, I used jQuery to get what you want.

Upvotes: 0

Givi
Givi

Reputation: 1734

At first id should be unique per element.

<div class="slide_button"><dir class="button"></dir></div>
<div class="slide_button"><dir class="button"></dir></div>
<div class="slide_button"><dir class="button"></dir></div>
<div class="slide_button"><dir class="button"></dir></div>
<div class="slide_button"><dir class="button"></dir></div>

Second, you should store reference of clicked element if you want later remove background color, and instead of inline event handlers or binding all elements would be better if you use event delegation.

Demonstration

(function () {
    "use strict";

// getting parent node of divs, due to bind click event. then 
    var ele = document.querySelector(".slide_button").parentNode, 
        prev = null; // store previous clicked element

    ele.addEventListener("click", clickHandler); // event handler.

    function clickHandler(e) {
        var t = e.target; // get target of clicked element

        // filter by target node name and class. edit: removed class checking
        if (t.nodeName.toLowerCase() === "dir") {
            // checking value of prev !== null and it's not same element.
            if (prev && prev !== t) {
                prev.style.backgroundColor = "";
            }
            prev = t; // store clicked element
            t.style.backgroundColor = "red";
        }
    }
}());

Upvotes: 1

John S
John S

Reputation: 21492

First you need to fix your HTML becaue your id values aren't unique. In fact, you don't even need id values, so you should use "slide_button" as a class. You can then use it to select all the buttons:

<div onClick="clicked(this);" class="slide_button"><dir></dir></div>
<div onClick="clicked(this);" class="slide_button"><dir></dir></div>
<div onClick="clicked(this);" class="slide_button"><dir></dir></div>
<div onClick="clicked(this);" class="slide_button"><dir></dir></div>
<div onClick="clicked(this);" class="slide_button"><dir></dir></div>

The CSS needs to be changed now so "slide_button" is a class selector, instead of an id selector:

.slide_button {
    display: inline-block;
}

As for clearing the background, clear all of them before coloring the selected one red:

function clicked(slide_button) {
    var buttons = document.getElementsByClassName('slide_button');
    for(var i = 0; i < buttons.length; i++) {
        buttons[i].getElementsByTagName('dir')[0].style.backgroundColor = '';
    }
    slide_button.getElementsByTagName('dir')[0].style.backgroundColor = 'red';
}

jsfiddle

This uses just JavaScript with no JQuery, but if you are using JQuery, you might as well use it here. The code is a lot shorter and easier to follow.

Here's a JQuery version:

$(function() {
    $('.slide_button').click(function() {
        var $button = $(this);
        $button.children(':first').css({ backgroundColor: 'red' });
        $button.siblings().children(':first').css({ backgroundColor: '' });
    }); 
});

Note: This registers a click-handler, so you can get rid of the "onclick" attirbutes.

jsfiddle

Upvotes: 1

Venkata Krishna
Venkata Krishna

Reputation: 15112

JSFIDDLE DEMO

jQuery

$('.slide_button').click(function(){
    $('.slide_button dir').css("background-color", "inherit");
    $(this).find('dir').css("background-color", "red");
});

HTML - Your markup is invalid because you have duplicate ids. Make them classes as below instead.

<div class="slide_button" >
    <dir class="button_1"></dir>
</div>
<div class="slide_button">
    <dir class="button_2"></dir>
</div>
<div class="slide_button">
    <dir class="button_3"></dir>
</div>
<div class="slide_button">
    <dir class="button_4"></dir>
</div>
<div class="slide_button">
    <dir class="button_5"></dir>
</div>

CSS change

.slide_button {
    display: inline-block;
}

Upvotes: 0

Spdermn02
Spdermn02

Reputation: 179

I had a slightly different method than @atlavis but a similar result.

http://fiddle.jshell.net/2AGJQ/

Upvotes: 0

nike4613
nike4613

Reputation: 39

I have fixed the fiddle so that it works hopefully as you plan. http://jsfiddle.net/399Dm/8/ There you go!

var forEach = function(ctn, callback){
    return Array.prototype.forEach.call(ctn, callback);
}

function clear(element, index, array) {
  element.getElementsByTagName("dir")[0].style.backgroundColor="";
}

function clicked(slide_button) {
    forEach(document.getElementsByClassName("slide_button"), clear);
    //.style.backgroundColor="";
    slide_button.getElementsByTagName("dir")[0].style.backgroundColor="red";
}

Upvotes: 0

RobertO
RobertO

Reputation: 2663

You have to select all other points and set their background to none.

Or remeber which point is selected and on select another just remove background on last and remeber current point, then set its background to red.

See fiddle: http://fiddle.jshell.net/399Dm/5/

Upvotes: 1

Related Questions