Repl.it JavaScript not activating

So im trying to move my local weather app (https://codepen.io/Mike-was-here123/pen/Ozbzqq) to repl.it --> https://repl.it/@John_Nicole/wip

Everything with CSS/ html is working, but for some reason my JavaScript is just not running at all. Can repl.it support API’s?

Is there anyway i can prevent my background image from moving in size? Ill do this until i make bootstrap html.

<head>
  <meta charset="UTF-8">
  <title>Your local weather</title>
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css">
    <link href="index.css" rel="stylesheet" type="text/css">
    <script src="index.js" type="text/javascript"></script>
</head>

Update: fixed the link

If you look at the console in repl you’ll see that it’s tellin you what’s wrong:

It encountered an unexpected symbol at the first character of line 5. It doesn’t know what $ means. This tells me that there is a problem with how you imported jQuery.

Okay, so whats the correct way to import jQurey?

I you google it, you’ll see lots of handy results that you can copy-paste.

I tried
<script src="jquery-3.3.1.min.js"></script> &
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Got the same error

I just took a look at your repl.it link and it is full of syntax errors which would cause things to not look/work correctly. You are missing a lot of closing > and have extra </div> where they do not belong.

Also, in the head tag you have:

<script src="index.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">

In the body tag you have:

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.0/moment.min.js'></script>
<script src="js/index.js"></script>

The part in the body is correct. The part in the top is not correct, because jQuery should appear first before your custom JavaScript code. Also, you only should import the jQuery library one time and it is typically best to put it at the bottom of the body element which you have done in the second case.

Once I fixed your 10-12 html syntax issues and removed the script tags from the head element, your page seem to work, though there are some design/styling issues you will need to fix on your own.

1 Like

I’m still highly confused. I fixed the HTML syntax, and just cannot get the head right. As you said the body is fine, so i’m highly confused on how to do the head. Help?

Why cant i copy and paste all my links in the head and it work? Why does it have to be so over complicated? Its importing links, i can’t calculate this out. The only way i will know is by seeing the answer. I asked this same question on stack overflow and someone told me to arrange the links like that, and i did (what you saw). Then it didn’t work and they just left.

Do you have another version of the repl.it, because https://repl.it/@John_Nicole/wip stll shows the code with script tags in the head element?

As I said in the previous reply, all you have to do is take out the following from the head element:

<script src="index.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">

If you leave it in there, it is going to error out, because your index.js file has jQuery syntax, but you load your jQuery second, so it does not know what $ means.

I fixed all the HTML errors again, as it didn’t save for some reason.

So i went back and deleted the two lines you told me too and now my head looks like:

<head>
  <meta charset="UTF-8">
  <title>Your local weather</title>
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css">
    <link href="index.css" rel="stylesheet" type="text/css">
</head>

Body:

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.0/moment.min.js'></script>
<script src="js/index.js"></script>

And still for me its not working. If the link isn’t working --> https://repl.it/@John_Nicole/wip
Here is the entire HTML code, did i miss anything?


<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Your local weather</title>
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css">
    <link href="index.css" rel="stylesheet" type="text/css">
</head>
<body>
  <div style="min-width: 1920px; margin: 0 auto; max-height: 1080px;">
  <div class="background" id="back">
    <div class="parent" id="main">
      <div>
        <div class="town">
          <h3 id="city" class="ban">New York, US</h3></div>
        <div class="date">
          <h4 id="date">Sunday, October 15th, 2017</h4></div>
        <hr class="style-one"/>
      </div>
      <div class="container-fluid">
        <div class="row">
          <div class="image"><img id="y" src="https://s1.postimg.org/1adylj5ef3/Weather_Sun_Abstract.png" /></div>
          <h4 id="temp">21</h4>
          <div class="convertClass"><a class="f" id="convert" href=#>°C</a></div>
          <h3 class="" id="click"></h3>
          <div class="extra-wrapper">
            <div class="row">
              <div class="column first">
                <h1 class="extra-font" id="visable">Visiblity: 3 km</h1>
                <h1 class="extra-font" id="pressure">Pressure: 30 inHG</h1>
                <h1 class="extra-font" id="clouds">Clouds: 2</h1>
              </div>
              <div class="column second">
                <h1 class="extra-font" id="speed">Wind speed: 18 kph</h1>
                <h1 class="extra-font" id="humidity">Humidity: 78%</h1>
                <h1 class="extra-font" id="hoursOfLight">day light: 11:09</h1></div>
            </div>
          </div>
        </div>
      </div>
      <div class="container-fluid">
        <h2 id="sky">Clear sky</h2>
        <!-- sky -->
        <div class="row hl">
          <div><img id="arrow" src="https://s1.postimg.org/1belime5m7/image.png"></div>
          <div>
            <h1 id="highest">23°C</h1></div>
          <div><img id="arrow" src="https://s1.postimg.org/3oh7ztlyr3/down.png"></div>
          <div>
            <h1 id="lowest">14°C</h1></div>
        </div>
        <hr/>
      </div>
      <div class="container-fluid">
        <h2 id="time">19:35</h2>
        <div class="row sun">
          <div><img id="arrow" src="https://s1.postimg.org/2opqfq2bof/sunrise.png"></div>
          <div>
            <h1 id="sunrise">07:14</h1></div>
          <div><img id="arrow" src="https://s1.postimg.org/1b37bosrnz/sunset.png"></div>
          <div>
            <h1 id="sunset">18:22</h1></div>
          <!-- row -->
        </div>
        <hr /><b><button class="information" id = "nk" href="#">Convert to North Korean Weather</button></b></div>
    </div>
    </div>
    </div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.0/moment.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>

Soon i’m planning to go back through and redo the HTML/ css (keeping the tags/ links) because i used way to many Div’s and i want to make a fluid html.

Look at the errors you are getting in the console. You should always start with the console when things are not working as you expect.

First, you are referencing a JavaScript file at js/index.js

It should be just index.js, because you do not have it in a folder called js.

The second error suggests that repl.it is blocking access to the geolocation API. I guess they feel this is a privacy issue and have blocked the ability to use it. A user could also block it, which is why you should have a backup method in place to use the user’s ip address with a third-party API which returns geo-location coordinates for an ip.

1 Like

Here is my code for body:

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.0/moment.min.js'></script>
<script src="index.js"></script>

I would say its most likely that it is blocked, and ill just submit my codepen.io code to the website/ webpage competition on repl.it.

I will give you the solution as it would work and doesn’t because of something out of your control.

Update: It does work!

You just cant run it in that view, open it in new tab.

Good to know for future reference. I have only used repl.it for testing out JavaScript. Looks like they are becoming more like Codepen.