title: Change CSS Style with AJAX and without reloading
body: <p>Is it possible to change the color of an CSS element after something happened in the Server?</p>
  
  <p>In my program I click a button, and after this a PHP programs starts. This program changes a value in the server (value of a GPIO port of a Raspberry Pi). </p>
  
  <p>Is there a possibility that i can change a CSS attribute with PHP after the side is loaded? If I try AJAX it has no impact because the site is already loaded, and the output has no effect on the site.</p>
  
  <pre><code>&lt;div id="output"&gt;  
    &lt;script type='text/javascript'&gt;
      var gpio_status = '0';
    &lt;/script&gt;
  &lt;/div&gt;
  
  &lt;script type="text/javascript"&gt;
  var php_output = document.getElementById("output");
  var request;
  
  function gpio_out(gpio_nr) {
    request = new XMLHttpRequest();
    request.open("post", "gpio_out.php", true);
    request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    request.send("daten=" + gpio_nr);
    request.onreadystatechange = request_status;
  
  }
  
  function request_status() {
    if (request.readyState == 4 &amp;&amp; request.status == 200) {
      php_output.innerHTML = request.responseText;
    }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>Content of the AJAX file:</p>
  
  <pre><code>  $gpio_status = shell_exec("cat /sys/class/gpio/gpio" . $gpio_nr . "/value");
  
    echo "&lt;script type='text/javascript'&gt;";
      echo "var gpio_status = '$gpio_status';";
    echo "&lt;/script&gt;";
  </code></pre>
  
  <p>At the End i want the JS variable "gpio_status". But it has got always the same value which is the value i gave it at the beginning: 0. If I colsole.log() the variable I always get 0. But my other Code works fine.</p>