Question 43375 in Html Question posted in
Some basic documentation can be found here.

FIrst JavaScript script doesn't work. How to debug? – Html

I am new to JavaScript and HTML. I have a webpage with some buttons that I am using as indicator lights. Not only that, but I set up the function to get a binary byte from the server and to set the lights on or off, only nothing happens. I am not sure how you are even supposed to debug something like this, but perhaps someone can spot and error.

      <script>
         function UpdateStatusLED() {
             var xhttp = new
             XMLHttpRequest();
             xhttp.onreadystatechange = function() {
                 if (this.readyState == 4 && this.status == 200) {
                     int Status= Integer.parseInt(this.responseText);
                     if(Status & 1 == 1) {document.getElementById("OPENP").style.background = '#3a0cf2' /* blue */;}
                     else {document.getElementById("OPENP").style.background = '#f20505'; /* red*/;}
         
                     if(Status & 2 == 1) {document.getElementById("CLOSEDP").style.background = '#3a0cf2' /* blue */;}
                     else {document.getElementById("CLOSEDP").style.background = '#f20505'; /* red*/;}
         
                     if(Status & 4 == 1) {document.getElementById("OPENM").style.background = '#3a0cf2' /* blue */;}
                     else {document.getElementById("OPENM").style.background = '#f20505'; /* red*/;}
         
                     if(Status & 8 == 1) {document.getElementById("CLOSEDM").style.background = '#3a0cf2' /* blue */;}
                     else {document.getElementById("CLOSEDM").style.background = '#f20505'; /* red*/;}
         
                     if(Status & 16 == 1) {document.getElementById("RAIN").style.background = '#3a0cf2' /* blue */;}
                     else {document.getElementById("RAIN").style.background = '#f20505'; /* red*/;}
         
                     if(Status & 32 == 1) {document.getElementById("SAFE").style.background = '#3a0cf2' /* blue */;}
                     else {document.getElementById("SAFE").style.background = '#f20505'; /* red*/;}
         
                     if(Status & 64 == 1) {document.getElementById("CYCLE").style.background = '#3a0cf2' /* blue */;}
                     else {document.getElementById(CYCLE").style.background = '#f20505'; /* red*/;}
         
                     if(Status & 128 == 1) {document.getElementById("OPENCMD").style.background = '#3a0cf2' /* blue */;}
                     else {document.getElementById("OPENCMD").style.background = '#f20505'; /* red*/;}
                 }
             };
             xhttp.open("GET", "/UpdateStatusLED", true);
             xhttp.send();
         }
         setInterval(function() {
             UpdateStatusLED();
         }, 1713);
      </script>
      <script>
         function ButtonPushed(x) {
           var xhr = new XMLHttpRequest();
           xhr.open("GET", "/" + x, true);
           xhr.send();
         }
      </script>
      <script>
         function RoofIsOpen() {
             var xhttp = new
             XMLHttpRequest();
             xhttp.onreadystatechange = function() {
                 if (this.readyState == 4 && this.status == 200) {
                     document.getElementById("RoofIsOpen").innerHTML = this.responseText;
                 }
             };
             xhttp.open("GET", "/RoofIsOpen", true);
             xhttp.send();
         }
         setInterval(function() {
             RoofIsOpen();
         }, 1713);
      </script>

I put a print in the server, and it seems that the UpdateStatusLED() does never to get. Below the first script are two of the scripts that actually work.

Tags:

2

Answers


  1. 0

    You are missing a " here:

    else {document.getElementById(CYCLE").style.background = '#f20505'; /* red*/;}

    just before CYCLE

    Login or Signup to reply.
  2. 0

    In the context you are giving I can only spot 2 errors

    1:

    int Status= Integer.parseInt(this.responseText);
//^
//|
//|- int doesn't exist in Javascript

    2:

    else {document.getElementById(CYCLE").style.background = '#f20505'; /* red*/;}
//                           ^ 
//                           |
//                           |- Missing opening "

    Also this refactor will make your life way easier:

     if (this.readyState == 4 && this.status == 200) {
  const Status = Integer.parseInt(this.responseText);
  const dic = [
    {status: 1 << 0, id: 'OPENP'},
    {status: 1 << 1, id: 'CLOSEDP'},
    {status: 1 << 2, id: 'OPENM'},
    {status: 1 << 3, id: 'CLOSEDM'},
    {status: 1 << 4, id: 'RAIN'},
    {status: 1 << 5, id: 'SAFE'},
    {status: 1 << 6, id: 'CYCLE'},
    {status: 1 << 7, id: 'OPENCMD'},
  ]

  const colorRed  = '#f20505'
  const colorBlue = '#3a0cf2'

  const makeBlue = (id) => document.getElementById(id).style.background = colorBlue
  const makeRed  = (id) => document.getElementById(id).style.background = colorRed
  const updateEl = (e) => Status & e.status ? makeBlue(e.id) : makeRed(e.id)
  dic.forEach(updateEl)
}

    To better understand your problem you can open the Developer Tools on your browser and go to the console and see if there’s any error and maybe edit your post with more information.
    Without this, I think I can’t help you as you would like to.

    See Mozilla’s Developer Tools Article for further explanation.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search