The color of the button does not change when the jQuery onclick event is triggered

Question

The color of the button does not change when the jQuery onclick event is triggered

I am facing an issue with my buttons, specifically with Button 2. When Button 2 is clicked, I want the background color to change using an onclick event. However, despite my efforts, I have been unable to achieve this. Whenever I click Button 2, the color of Button 1 changes instead. The same issue occurs when I click Button 3.

var count = 1;
    function setColor(btn, color) {
     var btn = 'button';
     var color = '#101010';
    
        var property = document.getElementById(btn);
        if (count == 0) {
            property.style.backgroundColor = "#FFFFFF"
            count = 1;        
        }
        else {
            property.style.backgroundColor = "red"
            count = 0;
        }
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<button type="button" id="button" onclick="setColor()">Button 1</button>
<button type="button" id="button" onclick="setColor()">Button 2</button>
<button type="button" id="button" onclick="setColor()">Button 3</button>

Here is my updated code:

 $.ajax({
 type: "POST",
 data: {city:city,locality:locality},
  url: "rentlocalityFilter.php",
 success:function(data){

   var htmlString='';
          $.each( res['data'], function( key, value ) {
           var id = value.id;
           htmlString +='<a class="col-md-1 icon" style="margin-top:10px;cursor:pointer" onclick="guesttt_login()"><i class="fa fa-heart" aria-hidden="true" style="margin-top: -11px; color: red;" id="button" id="button" onclick="setColor('+value.id+')"></i></a>';

        });

 }

 });


var count = 1;
function setColor() {
 var btn = 'button';
 var color = '#101010';

    var property = document.getElementById(btn);
    if (count == 0) {
        property.style.backgroundColor = "#FFFFFF"
        count = 1;        
    }
    else {
        property.style.backgroundColor = "red"
        count = 0;
    }
    }

javascript jquery html css

Answer 1

Answer №1

It is essential for IDs on an HTML page to be unique.

To ensure uniqueness, IDs should be assigned as follows:

<button type="button" id="button1" onclick="setColor('button1')">Button 1</button>
<button type="button" id="button2" onclick="setColor('button2')">Button 2</button>
<button type="button" id="button3" onclick="setColor('button3')">Button 3</button>

Additionally, modify your JavaScript code as shown below:

var count = 1;
function setColor(_btn, color) {
 var btn = _btn;
 var color = '#101010';

    var property = document.getElementById(btn);
    if (count == 0) {
        property.style.backgroundColor = "#FFFFFF"
        count = 1;        
    }
    else {
        property.style.backgroundColor = "red"
        count = 0;
    }
}

Answer 2

It is essential for IDs on an HTML page to be unique.

To ensure uniqueness, IDs should be assigned as follows:

<button type="button" id="button1" onclick="setColor('button1')">Button 1</button>
<button type="button" id="button2" onclick="setColor('button2')">Button 2</button>
<button type="button" id="button3" onclick="setColor('button3')">Button 3</button>

Additionally, modify your JavaScript code as shown below:

var count = 1;
function setColor(_btn, color) {
 var btn = _btn;
 var color = '#101010';

    var property = document.getElementById(btn);
    if (count == 0) {
        property.style.backgroundColor = "#FFFFFF"
        count = 1;        
    }
    else {
        property.style.backgroundColor = "red"
        count = 0;
    }
}

Answer 3

Answer №2

Give this a try:

<button onclick="setColor(this)">Button 1</button>
<button onclick="setColor(this)">Button 2</button>
<button onclick="setColor(this)">Button 3</button>

var count = 1;
function setColor(btn) {
    var color = '#101010';
    if (count == 0) {
        btn.style.backgroundColor = "#FFFFFF";
        count = 1;        
    } else {
        btn.style.backgroundColor = "red";
        count = 0;
    }
}

Check out this example on jsfiddle

Edit 1:

The last update you made is a step in the right direction, but the solution still lacks information about the value variable. It's recommended to add an Id like this,

id="'+value.id+'" onclick="setColor('+value.id+')

, or you can use jquery for a cleaner solution.

<button>Button 1</button>
<button>Button 2</button>
<button>Button 3</button>

var count = 1;
$(document).ready(function() {
  $("button").click(function() {
    var btn = $(this); 
    var color = '#101010';
    if (count == 0) {
      btn.css("backgroundColor", "#FFFFFF");
      count = 1;
    } else {
      btn.css("backgroundColor", "red");
      count = 0;
    }
  });
});

Here is a jquery solution for you to try

Hope this helps!

Answer 4

Give this a try:

<button onclick="setColor(this)">Button 1</button>
<button onclick="setColor(this)">Button 2</button>
<button onclick="setColor(this)">Button 3</button>

var count = 1;
function setColor(btn) {
    var color = '#101010';
    if (count == 0) {
        btn.style.backgroundColor = "#FFFFFF";
        count = 1;        
    } else {
        btn.style.backgroundColor = "red";
        count = 0;
    }
}

Check out this example on jsfiddle

Edit 1:

The last update you made is a step in the right direction, but the solution still lacks information about the value variable. It's recommended to add an Id like this,

id="'+value.id+'" onclick="setColor('+value.id+')

, or you can use jquery for a cleaner solution.

<button>Button 1</button>
<button>Button 2</button>
<button>Button 3</button>

var count = 1;
$(document).ready(function() {
  $("button").click(function() {
    var btn = $(this); 
    var color = '#101010';
    if (count == 0) {
      btn.css("backgroundColor", "#FFFFFF");
      count = 1;
    } else {
      btn.css("backgroundColor", "red");
      count = 0;
    }
  });
});

Here is a jquery solution for you to try

Hope this helps!

Answer 5

Answer №3

Check out this example, it's functional and has a minimal amount of code. Simply pass the clicked element to the function and use toggleClass to change the background color.
http://api.jquery.com/toggleclass/

   
    function changeColor(elem) {
     $(elem).toggleClass('active')


    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<button type="button"  id="button1" onclick="changeColor(this)">Button 1</button>
<button type="button" id="button2" onclick="changeColor(this)">Button 2</button>
<button type="button" id="button3" onclick="changeColor(this)">Button 3</button>
<style>.active{background-color:red}</style>

Answer 6

Check out this example, it's functional and has a minimal amount of code. Simply pass the clicked element to the function and use toggleClass to change the background color.
http://api.jquery.com/toggleclass/

   
    function changeColor(elem) {
     $(elem).toggleClass('active')


    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<button type="button"  id="button1" onclick="changeColor(this)">Button 1</button>
<button type="button" id="button2" onclick="changeColor(this)">Button 2</button>
<button type="button" id="button3" onclick="changeColor(this)">Button 3</button>
<style>.active{background-color:red}</style>

Answer 7

Answer №4

To achieve this effect, follow these simple steps:

var counter = 1;
    function changeColor(btn) {

     var colorCode = '#101010';
        var buttonElement = document.getElementById(btn);
        if (counter == 0) {
            buttonElement.style.backgroundColor = "#FFFFFF"
            counter = 1;        
        }
        else {
            buttonElement.style.backgroundColor = "red"
            counter = 0;
        }
    }

Remember to include the value.id within the id attribute when calling the function

htmlString +='<a class="col-md-1 icon" style="margin-top:10px;cursor:pointer"> <i class="fa fa-heart" aria-hidden="true" style="margin-top: -11px; color: #8bc34a;" id="'+value.id+'" onclick="changeColor('+value.id+')"></i></a>'

Answer 8

To achieve this effect, follow these simple steps:

var counter = 1;
    function changeColor(btn) {

     var colorCode = '#101010';
        var buttonElement = document.getElementById(btn);
        if (counter == 0) {
            buttonElement.style.backgroundColor = "#FFFFFF"
            counter = 1;        
        }
        else {
            buttonElement.style.backgroundColor = "red"
            counter = 0;
        }
    }

Remember to include the value.id within the id attribute when calling the function

htmlString +='<a class="col-md-1 icon" style="margin-top:10px;cursor:pointer"> <i class="fa fa-heart" aria-hidden="true" style="margin-top: -11px; color: #8bc34a;" id="'+value.id+'" onclick="changeColor('+value.id+')"></i></a>'

Answer 9

Answer №5

Here is an example of HTML code:

<button type="button" id="button1" onclick="setColor('button1')">Button 1</button>
<button type="button" id="button2" onclick="setColor('button2')">Button 2</button>
<button type="button" id="button3" onclick="setColor('button3')">Button 3</button>

And here is an example of JavaScript code:

var count = 1;
function setColor(btnId) {

 var color = '#101010';

    if (count == 0) {
        btnId.style.backgroundColor = "#FFFFFF";
        count = 1;        
    }
    else {
        btnId.style.backgroundColor = "red";
        count = 0;
    }
}

I hope this information is helpful to you.

Answer 10

Here is an example of HTML code:

<button type="button" id="button1" onclick="setColor('button1')">Button 1</button>
<button type="button" id="button2" onclick="setColor('button2')">Button 2</button>
<button type="button" id="button3" onclick="setColor('button3')">Button 3</button>

And here is an example of JavaScript code:

var count = 1;
function setColor(btnId) {

 var color = '#101010';

    if (count == 0) {
        btnId.style.backgroundColor = "#FFFFFF";
        count = 1;        
    }
    else {
        btnId.style.backgroundColor = "red";
        count = 0;
    }
}

I hope this information is helpful to you.

The color of the button does not change when the jQuery onclick event is triggered

Answer №1

Answer №2

Edit 1:

Answer №3

Answer №4

Answer №5

Similar questions

Incorporate a PHP GET parameter through an onclick event to redirect using window.location in JavaScript when a button is

Angular Bootstrap div width not displaying fully on iPad device

Discovering the method to retrieve the values from 2 dropdown lists that are populated by a JavaScript function

Click on the link to return to the previous page on the website

Reposition the origin when scaling SVG

`javascript pop up notification will only display one time`

What is the best way to display a variable (string/int) from a PHP file onto an HTML file?

Utilize the power of XMLHttpRequest to fetch and load numerous audio files, seamlessly integrating them for playback through the Web Audio

Discover the offsetTop value of a child element in React using TypeScript

Is it possible to dynamically update the contents of a modal body and modal footer using

Tips for utilizing the @Input directive within the <router-outlet></router-outlet> component

What is the best way to incorporate interactive columns in DataTables?

Activate lightbox on click to swap image source temporarily

Issue with [rowHovered] directive in PrimeNG Table when cell-background is defined

Storing selected checkbox values in an sqlite database using JavaScript

Changed over to a promise-oriented database, causing my login feature to malfunction completely

Occasionally, the map may take a moment to fully load

Mobile phone web development using HTML5

Display a section of the picture at maximum width

Refreshing an HTML table with new data using jQuery and Ajax after a different selection