JavaScript onclick() не работает

Я пытаюсь сделать div, чтобы текст был помещен внутри, когда щелкнул. Но код, который я использую, похоже, не работает в Chrome. Я просто просматриваю html-документ, не размещая его или что-то еще. Кто-нибудь знает причину, почему это происходит?JavaScript onclick() не работает

файл: ///c%3A/Users/Brett/Documents/1_HTML/js_practice/js_practice.html

var bob = document.getElementById("bob"); 
 
bob.onclick = function() { 
 
    bob.innerHTML = "words"; 
 
};

#bob { 
 
    width: 200px; 
 
    height: 200px; 
 
    background-color: black; 
 
    color: white; 
 
}

<body> 
 
    <div id="bob"></div> 
 
</body>

PS Я могу запустить html-документ просто отлично, это код, который является проблемой

источник

2015-08-11 Decapitated Rainbow

Возможный дубликат [Как запустить html с помощью Chrome в режиме --allow-file-access-from-files?] (Http: // stackoverflow.com/questions/18586921/how-to-launch-html-using-chrome-at-allow-file-access-from-files-mode) –

Hi Dec apitated Rainbow,

Я не вижу никаких проблем с этим. Ожидаемый результат - щелкнуть по черному ящику и показать слово с белым шрифтом.

Я использую Google Chrome Версия 44.0.2403.130 м работает отлично

источник

2015-08-11 00:49:44 Nic

Wrap код Javascript внутри события window.onload следующим образом:

window.onload = function() { 
    var bob = document.getElementById("bob"); 
    bob.onclick = function() { 
    bob.innerHTML = "words"; 
    }; 
}

или загрузить JavaScript-файл на конец HTML-файла (как раз перед </body>)

Документация window.onload

в window.onload пожары ш загрузите всю страницу, включая ее содержимое (изображения, css, скрипты и т. д.). Когда вы загружаете свой скрипт до загрузки HTML, он не найдет необходимые элементы на вашей странице. Когда вы загружаете скрипт после загрузки HTML, он найдет все необходимые элементы в вашем HTML (если правильно закодировано).

источник

2015-08-11 00:51:39 Patrick2607

Единственное, о чем я могу думать, заключается в том, что вы запускаете JS до загрузки DOM, чтобы элемент не существовал, это не сработает в JS. Решением этого было бы разместить ваш код в функции window.onload.

источник

2015-08-11 00:51:55 DylanB

Вы можете попробовать JQuery:

$('#bob').click(function(){ 
    $("#bob").html("Changed"); 
});

источник

2015-08-11 00:55:19 aldrin27

Я уже знаю некоторые jquery, я пытаюсь изучить javascript сейчас –

Вам нужно обернуть Javascript внутри функции, привязанной к window.onload событие:

window.onload = function() { 
    // your code here 
};

Это происходит потому, что браузер обрабатывает HTML документы топ -down, поэтому он выполнит ваш Javascript перед загрузкой элемента.

Когда вы связываетесь с событием onload, он будет ожидать загрузки всей страницы перед выполнением кода, поэтому вы можете гарантировать, что ваш элемент обработан браузером.

Причина, по которой он работает в фрагменте вашего вопроса, заключается в том, что механизм фрагмента добавляет Javascript после тега body, а так как страницы отображаются сверху вниз, ваш элемент обрабатывается до того, как мы когда-либо достигнем Javascript.

источник

2015-08-11 00:58:16 Purag

это сработало, и я понимаю, почему, спасибо :) –

JavaScript onclick() не работает

ответ

Смежные вопросы