Подключение javascript ошибки - Не ошибается лишь тот, кто ничего не делает!

I have similar problem.
Below is a code in two files which generates only white empty page,
no errors are reported executing code, what is the problem?

index.html file:

<!DOCTYPE html>
<html>
<head>
    <title>Three.js</title>
    <style type = "text/css">
        html, body {margin: 0; padding: 0; overflow: hidden}
    </style>
</head>
<body>
    <div id = "webgl"></div>
    <script src = "/lib/three.js"></script>
    <script src="./main.js"></script>
</html>

main.js file:

function init() {
    var scene = new THREE.Scene();

    var box = getBox(1, 1, 1);
    var plane = getPlane(4);

    box.position.y = box.geometry.parameters.height/2;
    plane.rotation.x = Math.PI/2;

    scene.add(box);
    scene.add(plane);

    var camera = new THREE.PerspectiveCamera(
        45,
        window.innerWidth/window.innerHeight,
        1,
        1000
    );

    camera.position.x = 1;
    camera.position.y = 2;
    camera.position.z = 5;

    camera.lookAt(new THREE.Vector3(0, 0, 0));

    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.getElementById('webgl').appendChild(renderer.domElement);
    renderer.render(
        scene,
        camera 
    );
}

function getBox(w, h, d) {
    var geometry = new THREE.BoxGeometry(w, h, d);
    var material = new THREE.MeshBasicMaterial({
        color: 0x00ff00
    });
    var mesh = new THREE.Mesh(
        geometry,
        material 
    );

    return mesh;
}

function getPlane(size) {
    var geometry = new THREE.PlaneGeometry(size, size);
    var material = new THREE.MeshBasicMaterial({
        color: 0xff0000,
        side: THREE.DoubleSide
    });
    var mesh = new THREE.Mesh(
        geometry,
        material 
    );

    return mesh;
}

init();

Источник

Тут не просто надо скрипт подключить и всё, а ещё подумать чуть-чуть головой и посмотреть хотя-бы, что в самом js файле написано =) Дальше в html пишем после подключения всех скриптов, еще 1 скрипт на подключение самого эффекта к странице(background), что-то типо того:

<script>
           function run() {
var image = document.getElementById('body');
image.onload = function() {var engine = new RainyDay({image: this,}, document.getElementById('canvas'));engine.rain([ [1, 2, 8000] ]);
 engine.rain([ [3, 3, 0.88], [5, 5, 0.9], [6, 2, 1] ], 100);};
image.crossOrigin = 'anonymous'; image.src = 'http://...';} // тут укажи картинку
</script>

Если не заработает, поработай с css, назначь body background туже картинку, что в скрипте…
Желаю удачи.

Источник

Is it possible to load javascript without jQuery? I spent the better portion of yesterday evening simply trying to create the most basic HTML page with working CSS and Javascript and — despite the numerous methods I have tried — none of them have worked. Here is my basic HTML page:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>title</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js" type="text/javascript"></script>
  </head>
  <body>
    <div>On</div>
    <input type="button" onclick="popup()" value="Click Me!">
  </body>
</html>

This is being hosted locally on XAMPP, the page displays fine and the CSS works fine, the javascript is in the same directory as the html page and works fine when written inline with the HTML. However the js does not work in any of the following scenarios when trying to include it as an externality:

When application/javascript is used above it still doesn’t work. All I receive in either case (in the Firebug script window) is «popup()» and that’s it. Here is the script.js file:

function popup() {
  alert("Hello World")
}

This js also doesn’t work (I tried it even though I’m not parsing XML):

//<![CDATA[
function popup() {
  alert("Hello World")
}
//]]>

nor this:

document.addEventListener('DOMContentReady', function popup() {
  alert("Hello World")
})

nor this:

<script type="text/javascript">
function popup() {
  alert("Hello World")
}
</script>

Not that I really expected it too, but I was getting desperate. If anyone knows what’s going on, I’d appreciate any info.

I’m open to this being an issue with hosting this locally on XAMMP but find it doubtful as CSS and HTML are both flying. However the js works if I include it inline with the HTML(?). If it helps, when Firebug displays popup() in the script window it also shows an @conn1source connection.

UPDATE: according to one of the suggestions in the comments if I only write the following in the js file it works:

alert("Hello World")

however the function does not. So I’m guessing this means that I wrapped the function somehow incorrectly in the js file, but I’m following standard practice as far as I am aware.

Источник

dalay_lama

82 / 82 / 50

Регистрация: 22.09.2012

Сообщений: 495

Не работает подключение внешнего файла

11.06.2013, 09:00. Показов 27986. Ответов 15

Метки нет (Все метки)

Всем доброго времени суток. Вот решил потихоньку начать осваивать JavaScript и тут же «споткнулся». Проблема такая:
при подключении внешнего файла js в html документ, функция, которая описана в файле js не срабатывает, а если функцию внутри прописать, то всё хорошо, вот конкретный пример:

HTML5

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="jsPhpStorm.js"></script>
    <title></title>
</head>
<body>
<script>
    show();
</script>
</body>
</html>

Javascript

function show()
{
    for (var i=0;i<0;i++)
        alert("Hello World!");
}

Вот при таком подходе ничего не происходит, а если сделать так:

HTML5

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
<script>
    for (var i=0;i<3;i++)
        alert("Hello World!");
</script>
</body>
</html>

То всё хорошо. Вопрос: что я делаю не так? Файл js лежит в том-же каталоге что и файл html. Проверил в браузерах firefox и explorer9

32 / 18 / 10

Регистрация: 20.05.2013

Сообщений: 47

11.06.2013, 09:08

Может быть дело в том, что тело цикла for (var i = 0; i < 0; i++), описанного в файле jsPhpStorm.js ни разу не выполнится? А тело цикла for (var i = 0; i < 3; i++), описанного в html выполнится три раза.

82 / 82 / 50

Регистрация: 22.09.2012

Сообщений: 495

11.06.2013, 09:13

[ТС]

извиняюсь, это я здесь опечатался, там на самом деле прописывал i<3

80 / 80 / 53

Регистрация: 22.03.2013

Сообщений: 271

13.06.2013, 19:27

может проблема в пути к файлу

0 / 0 / 0

Регистрация: 02.11.2013

Сообщений: 6

02.11.2013, 13:10

Привет!
Удалось ли решить проблему? Столкнулся с аналогичной и убил безрезультатно несколько дней. На другом форуме, так же как и здесь, никто толком не может ничего сказать.
Буду признателен за подсказку.

vovandr

636 / 523 / 195

Регистрация: 19.08.2013

Сообщений: 1,400

02.11.2013, 13:53

У вас условие прописано криво, попробуйте так:

Javascript

 function show()
{
    for (var i=0;i<1;i++) {
        alert("Hello World!");
    }
}

супермизантроп

3938 / 2976 / 692

Регистрация: 18.04.2012

Сообщений: 8,625

02.11.2013, 14:04

dvigenie, скажу «толком»:

если прописанный в HTML-коде тег <script> находится в заголовке (между <head> и </head>), то js-файл, указанный в атрибуте SRC, обязательно подключится

если вдруг НЕ подключился, то единственной причиной может быть только неверно указанный путь к js-файлу

лишь для иных вариантов — тег <script> не находится в заголовке; тег <script> создаётся динамически и пр. — возможны какие-то ещё причины
——

следует разделять понятия «не подключился» и «не работает»
очень часто всё нормально подключается, но из-за ошибки в скрипте подключенный файл не работает
для проверки первой строкой прописывайте alert (‘Подключён, начинаю работу!’)

отмечу, что самой распространённой ошибкой у неопытных товарищей бывает включение HTML-тегов <script></script> в тело js-файлов

dvigenie

0 / 0 / 0

Регистрация: 02.11.2013

Сообщений: 6

02.11.2013, 15:02

Сообщение от kalabuni

dvigenie, скажу «толком»:

если вдруг НЕ подключился, то единственной причиной может быть только неверно указанный путь к js-файлу

лишь для иных вариантов — тег <script> не находится в заголовке; тег <script> создаётся динамически и пр. — возможны какие-то ещё причины

——

Добавлено через 24 минуты
Так вроде всё сделано как вы говорите.

HTML5

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=windows-1251" />
        <title>Курс по Javascript</title>
        <link href="css/mystyle.css" rel="stylesheet" type="text/css" />
        <script src="js/myscript.js" type="text/javascript"></script>
        <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
    
    </head>

Файл myscript.js находится в папке js и имеет такой вид:

Javascript

$(document).ready(function()  {
    var text = $('#main_h1').text();
    alert(text);
});

Когда в этом файле вместо этой функции прописываю alert(1); — на экран единица выводится. Следовательно путь указан верно. В папке .js уложен файл jquery-1.7.2.min.js с библиотекой. Пробовал и другие версии библиотек, начиная с 1.6.4 и заканчивая 1.10.2. — но результат тот же. Синтаксис функции воде тоже правильный. Но ничего не работает. А прописываю функцию в секцию body — всё сразу работает. Вот такая, блин, фантастическая мне головоломка.

vovandr

636 / 523 / 195

Регистрация: 19.08.2013

Сообщений: 1,400

02.11.2013, 15:45

dvigenie библиотеку jquery поставьте выше в коде :

HTML5

1 2	<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> <script src="js/myscript.js" type="text/javascript"></script>

2435 / 1114 / 312

Регистрация: 23.06.2011

Сообщений: 3,524

02.11.2013, 21:35

dalay_lama, да работает первый вариант из первого поста, нет в нем ошибки, я просто скопировал к себе.
Почему бы не глянуть в консоль лисы, что она там пишет.

в крайнем случае выложить архивом не рабочий вариант

dvigenie

0 / 0 / 0

Регистрация: 02.11.2013

Сообщений: 6

02.11.2013, 22:52

Сообщение от vovandr

dvigenie библиотеку jquery поставьте выше в коде :

HTML5

1 2	<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> <script src="js/myscript.js" type="text/javascript"></script>

Вован, ты — ГЕНИЙ! Никто не мог разобраться с этой загвоздкой. Теперь напишу на другом форуме, что здесь есть такой парень, который эту проблему как орех… А там несколько дней все в ступоре. У себя проверяют — у них работает. А у меня — ни хрена. Хотя ведь тоже вопрос: у них всё равно, в какой последовательности размещены скрипты, а у меня — должны быть только так?
Мой глубочайший РЕСПЕКТ!

636 / 523 / 195

Регистрация: 19.08.2013

Сообщений: 1,400

03.11.2013, 01:52

dvigenie
Библиотеку jquery всегда следует размещать выше файлов использующих её, поэтому скорее всего у них она и стояла выше в коде.

3 / 3 / 1

Регистрация: 10.11.2013

Сообщений: 58

12.12.2014, 13:24

Была таже проблема. Установил права для внешнего js скрипта rwx: заработало.

Lexx19

0 / 0 / 0

Регистрация: 20.06.2014

Сообщений: 32

01.06.2015, 13:38

Было то же самое, но у меня более узкий случай: во внешнем js-файле я использовал ту же обёртку

Javascript

1
2
3

$(function () {
 
});

но внутри использовал обработчик .on(‘click’, …). Внутри html-файла, помещённое в конце (кстати, этот фетиш ещё актуален ?) работало, а во внешнем файле нет. Решить проблему удалось сменой обработчика .on на .live — да знаю, что это моветон, но у меня Jquery версии 1.7, и видимо он с .on ещё не очень хорошо везде работает..

Nikita31033

0 / 0 / 0

Регистрация: 13.08.2018

Сообщений: 1

13.08.2018, 08:58

Проблема заключается в подключении файла, так как он подключен в шапке html внутри <head>, он не видит файлы после, т.к. их не существует для него.Решить можно подключив его в самом конце html-файла перед тегом </html> или просто в подключенном скрипте писать код внутри функции

Java

1	$(document).ready( function() { 'Здесь весь код файла js' });

0 / 0 / 0

Регистрация: 26.12.2018

Сообщений: 3

10.11.2019, 23:02

dalay_lama, Здравствуйте. В 2012 году вы задали вопрос:
Всем доброго времени суток. Вот решил потихоньку начать осваивать JavaScript и тут же «споткнулся». Проблема такая:
при подключении внешнего файла js в html документ, функция, которая описана в файле js не срабатывает, а если функцию внутри прописать, то всё хорошо, вот конкретный пример:
HTML5Выделить код
1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<script src=»jsPhpStorm.js»></script>
<title></title>
</head>
<body>
<script>
show();
</script>
</body>
</html>
JavascriptВыделить код
1
2
3
4
5
function show()
{
for (var i=0;i<0;i++)
alert(«Hello World!»);
}
Вот при таком подходе ничего не происходит, а если сделать так:
HTML5Выделить код
1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title></title>
</head>
<body>
<script>
for (var i=0;i<3;i++)
alert(«Hello World!»);
</script>
</body>
</html>

сообщите, пожалуйста, в чем в итоге была проблема?

Источник

Не работает вроде бы простой скрипт с сайтом, путь указан верно.

HTML — строка подключения

HTML — описание элемента

1) Ещё убрать нежелательный пробел в самом последнем < /div>

2) Четвёртую снизу строку JS переписать так: dn.style.display = «none»;

3) Если строка подключения JS в самом начале всего кода, то переместить её в конец.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками javascript html css или задайте свой вопрос.

Нажимая «Принять все файлы cookie», вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Что пошло не так? Устранение ошибок JavaScript

Когда вы создали игру «Угадай номер» в предыдущей статье, вы, возможно, обнаружили, что она не работает. Не бойтесь — эта статья призвана избавить вас от разрыва волос над такими проблемами, предоставив вам несколько простых советов о том, как найти и исправить ошибки в программах JavaScript.

Типы ошибок

Когда вы делаете что-то не так в коде, есть два основных типа ошибок, с которыми вы столкнётесь:

Синтаксические ошибки: Это орфографические ошибки в коде, которые фактически заставляют программу вообще не запускаться, или перестать работать на полпути — вам также будут предоставлены некоторые сообщения об ошибках. Обычно они подходят для исправления, если вы знакомы с правильными инструментами и знаете, что означают сообщения об ошибках!

Ладно, все не так просто — есть и другие отличия, которые вы поймёте, пока будете изучать язык JavaScript глубже. Однако вышеуказанной классификации достаточно на раннем этапе вашей карьеры. Мы рассмотрим оба эти типа в дальнейшем.

Ошибочный пример

Чтобы начать работу, давайте вернёмся к нашей игре с угадыванием чисел — за исключением того, что мы будем изучать версию с некоторыми преднамеренными ошибками. Перейдите в Github и сделайте себе локальную копию number-game-errors.html (см. здесь как это работает).

Чтобы начать работу, откройте локальную копию внутри вашего любимого текстового редактора и вашего браузера.
Попробуйте сыграть в игру — вы заметите, что когда вы нажимаете кнопку «Submit guess», она не работает!

Примечание: Возможно, у вас может быть собственная версия игрового примера, которая не работает, которую вы можете исправить! Мы по-прежнему хотели бы, чтобы вы работали над статьёй с нашей версией, чтобы вы могли изучать методы, которые мы здесь преподаём. Затем вы можете вернуться и попытаться исправить ваш пример.

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

Исправление синтаксических ошибок

Раньше в курсе мы заставили вас набрать некоторые простые команды JavaScript в консоль разработчика JavaScript (если вы не можете вспомнить, как открыть это в своём браузере, следуйте предыдущей ссылке, чтобы узнать, как это сделать). Что ещё более полезно, так это то, что консоль предоставляет вам сообщения об ошибках всякий раз, когда существует синтаксическая ошибка внутри JavaScript, которая подаётся в механизм JavaScript браузера. Теперь пойдём на охоту.

Перейдите на вкладку, в которой у вас есть number-game-errors.html, и откройте консоль JavaScript. Вы должны увидеть сообщение об ошибке в следующих строках:
Это довольно простая ошибка для отслеживания, и браузер даёт вам несколько полезных бит информации, которые помогут вам (скриншот выше от Firefox, но другие браузеры предоставляют аналогичную информацию). Слева направо, у нас есть:
- Красный «x» означает, что это ошибка.
- Сообщение об ошибке, указывающее, что пошло не так: «TypeError: guessSubmit.addeventListener не является функцией»
- Ссылка «Узнать больше», которая ссылается на страницу MDN, которая объясняет, что эта ошибка означает в огромных количествах деталей.
- Имя файла JavaScript, который ссылается на вкладку «Отладчик» консоли разработчика. Если вы перейдёте по этой ссылке, вы увидите точную строку, где подсвечивается ошибка.
- Номер строки, в которой находится ошибка, и номер символа в этой строке, где первая ошибка. В этом случае у нас есть строка 86, символ номер 3.
Если мы посмотрим на строку 86 в нашем редакторе кода, мы найдём эту строку:

Примечание: См. наш TypeError: «x» не является справочной страницей функций для получения дополнительной информации об этой ошибке.

Синтаксические ошибки: второй раунд

Примечание: console.log() это часто используемая функция отладки, которая выводит значение в консоль. Поэтому она будет выводить значение lowOrHi в консоли, как только мы попытаемся установить его в строке 48.

Сохраните и обновите страницу, и вы увидите, что ошибка исчезла.
Теперь, если вы попробуете ввести значение и нажать кнопку «Submit guess», вы увидите . другую ошибку!
На этот раз сообщается об ошибке: «TypeError: lowOrHi is null», в строке 78.

Примечание: Загляните на справочную страницу TypeError: «x» is (not) «y», чтобы узнать больше об этой ошибке.

Синтаксические ошибки: третий раунд

Теперь, если вы снова попробуете сыграть в игру, вы должны добиться большего успеха — игра должна играть абсолютно нормально, пока вы не закончите игру, либо угадав нужное число, либо потеряв жизни.
На данном этапе игра снова слетает, и выводится такая же ошибка, как и в начале — «TypeError: resetButton.addeventListener is not a function»! Однако, теперь она происходит из-за строки 94.
Посмотрев на строку 94, легко видеть, что здесь сделана такая же ошибка. Нам просто нужно изменить addeventListener на addEventListener .

Логическая ошибка

На этом этапе игра должна проходить отлично, однако, поиграв несколько раз, вы, несомненно заметите, что случайное число, которое вы должны угадать, всегда 0 или 1. Определённо не совсем так, как мы хотим, чтобы игра была разыграна!

Безусловно, где-то в игре есть логическая ошибка — игра не возвращает ошибку, она просто работает неправильно.

Найдём переменную randomNumber , и строку где в первый раз устанавливали случайное число. Пример, в котором мы храним случайное число, которое должны угадать, на строке 44:

Работаем через логику

Чтобы исправить это, давайте рассмотрим как работает строка. Первое, мы вызываем Math.random() , который генерирует случайное десятичное число, между 0 и 1, например 0.5675493843.

Дальше, мы передаём результат вызова Math.random() через Math.floor() , который округляет число вниз, до ближайшего целого числа. Затем мы добавляем 1 к данному результату:

Округление случайного десятичного числа к меньшему, всегда будет возвращать 0, так что добавление к нему единицы будет возвращать всегда 1. Нам нужно умножить случайное число на 100, прежде чем мы округлим его к меньшему. Следующая строка вернёт нам случайное число между 0 и 99:

поэтому нам нужно добавить 1, чтоб нам возвращалось случайное число между 1 и 100:

А теперь, исправьте обе строки с ошибками, затем сохраните и обновите, игра должна работать так, как мы и планировали!

Другие распространённые ошибки

Существуют и другие распространённые ошибки, которые вы обнаружите в своём коде. В этом разделе показано большинство из них.

SyntaxError: отсутствует ; перед постановкой

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

Это вызовет данную ошибку, потому что браузер подумает, что вы пытались сделать что-то другое. Вы должны быть уверены, что вы не перепутали оператор присваивания ( = ), который присваивает значение переменной — с оператором сравнения ( === ), который строго сравнивает операнды, и возвращает true / false .

Примечание: Загляните на справочную страницу Синтаксическая ошибка: пропущен символ ; до объявления инструкции для получения дополнительной информации об этой ошибке.

В программе всегда говорится, что вы выиграли, независимо от того, что вы ввели

Причиной этому является все то же перепутывание оператора присваивания ( = ) со строгим сравнением ( === ). Например, если мы изменим внутри checkGuess() эту строку кода:

мы всегда будем получать true , заставляя программу сообщать, что игра была выиграна. Будьте осторожны!

SyntaxError: отсутствует ) после списка аргументов

Эта ошибка проста — обычно она означает, что вы пропустили закрывающую скобку с конца вызова функции / метода.

Примечание: Загляните на справочную страницу SyntaxError: missing ) after argument list для получения дополнительной информации об этой ошибке.

SyntaxError: missing : after property id

Эта ошибка обычно связана с неправильно сформированным объектом JavaScript, но в этом случае нам удалось получить её, изменив

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

SyntaxError: missing > after function body

Это легко — обычно это означает, что вы пропустили одну из ваших фигурных скобок из функции или условной структуры. Мы получили эту ошибку, удалив одну из закрывающих фигурных скобок возле нижней части функции checkGuess() .

SyntaxError: expected expression, got ‘string‘ or SyntaxError: unterminated string literal

Эти ошибки обычно означает, что вы пропустили открывающую или закрывающую кавычку для строковых значений. В первой ошибки выше, строка будет заменена на неожиданный персонаж (ей) , что браузер нашёл вместо кавычек в начале строки. Вторая ошибка означает , что строка не закончилась кавычки.

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

Примечание : Смотрите наш SyntaxError: Неожиданный токен и SyntaxError: незавершённая строка эталонных страниц для получения более подробной информации об этих ошибках.

Резюме

Итак, мы научились основам выяснения ошибок в простых программах JavaScript. Не всегда так просто разобраться, что не так в вашем коде, но, по крайней мере, это сэкономит вам несколько часов сна и позволит вам продвигаться немного быстрее, когда что-либо заработает не так, как ожидалось, в вашем учебном путешествии.

Код JavaScript не работает ни внутри тега скрипта, ни в коде HTML, ни во внешнем файле JS

Ниже мой HTML-код, и часть javascript в теге не работает. Даже если я вставлю код JavaScript во внешний файл JS — script.js, он не работает. Я попытался написать это отдельно в script.js, как это, но это также не сработало для меня:

Вот HTML-код с кодом JavaScript, написанным в тегах скрипта

4 ответа

Метод document.getElementById() получает элементы только по их id — атрибуту. Поэтому используйте метод document.querySelector() для элементов «.button» и «.close», например:

Вы имеете дело с классом, а не с идентификатором. Вы можете изменить свой «класс» на «id» в своем HTML-коде, и у вас больше не должно быть проблем.

Или вы можете использовать,

В вашем сценарии вместо

Любой из двух вариантов решит вашу проблему

Вы уверены, что путь к файлу js правильный? Во-вторых, вы пытались вставить событие предотвращения по умолчанию, чтобы предотвратить нормальную функцию щелчка? В противном случае вся другая часть вашего кода может быть запущена

Это потому, что вы ошиблись в написании кода JavaScript.

Вы передаете имя класса .button методу getElementById() . Замените его методом querySelector() . Нравится:-

Источник