如何链接javascript和html

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:

我在一个非常简单的html文件上创建了一个非常简单的程序。我想简单地找出如何将javascript链接到html和css。以下是我的示例代码:

(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!

现在有了这段代码,我试图用两个按钮来显示和隐藏一条鱼的图片......但我似乎无法让它工作,我相信这与我如何连接我的工作有关文件。请帮忙!

6 个解决方案

#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.

基于您在问题中的评论,您似乎正在使用jQuery,但您没有将jQuery作为源代码的一部分。

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

您需要在script.js上面包含jQuery源代码。

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

以下是使用Google CDN进行jQuery库的示例:

<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>

#2

try this in javascript

在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>

#3

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

我肯定会使用jQuery这样的东西。这是一个Plunker,展示了如何实现这一目标。

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>

#4

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

如果您使用的是jquery,还需要在.js链接上方链接jquery源,

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

这是google cdn(所以你不必下载它):

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

#5

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

如果您使用的是Chrome,请尝试使用开发者工具;右键单击页面然后检查元素。在开发人员工具窗格中,选择CONSOLE选项卡,该选项卡会在您的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".

另外我注意到你将div.picture显示设置为“none”。

#6

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

您可以在脚本标记内编写javascript。 (如果你想在HTML中添加javascript

the following is to link it to another file.

以下是将其链接到另一个文件。

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

#1