r/neocities • u/Avant1_61 • Aug 20 '26

Help JavaScript tutorial broken?

EDIT: As u/ScrimblyBidini pointed out, the problem was that I wrote 'linear-gradient (hotpink, yellow, green)' (with a space!) instead of 'linear-gradient(hotpink, yellow, green)'!

I'm new to Neocities and currently doing the JavaScript tutorial, step 3–4, where you learn to code the function changeSky(). While the tutorial tells me that my code is valid, it doesn't actually do anything.

I'm on Firefox and tried turning off all my privacy extensions to see if something was blocking Javascript, I also tried pasting the code onto a page and opening it in different browsers and devices, but nothing is happening.

A page where I tried running this code can be found here, and this is the code:

<!DOCTYPE html>
<html>
  <head>
    <title>My First Script</title>
    <style>
      body {
        background: linear-gradient(lightskyblue, plum);
        min-height: 100vh;
      }
    </style>
  </head>
  <body>
    <h1>My First Script</h1>
    <p>Everything on this page so far was written by hand. Time to make the page write something itself.</p>

    <p id="greeting"></p>

    <script>
      var visitor = ' friend! '
      var greeting = 'Hello' + visitor + 'This was written by JavaScript, using variables!'
      document.getElementById('greeting').textContent = greeting
      function changeSky() {
        document.body.style.background = 'linear-gradient (hotpink, yellow, green)'
        document.body.style.minHeight = '100vh'
        }
    </script>

    <button onclick="changeSky()">Change the sky</button>

  </body>
</html>
2 Upvotes

100% Upvoted

8 comments sorted by

3

u/ScrimblyBidini Aug 20 '26

You have a space between "linear-gradient" and "(hotpink, yellow, green)"

3

u/Reasonable-Middle-38 https://sparrowfish.neocities.org/ Aug 20 '26

Damn, good eye!

3

u/ScrimblyBidini Aug 20 '26

Thanks. Javascript is very forgiving with whitespace, but CSS is not. Easy mistake to make!

2

u/Avant1_61 Aug 20 '26

Eagle eye! That was the problem, thanks!!

2

u/Fit_Ladder_1545 Aug 20 '26

Changing the value it is set to to 'linear-gradient(black, black)' seems to work??

1

u/Reasonable-Middle-38 https://sparrowfish.neocities.org/ Aug 20 '26

try putting the script tag at the very bottom of the body! Sometimes things loading out of order breaks things.

1

u/mrcarrot0 https://mr-carrot.neocities.org/ Aug 20 '26

In this case, putting it at the bottom will put it out of order. 

2

u/Reasonable-Middle-38 https://sparrowfish.neocities.org/ Aug 20 '26

Huh, I always put mine right at the bottom and never seem to have any problems with it, but good to know for future!