Schaltzustand auf Webseite ohne refresh darstellen

International Deutsch
6

danke, habe was passendes gefunden, müsste AJAX sein. Jetzt geht es...

<!DOCTYPE html>
<html>
<body>
<script>
function sendData(led) {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("LEDState").innerHTML =
      this.responseText;
    }
  };
  xhttp.open("GET", "setLED?LEDstate="+led, true);
  xhttp.send();
}

setInterval(function() {
  // Call a function repetatively with 2 Second interval
  getData();
}, 2000); //2000mSeconds update rate

function getData() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("ADCValue").innerHTML =
      this.responseText;
    }
  };
  xhttp.open("GET", "readADC", true);
  xhttp.send();
}
</script>

<script language='Javascript' type='text/javascript'>
   if (parent.frames.length) top.location.href = document.location;
   var timeout = 200;
   function reload(element){
    setTimeout('reloadImg("' + element.id + '")',timeout);
   }
   function reloadImg(id){
    var obj = document.getElementById(id);
    var cameraIP = obj.src.split('&t=');
    var date = new Date();
    obj.src = cameraIP[0] + '&t=' + Math.floor(date.getTime()/timeout);
   }
</script>

<style type="text/css">
	.btn {background-color:lightgreen;cursor:pointer;width:45vw;height:20vh;font-size:10vw;}
	.btn {background-color:darkgray;cursor:pointer;width:45vw;height:20vh;font-size:10vw;}
</style>

<title>Toröffner</title>
<center>

<div>
	<input onclick="sendData(0)" type=image id='tast' src='http://spunky1a.spdns.de:91/snapshot.cgi?user=admin&pwd=' width=90% onload='reload(this)' onerror='reload(this)'>
</div>


<div>
	<button class="btn" type="button" onclick="sendData(1)">AUF</button>
	<button class="btn" type="button" onclick="sendData(2)">ZU</button>
</div>


<div>
	<button class="btn" type="button" onclick="sendData(3)">STOP</button>
	<button class="btn" type="button" onclick="sendData(4)">AUTO</button>
</div>


<div>
	ADC Value is : <span id="ADCValue">0</span>

	LED State is : <span id="LEDState">NA</span>
</div>

</center>
</body>
</html>

wie kann ich es anstellen, den style (button-Farbe) von außerhalb (NodeMCU) zu beeinflussen.

also so:

Normal ist der Button grau
ich drücke den Button und es wird ein Befehl auf dem µC ausgeführt
der µC gibt eine Rückmeldung "Befehl angekommen"
jetzt soll der Button kurz grün aufleuchten, dann wieder grau

wie kann man das machen?

MfG.