JS не работает на ПК, но работает на JSFIddle

0

Код отлично работает в JSFiddle, но не работает, когда я помещаю его в html файл. Я не могу найти ошибку самостоятельно.

Вот рабочая ссылка Fiddle demo

И ниже - код, который не работает:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script> 
<script type="text/javascript">
$('#Checkbox1, #Checkbox2').on('change', function () {
    console.log();
    if ($('#Checkbox1').is(':checked') && $('#Checkbox2').is(':checked')) {
        $('#circle_2').css('background-color', '#999');
    } else {
        $('#circle_2').css('background-color', 'transparent');
    }
});
</script>

<style type="text/css">

#circle_2 {
    border:solid 1px #333;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display:inline-block;
}
#circle {
    border:solid 1px #333;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display:inline-block;
}
.circle_text{
    text-align:center;
    font-family:Arial, Helvetica, sans-serif;
    font-size:37px;
    color:#333;
    font-weight:bold;
    }
</style>


</head>

<body>
<!-- Circle 1-->
            <div id="position_1">
                <div id="circle">
                    <p class="circle_text">

                        #1
                    </p>
                </div>
            </div>
            <!-- Circle 2-->
            <div id="position_2">
                <div id="circle_2">
                    <p class="circle_text">

                        #2
                    </p>
                </div>
            </div>

            <br/><br/>

        <input type="checkbox" value="1" id="Checkbox1" name="Checkbox1"/> Answer one <br/>
        <input type="checkbox" value="1" id="Checkbox2" name="Checkbox2"/> Answer two <br/>
        <input type="checkbox" value="1" id="Checkbox3" name="a3"/> Answer three <br/>
        <input type="checkbox" value="1" id="Checkbox4" name="a4"/> Answer four <br/>
        <input type="checkbox" value="1" id="Checkbox5" name="a5"/> Answer five <br/>
        <input type="checkbox" value="1" id="Checkbox6" name="a6"/> Answer six <br/>
        <input type="checkbox" value="1" id="Checkbox7" name="a7"/> Answer seven <br/>
        <input type="checkbox" value="1" id="Checkbox8" name="a8"/> Answer eight<br/>
        <input type="checkbox" value="1" id="Checkbox9" name="a9"/> Answer nine <br/>
        <input type="checkbox" value="1" id="Checkbox10" name="a10"/> Answer ten <br/>


</body>
</html>

Я подозреваю, что у меня что-то не хватает, но не могу понять.

Теги:

4 ответа

5
Лучший ответ

Вам нужно обернуть код jQuery в готовый к документу вызов.

$(document).ready(function () {
    $('#Checkbox1, #Checkbox2').on('change', function () {
        console.log();
        if ($('#Checkbox1').is(':checked') && $('#Checkbox2').is(':checked')) {
            $('#circle_2').css('background-color', '#999');
        } else {
            $('#circle_2').css('background-color', 'transparent');
        }
    });
});

Или перед тегом закрывающего тела. Вы выполняете код до того, как элементы существуют на странице. jsFiddle.net автоматически завершает ваш код в запросе документа.

Поделиться
  • 0
    большое Вам спасибо!! оно работает! Я такой дурак :(
  • 0
    Пожалуйста. Не парься, это все часть обучения.
1

Ваш код выполняется при загрузке <head>, поэтому флажки еще не существуют. Используйте $(document).ready() чтобы выполнить код, когда страница закончила загрузку, или поместите элемент кода после элементов, используемых в коде (внутри <body>).

<script type="text/javascript">
$(document).ready(function(){
    $('#Checkbox1, #Checkbox2').on('change', function () {
        console.log();
        if ($('#Checkbox1').is(':checked') && $('#Checkbox2').is(':checked')) {
            $('#circle_2').css('background-color', '#999');
        } else {
            $('#circle_2').css('background-color', 'transparent');
        }
    });
});
</script>

Кроме того, в JSFiddle на левой панели есть опция для выполнения кода в обработчике onLoad. Это опция по умолчанию, и она также устраняет вашу проблему. Это объясняет, что он работает в JSFiddle.

Поделиться
1

JSFiddle выполняет код, когда документ готов, сам по себе. Вы должны добавить его в свой локальный файл.

Замените свой Javascript следующим:

$(document).ready(function() {
    $('#Checkbox1, #Checkbox2').on('change', function () {
            console.log();
        if ($('#Checkbox1').is(':checked') && $('#Checkbox2').is(':checked')) {
            $('#circle_2').css('background-color', '#999');
        } else {
            $('#circle_2').css('background-color', 'transparent');
        }
    });
});
Поделиться
  • 0
    пальцы вверх! Спасибо
0

Оберните код jQuery внутри функции готовности документа:

$( document ).ready(function() {
  $('#Checkbox1, #Checkbox2').on('change', function () {
    console.log();
    if ($('#Checkbox1').is(':checked') && $('#Checkbox2').is(':checked')) {
        $('#circle_2').css('background-color', '#999');
    } else {
        $('#circle_2').css('background-color', 'transparent');
    }
});
});

Также убедитесь, что у вас работает интернет-соединение, потому что библиотека jQuery загружается во время выполнения с сервера. Если у вас нет интернета, ваш код не будет работать.

Поделиться
  • 0
    Спасибо, приятель. оно работает. Я нашел свою ошибку
  • 0
    не говоря уже о том, что это часть обучения ...

Ещё вопросы

Сообщество Overcoder
Наверх
Меню