Why is my JavaScript code refusing to run on my website?

Question

The following is what my HTML document looks like:

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="scripts/homepage-script.js"></script>
</head>

<body>
<div id="how-it-works">
    <p>How It Works</p>
    <img src="some-imageurl">
    <div id="steps">
    <p>Step 1</p>
    <p>Step 2</p>
    <p>Step 3</p>
</div>

And here is my script:

$('#steps > p').on('click' , function(){
    $('steps > p').css('background', 'yellow');
});

Why is my script not running on my website?

Because you're running it before the DOM is ready? https://learn.jquery.com/using-jquery-core/document-ready/ — j08691, Aug 19 '16 at 00:37

gavgrif · Accepted Answer · 2016-08-19T01:03:54.233

1

You need to wrap the jQuery in a document ready and you can use $(this) since it is targetted in the onclick event:

$(document).ready(function(){
     $('#steps > p').on('click',function(){
          $(this).css('background', 'yellow');
    });
})

however what I would recommend is having a highlight class that is then toggled in the onclick event;

//CSS
.highlight{background:yellow}


$(document).ready(function(){
     $('#steps > p').on('click',function(){
          $(this).toggleClass('highlight');
    });
})

Tht way you are adding / removing a class instead of altering the elements CSS.

If you want to add the highlight class to all the p's in that div as per @Phil comment -

$(document).ready(function(){
     $('#steps > p').on('click',function(){
         $('#steps > p').toggleClass('highlight');
    });
})

$(document).ready(function(){
     $('#steps > p').on('click',function(){
          $(this).toggleClass('highlight');
    });
})

.highlight{background:yellow}

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="scripts/homepage-script.js"></script>
</head>

<body>
<div id="how-it-works">
    <p>How It Works</p>
    <img src="some-imageurl">
    <div id="steps">
    <p>Step 1</p>
    <p>Step 2</p>
    <p>Step 3</p>
</div>
  </body>
  </html>

edited Aug 19 '16 at 01:03

answered Aug 19 '16 at 00:38

gavgrif

15,194
2
25
27

How do you know OP doesn't want to turn **all** the paragraphs yellow? – Phil Aug 19 '16 at 00:38
That's jquery. not javascript. – Aug 19 '16 at 00:42
1

@sara err, what? jQuery is JavaScript – Phil Aug 19 '16 at 00:43
@sara - three points - a) the OP indicates a tag of jquery, b) the OP is including the jQuery library and c) the OP's script IS JQUERY! – gavgrif Aug 19 '16 at 00:44
never mind ... :) – Aug 19 '16 at 00:45
I tried the code in the first code block and for some reason it isn't displaying. – ajf1000 Aug 19 '16 at 00:58
1

I just added your html my my answer together in the snippet and it works fine - clicking the p colors the background yellow - clicking it again removes the background color. Try running my answer in the code snippet – gavgrif Aug 19 '16 at 01:04

score 0 · Answer 2 · answered Aug 19 '16 at 00:38

0

You are missing the # selector in your nested line of code:

$('#steps > p').css('background', 'yellow');

This will make all of the p elements turn to a yellow background. If you only want the element the user clicked, then reference the "selected" object with $(this):

$('#steps > p').on('click' , function(){
    $(this).css('background', 'yellow');
});

answered Aug 19 '16 at 00:38

Singular1ty

2,577
1
24
39

1

Still won't work as the script runs before the elements are present – Phil Aug 19 '16 at 00:39

score 0 · Answer 3 · edited Aug 19 '16 at 00:43

The script should be after the div.

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

</head>

<body>
<div id="how-it-works">
    <p>How It Works</p>
    <img src="some-imageurl">
    <div id="steps">
    <p>Step 1</p>
    <p>Step 2</p>
    <p>Step 3</p>
</div>

<!--The script should be after the div.-->
<script src="scripts/homepage-script.js"></script>

Why is my JavaScript code refusing to run on my website?

3 Answers3