How to trigger different functions when I click the same element?

Question

<div class="slide_button_wrapper left first" ><p class="text">Text1</p></div>
<div class="slide_button_wrapper right first" ><p class="text">Text2</p></div>
<div class="slide_button_wrapper left second"><p class="text">Text3</p></div>
<div class="slide_button_wrapper right second" ><p class="text">Text4</p></div>
<div class="slide_button_wrapper left third" ><p class="text">Text5</p></div>

What I'm trying to do is when I click Text1, then the color of Text1 will become red, when I click another one, say Text3, then the color of Text3 will become blue, but Text1 will still be red, then when I click the third time on any div, nothing should be happening. Don't know how to do this, thanks in advance!

you can have a global variable for click count whose value you can check on every click if it is not at it's limit then allow click and increment the count and if it reaches it's limit do nothing. — vikscool
– vikscool, Commented Apr 25, 2017 at 10:42

Mihai Alexandru-Ionut · Accepted Answer · 2017-04-25 10:44:53Z

1

You should bind click event handler for your divs and use css() method in order to get/set the colour of your div.

var colors=['red','blue'];
var i=0;
$('div').click(function(){
    if($(this).css('background-color')=='rgba(0, 0, 0, 0)' && i<colors.length)
      $(this).css('background-color',colors[i++]);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slide_button_wrapper left first" ><p class="text">Text1</p></div>
<div class="slide_button_wrapper right first" ><p class="text">Text2</p></div>
<div class="slide_button_wrapper left second"><p class="text">Text3</p></div>
<div class="slide_button_wrapper right second" ><p class="text">Text4</p></div>

<div class="slide_button_wrapper left third" ><p class="text">Text5</p></div>

answered Apr 25, 2017 at 10:44

Mihai Alexandru-Ionut

48.6k14 gold badges106 silver badges132 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Peter Mortensen · Accepted Answer · 2017-05-02 18:10:56Z

1

You can try something like this:

var colors = ['red', 'blue'];
colors = colors.reverse();

var texts = document.querySelectorAll('.text');
texts.forEach(function(element) {
  element.addEventListener('click', function() {
    if (colors.length > 0) {
      var color = colors.pop();
      element.style.color = color;
    }
  });
});

<span class="text">TEXT</span>
<span class="text">TEXT</span>
<span class="text">TEXT</span>
<span class="text">TEXT</span>
<span class="text">TEXT</span>
<span class="text">TEXT</span>
<span class="text">TEXT</span>

edited May 2, 2017 at 18:10

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Apr 25, 2017 at 10:48

Serge K.

5,3331 gold badge22 silver badges27 bronze badges

Comments

Alberto Martínez · Accepted Answer · 2017-04-25 10:43:16Z

0

<p id="text" onclick="myFunction()">Text.</p>
<script>
function myFunction() {
    document.getElementById("demo").style.color = "red";
}
</script>

UPDATE= you need to change class for id, or just add id="text" to call the object

answered Apr 25, 2017 at 10:43

Alberto Martínez

2511 gold badge3 silver badges15 bronze badges

Comments

Kartik Chauhan · Accepted Answer · 2017-04-25 11:23:10Z

Add this code before the end of your </body> tag.

<script src="https://code.jquery.com/jquery-3.2.0.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        var counter = 0;
        $('.text').on('click', function() {
            counter++;
            if(counter < 3)
            {
                if($(this).text() == 'Text1')
                    $(this).css("color", "red");
                else
                    $(this).css("color", "blue");
            }
        });    
    });
</script>

Code explaination follows:

Step 1: We're importing Jquery library first, because it gives more flexibility in writing javascript code.

Step 2: Declaring a global countervariable and initializing it to 0.

Step 3: Binding a function to the click event for elements with class text.

Step 4: Checking if counter < 3. If it is not then do nothing otherwise check if clicked element was 'Text1' then change it's color to 'red' otherwise change color to 'blue'.

Your description was a little vague so only thing I came up was this. You can change this code to your requirements now.

Peter Mortensen · Accepted Answer · 2017-05-02 18:12:32Z

0

If you meant that each element has its own color then I suggest adding a data-attribute to the elements, let's say data-color, and change the color according to its value.

For example:

<div class="slide_button_wrapper left first" ><p class="text" data-color="red">Text1</p></div>
<div class="slide_button_wrapper right first" ><p class="text" data-color="blue">Text2</p></div>

Pure JavaScript:

var elements = document.querySelectorAll('.text');
for(var z = 0; z < elements.length; z++) {
    var elem = elements[z];
    elem.onclick = function() {
        var color = this.getAttribute("data-color");
        this.style.color = color;
        return false;
    };
}

edited May 2, 2017 at 18:12

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Apr 25, 2017 at 10:52

Sagiv b.g

31.1k10 gold badges72 silver badges106 bronze badges

Collectives™ on Stack Overflow

How to trigger different functions when I click the same element?

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related