HTML/CSS/JS beginner errors

Question

These are working in a JSFiddle that andi posted on the answer to my original question. I'm stumped as to what I've missed that it isn't working in the browser. I know this is going to be a very simple fix. Thanks in advance.

HTML:

<div class="blackwrap">
    <header class="blackbar">
        <h2>Before he knew it, he couldn't see a thing.</h2>
        <h4>He fumbled around for the <a id="flash">flashlight</a> on his phone.</h4>
    </header>
</div> <!-- .blackwrap-->    

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="script.js"></script>
</body>

CSS:

.blackbar {
    background: black;
    color: white;
}
.blackbar.lit {
    background:yellow;
    color:black;
}

Javascript:

$("#flash").on("mouseover", function(){
    $(".blackbar").addClass("lit");
}).on("mouseout", function(){
    $(".blackbar").removeClass("lit")
});

code is working fine. Make sure scripts are loaded properly. — Nishu Tayal, Oct 17 '13 at 06:13
So what's the problem, exactly? The jsfiddle seems to work fine. Look in the [JavaScript error console](http://www.netmagazine.com/tutorials/javascript-debugging-beginners) and tell what errors you see there and which lines they point to. — JJJ, Oct 17 '13 at 06:14
check with inspect element with chrome browser identify the errors and post it here — Amerrnath, Oct 17 '13 at 06:27

Harpreet Singh · Answer 1 · 2013-10-17T06:35:47.840

2

your jquery is not loaded properly use http: in src as below:

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

edited Oct 17 '13 at 06:35

answered Oct 17 '13 at 06:25

Harpreet Singh

647
10
24

This assumes that the OP is testing by using a `file:///` URI for the page. It is possible that is the case, but the question doesn't state that. – Quentin Oct 17 '13 at 06:57
yes this is the appropriate reason that the code is not running – Harpreet Singh Oct 17 '13 at 07:00

score 2 · Accepted Answer · answered Oct 17 '13 at 07:01

The problem may be, you are running the Jquery include code in your local machine with using the file:// protocol.

So on your local machine use

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

change to this on the server

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

at the server, it will be http: or https: , so server will automatically select the corresponding one.

score 1 · Answer 3 · answered Oct 17 '13 at 06:28

Its really simple fix in the cdn link to jquery you should make a http call

instead of this

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

change it to this

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

The problem is if you dont keep http the browser thinks it is a local file in your pc.

enter image description here

HTML/CSS/JS beginner errors

3 Answers3