How to change CSS property using button click and id?

Question

I have JSFIddle https://jsfiddle.net/rinku16/tfsrnj8y/21/, i done all thing correctly but don't know where is error. Please correct me. You can get all my code at JSFiddle.

I want to move the focus button to next and previous button (only 1,2,3.... NOT on Previous and Next Button) based on button click next/previous. Initialy it will be on 0 orange colored button when i click next it move to 1 colored button and same case for previous button.

JS Code.

$(document).ready(function() {

$('#nextValue').click(function() {

    var x = $('.nav-numbers .btn :focus').filter(function () { 
        return this
      });

      $('#'+x).css({"background-color": ""});
      $('#'+x).next().css({"background-color": "#e67e22", "color": "#ffffff"});

});

$('#PreValue').click(function() {

    var x = $('.nav-numbers .btn :focus').filter(function () { 
    return this
  });

  $('#'+x).css({"background-color": ""});
  $('#'+x).prev().css({"background-color": "#e67e22", "color": "#ffffff"});

});

  $('.nav button').click(function() {

  /* var start = $(this).text() */;

  $(this).css({"background-color": "#e67e22", "color": "#ffffff"});


});

$('.nav button')[0].click()


});

Thanks

JulianT · Accepted Answer · 2020-03-12 10:35:56Z

1

The problem lies with this line of code.

    var x = $('.nav-numbers .btn :focus').filter(function () { 
        return this
    });

This basically returns an empty object. "Focus" state only gets triggered when an element (such as a form input) that has received focus. It is generally triggered when the user clicks or taps on an element or selects it with the keyboard's "tab" key. You can read more about it here (https://developer.mozilla.org/en-US/docs/Web/CSS/:focus).

I've provided you a simple sample here https://jsfiddle.net/gu81cbkm/.

answered Mar 12, 2020 at 10:35

JulianT

362 silver badges5 bronze badges

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

Collectives™ on Stack Overflow

How to change CSS property using button click and id?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related