базовое предупреждение javascript не работает в редакторе кода Intel XDK

JavaScript можно загрузить до или после HTML, однако то, как это делается, немного отличается в зависимости от того, как вы это делаете.

Например, если вы хотите включить свои файлы JavaScript в head файла HTML, тогда вы должны обернуть код JavaScript либо DOMContentLoaded, либо кодом $(document).ready() jQuery.

Распространенное заблуждение об использовании window.onload не решит проблему неправильной загрузки элементов.

Сеть разработчиков Mozilla сообщает на этой странице:

Событие DOMContentLoaded запускается, когда исходный HTML-документ полностью загружен и проанализирован, не дожидаясь окончания загрузки таблиц стилей, изображений и подфреймов. Совсем другое событие — загрузка — следует использовать только для обнаружения полностью загруженной страницы. Невероятно популярная ошибка — использовать load вместо DOMContentLoaded, так что будьте осторожны.

Эта цитата сама по себе должна доказывать, что на onload не следует полагаться, если вы хотите, чтобы весь DOM загружался должным образом, прежде чем вы начнете манипулировать им. Вместо этого вы должны сделать следующее:

Ванильный

document.addEventListener("DOMContentLoaded", function (e) {
    /** DOM has been fully loaded here, so manipulation can begin. **/
    /** Your code here. **/
});

JQuery

$(document).ready(function () {
    /** DOM has been fully loaded here, so manipulation can begin. **/
    /** Your code here. **/
});

Нажмите эту ссылку, чтобы увидеть разницу между ваниль и jQuery.

Второй способ, которым вы можете загрузить JavaScript, заключается в том, что все теги script находятся внутри тела, но после всего HTML, таким образом, он гарантированно загружается после HTML.

Пример

Попробуйте этот рабочий пример, который я быстро написал.

HTML

Замените содержимое тега body вашего HTML на следующее:

<button id="myJsTest">Click Me!</button>
<div id="clickCounter">Click Count: 0</div>

Замените содержимое вашего JavaScript следующим:

JavaScript

document.addEventListener("DOMContentLoaded", function() {
    var clickCount = 0;

    document.getElementById("myJsTest").addEventListener("click", function() {
        clickCount++;

        document.getElementById("clickCounter").innerText = "Click Count: " + clickCount;
    });
});

Затем используйте вкладку Эмуляция в Intel XDK, чтобы протестировать ее.

Дополнительная информация

Когда я использую Intel XDK и у меня возникает ошибка, я быстро загружаю файл в браузер и проверяю консоль. Это может быть действительно полезным и эффективным способом избавиться от этих надоедливых маленьких ошибок.

Попробуйте использовать window.alert, так как alert определено в объекте window.

Причина, по которой вы видите все эти сообщения об ошибках в окне редактора, заключается в том, что в редактор загружены различные инструменты JSLint/Hint. Они пытаются сохранить вашу честность и сэкономить много времени в отладчике, преследующем потенциальные синтаксические ошибки.

Редактор внутри XDK — это Brackets, он использует стандартные расширения Brackets для предоставления этих инструментов JSLint/Hint. Вы можете загрузить его и запустить отдельно в своей системе и редактировать прямо в нем, вам не нужно использовать редактор внутри XDK (или вы можете использовать любой другой редактор, который вам нравится).

Поскольку инструменты Lint/Hint просматривают только один файл за раз, а ваше приложение обычно распределено по нескольким файлам, они мало что знают о том, что определено в других ваших файлах. Аналогичным образом, этим инструментам подсказки/подсказки необходимо сообщить, что вы используете некоторые стандартные глобальные методы и свойства, которые, как ожидается, будут найдены в браузере (но которые могут отсутствовать в других средах JavaScript, поскольку JavaScript больше не поддерживается). ограничено только средой браузера — на самом деле ваше приложение XDK, также известное как приложение Cordova, работает внутри «веб-просмотра», а не в браузере, но это уже другая история...)

Таким образом, вы должны следовать некоторой стандартной практике настройки ваших директив JSHint/Lint в верхней части ваших файлов JS. Например, это хорошая отправная точка:

/*jslint browser:true, devel:true, white:true, vars:true */
/*global $:false, intel:false */

Подробнее см. в документации JSHint... Проект" на вкладке Проекты для более удобного запуска пустого шаблона (нет реальной разницы между пустым шаблоном и демонстрационным приложением, они имеют идентичную структуру).

Более полное и еще более поучительное приложение см. в примере приложения «Hello, Cordova». Оба эти приложения также можно найти в репозитории Intel XDK GitHub.

Вы добавляете файл js, который находится <script src="js/Test.js"></script> внутри тега header. Таким образом, сначала будет загружен js, и он будет привязывать к нему все события. Но когда js загружен, button id="jsTest" нет, потому что DOM не загружен.

Решения: - Вы можете следовать любому из подходов

Добавьте файлы js после того, как DOM будет готов

<body>
  <button id ="js/Test.js">Test JS</button>
     // other HTML tags
<script src = "js/Test.js></script>
</body>

Используйте window.onload

Событие загрузки возникает в конце процесса загрузки документа.

window.onload = testJsFile(){
  //Your code goes here
}

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

Попробуйте поместить строку вне вашей JS-функции

документ.getElementById(......

внутри вашей html-страницы между

<script>HERE</script>

Если это все еще не работает. Попробуйте добавить атрибут onClick к кнопке следующим образом:

<button id="" onClick="testJsFile()">

Также полезно использовать проверку элементов Google Chrome во время разработки, потому что это даст вам сообщение об ошибке для всех этих вещей.