JSFiddle - React, Tailwind, and code Playground
HTML
<button id="84" class="turnOn" type="button">Lamp boven de eettafel</button>
<button id="85" class="turnOn" type="button">Lamp naast de TV</button>
CSS
button {
padding: 10px;
border-radius: 5px;
}
.turnOn {
background-color: red;
}
.turnOff {
background-color: green;
}
JavaScript
$("button").click( function() {
var id = $(this).attr("id");
var state = $(this).attr("class");
var url = "/api/callAction?deviceID="+id+"&name="+state;
console.log("URL: " + url);
$.ajax({
url: url,
success: function(result) {
console.log("API call naar " + url + " is gelukt");
$(this).attr("class", result);
},
error: function(xhr, textStatus, errorThrown){
alert("API call naar " + url + " is mislukt");
}
});
});