Share ID but it only works in the first

Question

Share ID but it only works in the first

Navigation

#1 by (1 votes)
#2 by (0 votes)

2

Only recognizes the attributes and values of the first ID, does not respect the following. I show my code below:

index.php

<button type="button" id="boton_uno" class="boton-estado">Boton 1</button>&nbsp;&nbsp;&nbsp;
<button type="button" id="boton_dos" class="boton-estado">Boton 2</button>

functionality.js

$('#boton_uno').attr('estado', opcion1);
$('#boton_dos').attr('estado', opcion2);

$('#boton_uno').html(label1);
$('#boton_dos').html(label2);

var boton1 = document.querySelector("#boton_uno");
var boton2 = document.querySelector("#boton_dos");

if (estado == 0) {
    boton1.style.backgroundColor = "green";
    boton2.style.backgroundColor = "orange";
} else if (estado == 1) {
    boton1.style.backgroundColor = "red";
    boton2.style.backgroundColor = "orange";
} else if (estado == 2) {
    boton1.style.backgroundColor = "red";
    boton2.style.backgroundColor = "green";
}

$('.boton-estado').click(function(){
    //aqui va codigo...
    }
});

.js code: link

javascript ajax

asked by omaza1990 23.11.2016 в 15:14

source

2 answers

Thousand separator in php or mysql Create Lists with BindingList C #

score 1 · Answer 1

I think you have a problem with concepts.

IDs are the identifiers of each of the elements. They are unique and should not be repeated in more than one element of HTML . They are not mandatory.

Classes are used to assign styles to more than one element within HTML. They are not obligatory either.

Having said that, by having a class, and using JQuery , if you want to refer to the element that you have clicked, in this case, a button, you should use the reserved word this . The this element also exists for Javascript .

By means of this word you refer to the element that you just clicked (in case it was another type of event, it would refer to the element that launched that event). Therefore, in order to remove the attributes of the elements that you press, you should use this word.

Example of use in which when pressing each button I change the color of them and I put on screen their corresponding text:

$(".boton-estado").click(function() {
     $(this).css('color', 'blue');
     
     alert($(this).text());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id="boton_uno" class="boton-estado">Boton 1</button>&nbsp;&nbsp;&nbsp;
<button type="button" id="boton_dos" class="boton-estado">Boton 2</button>

score 0 · Answer 2

I think it works, maybe your variable status is the problem

var boton1 = document.querySelector("#boton_uno");
var boton2 = document.querySelector("#boton_dos");
var estado=2;
if (estado == 0) {
    boton1.style.backgroundColor = "green";
    boton2.style.backgroundColor = "orange";
} else if (estado == 1) {
    boton1.style.backgroundColor = "red";
    boton2.style.backgroundColor = "orange";
} else if (estado == 2) {
    boton1.style.backgroundColor = "red";
    boton2.style.backgroundColor = "green";
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id="boton_uno" class="boton-estado">Boton 1</button>&nbsp;&nbsp;&nbsp;
<button type="button" id="boton_dos" class="boton-estado">Boton 2</button>