Применение JavaScript к HTML

Прежде всего, я заранее прошу прощения за незнание с моей стороны - я совсем не знаю JavaScript, и я несколько новичок в Stackru и jsFiddle. Я сделал свою домашнюю работу и смог заставить функционировать работать с jsFiddle, но теперь (что должно быть легко) я не могу применить его к своему HTML-коду. Рабочий код здесь: http://jsfiddle.net/8p7J2/354/

Теперь, когда у меня есть весь необходимый код (позже я добавлю больше стилей), как мне применить JavaScript к HTML? Я попробовал это безуспешно:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Walser Rewards - Contact Us</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
<script src="contact.js" type="text/javascript"></script>
</head>

Должно ли оно быть в заголовке, сразу после / перед формой, непосредственно перед тегом / body или где-то еще?

Источник

5 ответов

Исходный код в рабочем коде (demo) использует библиотеку jQuery, поэтому вы должны включить ее в свой документ. После <link href="styles.css" rel="stylesheet" type="text/css" />

Добавьте строку ниже.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

Источник

Прежде всего, отличная работа! Есть несколько небольших проблем с тем, что вы делаете, что может быть причиной. Вы действительно должны убедиться, что вы включаете jQuery при использовании функциональности jQuery. Вы можете добавить это, включив эту строку перед тем, как загружать свой файл contacts.js.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>

Это установит $, чтобы сказать, что это jQuery. Как только вы это сделаете, вы должны будете убедиться, что он не будет пытаться запустить ваш код, пока jQuery не будет полностью загружен. чтобы сделать это, поместите это в начале вашего файла contacts.js.

$( document ).ready(function() {

а потом это внизу.

});

Эта оболочка просто говорит странице не вызывать ваши функции, пока все не загрузится правильно. надеюсь это поможет! И не стесняйтесь задавать вопросы:)

Источник

Дело в том, что скрипт загружается до отображения элементов HTML. Если у вас есть свой код в contact.jsзаверните это в $(document).ready():

$(document).ready(function() {
    $("#member,").css("display","none");

    var showTop = $.cookie('showTop');
    if (showTop == 'expanded') {
      $("#member").show("fast");
      $('input[name=mbr]:checked');
    } else {
      $("#member").hide("fast");
      $('input[name=mbr]:checked');
  }
});

$(".mbr-yn").click(function(){
    if ($('input[name=mbr]:checked').val() == "Yes") {
        $("#member").slideDown("fast"); //Slide Down Effect
        $.cookie('showTop', 'expanded'); //Add cookie 'ShowTop'
    }
    if ($('input[name=mbr]:checked').val() == "No"){ 
        $("#member").slideUp("fast");  
        $.cookie('showTop', 'collapsed'); //Add cookie 'ShowTop'
    }
 });

И не забудьте включить библиотеку jQuery перед вашим скриптом:

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
Источник 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Walser Rewards - Contact Us</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<link href="styles.css" rel="stylesheet" type="text/css" />
<script src="contact.js" type="text/javascript"></script>
<script type="text/javascript>
put your jsfiddle javascript code here
</script>
</head>
<body>
put your jsfiddle html code here
</body>
</html>
Источник

Я бы поместил его в непосредственную функцию внутри блока скрипта непосредственно перед закрывающим тегом body, чтобы он запускался после загрузки содержимого страницы:

<script>

$(function() { 

/* in here */ 

}); 

</script>
Источник
Другие вопросы по тегам