how to link javascript and html

Question

I have created a VERY simple program on a VERY simple html file. I wish to simply find out how to link javascript to html and css. Here follows my example code:

(index.html)

<head>
    <title>JavaScript</title>
    <link rel="stylesheet" href="stylesheet.css"/>
</head>

<body>
    <div class="picture">
        <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRZAb6KcZrNTBM1UflIMAQfAGuTKN0XWYFsiTgm5M5NRwXO_udT"/>
    </div>

    <button class="show_btn">Show</button>
    <button class="hide_btn">Hide</button>

    <script src="script.js"></script>

</body>

JS:

$(document).ready(function(){ 
  $(".hide_btn").click(function(){ 
    $("p").slideUp(); 
  }); 
  $(".show_btn").click(function(){ 
    $("p").slideDown(); 
  }); 
});

CSS:

 .picture { display: none; }

Now with this code, I am attempting to use two buttons to show and hide a picture of a fish...I can't seem to get it to work however, and I believe it has something to do with how I am linking my files. Please Help!

and my javascript looks like this: $(document).ready(function(){ $(".hide_btn").click(function(){ $("p").slideUp(); }); $(".show_btn").click(function(){ $("p").slideDown(); }); }); — user4668491
– user4668491, Commented Apr 29, 2015 at 3:05
can you add your javascript to the question and not the comment? Ans also you are using jquery but you dont have jquery added to your document. — Enjayy
– Enjayy, Commented Apr 29, 2015 at 3:20

xengravity · Accepted Answer · 2015-04-29 03:20:51Z

1

Based off of your comment in your question it would appear that you are using jQuery but you do not have jQuery as part of your source code.

You will need to include the jQuery source above script.js.

Here is an example of how it should look like using Google CDN for the jQuery library:

<head>
    <title>JavaScript</title>
    <link rel="stylesheet" href="stylesheet.css"/>
</head>

<body>
    <div class="picture">
        <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRZAb6KcZrNTBM1UflIMAQfAGuTKN0XWYFsiTgm5M5NRwXO_udT"/>
    </div>

    <button class="show_btn">Show</button>
    <button class="hide_btn">Hide</button>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="script.js"></script>

</body>

answered Apr 29, 2015 at 3:20

xengravity

3,60920 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kishan · Accepted Answer · 2015-04-29 04:57:06Z

1

try this in javascript

<html>
<head>
</head>
<body>
  <div class="picture" id="picture">
    <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRZAb6KcZrNTBM1UflIMAQfAGuTKN0XWYFsiTgm5M5NRwXO_udT" />
  </div>
  <button class="show_btn" onclick="show();">Show</button>
  <button class="hide_btn" onclick="hide();">Hide</button>
<script type="text/javascript" >
function show(){
    var imgdiv = document.getElementById("picture");
    imgdiv.style.display="block";
}
function hide(){
    var imgdiv = document.getElementById("picture");
    imgdiv.style.display="none";
}
</script>
</body>
</html>

edited Apr 29, 2015 at 4:57

answered Apr 29, 2015 at 4:16

Kishan

1,21014 silver badges26 bronze badges

Comments

jake · Accepted Answer · 2015-04-29 03:25:13Z

I would definitely use jQuery for something like this. Here's a Plunker that shows how you can accomplish this.

http://embed.plnkr.co/DwTwNuF162rfgcQOdT7u/preview

<html>

<head>
  <script data-require="jquery@*" data-semver="2.1.3" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body>
  <div class="picture" id="picture">
    <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRZAb6KcZrNTBM1UflIMAQfAGuTKN0XWYFsiTgm5M5NRwXO_udT" />
  </div>
  <button class="show_btn" onclick="show()">Show</button>
  <button class="hide_btn" onclick="hide()">Hide</button>

</body>

<script>
  function show() {
    $('#picture').show();
  }

  function hide() {
    $('#picture').hide();
  }
</script>

</html>

Vault Dweller · Accepted Answer · 2015-04-29 03:25:20Z

0

If you are using jquery you also need to link the jquery source above your .js link,

here is the google cdn (so you dont have to download it):

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

edited Apr 29, 2015 at 3:25

answered Apr 29, 2015 at 3:22

Vault Dweller

1352 silver badges10 bronze badges

Comments

Angel Angeles III · Accepted Answer · 2015-04-29 07:50:16Z

0

First things first:

Include this in your <head>:

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

If you're on Chrome try using the developer tools; right click on the page then inspect element. On the developer tools pane, select the CONSOLE tab which logs all your errors in your javascript

And try this in your script:

$(document).ready(function() {
  $(".show_btn").click(function() {
    $(".picture").css('display', 'block');
  });
  $(".hide_btn").click(function() {
    $(".picture").css('display', 'none');
  });
});

Also I've noticed that you have div.picture display set to "none".

answered Apr 29, 2015 at 7:50

Angel Angeles III

3001 gold badge4 silver badges15 bronze badges

Comments

user9183203 · Accepted Answer · 2018-01-07 05:05:16Z

0

All that you need to do is the following

<script type="text/javascript"></script>

You can write javascript inside the script tags. (if you want to add javascript in HTML

the following is to link it to another file.

<script src="path to other file" > </script>

answered Jan 7, 2018 at 5:05

user9183203

1 Comment

user9183203 Over a year ago

Forgot to add... it is different for jquery

Collectives™ on Stack Overflow

how to link javascript and html

6 Answers 6

Comments

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related