Script works locally but not on live site?

Current code

<html>
<body>
<table border="0" id="mytable">
  <tr>
    <th>
      <div style="font-size:1.5vw;">Today's set is day:&nbsp;</div>
    </th>
    <th class="blackfont"><span id="day"></span>
    </th><th> &nbsp;for SSTC commissions.&nbsp;
    </th>
  </tr>
</table>

<script src="day.js">
//Day Script  1651190400000
var startDate = 1547546400000;
var newDate = new Date();
var timeNow = newDate.getTime();
var counter = Math.floor((timeNow - startDate) / 86400000) + 7;
    if (counter >16) { 
        if (Math.floor(counter / 16) == Math.ceil(counter / 16)) 
                { counter = 16 } 
            else { counter -= (16 * Math.floor(counter / 16)); 
    } 
}

document.getElementById("day").innerHTML = counter
// End Day Script

// Background Color Script

$("#mytable tr th span").each(function () {
  var cellValue = $(this).html();
  const parentTh = $(this).parent();
  
  if (!isNaN(parseFloat(cellValue))) {
    if (cellValue == 1 || cellValue == 6 || cellValue == 14) {
      // Set 1
      parentTh.css("background-color", "#00c2ff");
      parentTh.css("font-weight", "bold");
    }

    if (cellValue == 2 || cellValue == 7) {
      // Set 2
      parentTh.css("background-color", "lime");
      parentTh.css("font-weight", "bold");
    }

    if (cellValue == 3 || cellValue == 9) {
      // Set 3
      parentTh.css("background-color", "#f8B6Ff");
      parentTh.css("font-weight", "bold");
    }

    if (cellValue == 4 || cellValue == 10) {
      parentTh.css("background-color", "#B2BABB");
      parentTh.css("font-weight", "bold");
    }

    if (cellValue == 5 || cellValue == 12) {
      parentTh.css("background-color", "yellow");
      parentTh.css("font-weight", "bold");
    }

    if (cellValue == 8 || cellValue == 15) {
      parentTh.css("background-color", "#FF7043");
      parentTh.css("font-weight", "bold");
    }

    if (cellValue == 11 || cellValue == 13 || cellValue == 16) {
      parentTh.css("background-color", "#A1887F");
      parentTh.css("font-weight", "bold");
    }
  }
});


</script>
</body>
</html>

Expected behavior of code

Works locally with or without WAMP (EasyPHP, Xamp, Largon).

Works locally even without WAMP (EasyPHP, Xamp, Largon):

Current behavior of code

Does not work on live website:

Steps I have taken

I have no clue why it works locally even without WAMP, with WAMP, but doesn’t work when it’s on the server.

The “day” number is actually there, if you highlight the area on the live site…the number is there but the background color changer script isn’t working on it.

I have made sure to include

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

In every page whether it’s necessary or not. I’ve also had trouble with scripts not working if I try to src them from an external .js file = the script refuses to work. They refuse to work unless I place them in the <body> and place the script code it self below where they’re instructed to work and display or do something.

Live URL:

https://nwdb.42web.io/workshopguide/ws_index.html

My question I’d like help resolving:

Why does it work everywhere else I put it except on the live site?

You need to use https for the CDN link.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

I would suggest using the CDN links they provide and the latest version.

https://code.jquery.com/jquery-3.6.0.min.js

2 Likes

I laughed out loud at the fact the fix was including one letter S.
I messed with it for a few hours changing this and that and it was one character missing. LOL!

How often does whatever that is update? The most common I see in code is 3.5.1.

And that’s probably why the other scripts didn’t work in all browsers. I’ll test that out when I get back to it.

Thanks, lasjorg!

It’s not an uncommon mistake to try to use an insecure resource on a secure connection. The browser will block it (CORS block). If you open the browser console it will show an error as well. I would suggest you get in the habit of checking the browser console for errors/warnings.

The jQuery API is very stable as it’s been around for a long time, as such the updates are mainly security and bug fixes (with the occasional deprecation or backward compatibility breaks).

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.