не работают js скрипты

Question

Привет всем! Помогите с js. Написал пару функций на скрипте

'use strict';
function main() {
     alert("This!")
}

read.onclick = function() {
	window.open('http://google.com');
};

pade.onclick = function() {
	this.style.backgroundColor = 'red';
};

Сначала кодил в онлайн редакторах кода, где все работало просто отлично. После я связал с html и перенес код на локальный сайт:

<head>
  <style>
    #pade {
            transition-property: background-color;
            transition-duration: 2s;
        }
  </style>
</head>
<body>
<button id="read">Follow</button>
<button id="pade">No more</button>
<.body>

После чего ни один код не работал, вставлял код в и в файл app.js. В консолях хрома и фаерфокса пишет ошибки:

Answer 1

Браузер берет все элементы, у которых есть id и создает одноименные глобальные переменные, которые доступны в коде, когда не включен строгий режим. Эту фишку можно использовать, если нужно быстро тестить фрагмент кода, но не нужно включать в реальный код, потому что могут быть сюрпризы:

box.textContent = "Работает!";

(function() {
  let box = document.createElement('div');
  
  /* ... много-много кода... */

  /* Вы уже давно забыли про объявленный box */
  (function() {
    box.textContent = "Оппа, текст попал не туда, куда планировалось"; // (*1)
  })();
})();

<div id="box"></div>

(*1) Интерпретатор JS натыкается на переменную box и ищет её внутри текущей функции. Её там нет → идет проверять родительскую "скобку" / функцию. Находит там объявленный let box и работает с ним. Уже не доходит до глобального box.

Такое редко может случиться, но всё равно должно стать привычкой: всегда и везде объявлять переменные и получать элементы по id:

let box = "test";

(function() {  
  let box = document.getElementById('box');
  box.textContent = "Ура! Нет ошибки.";
})();

<div id="box"></div>

А режим "use strict"; просто помогает вылавливать такие ошибки на начальном этапе, выдавая ошибку из-за любой необъявленной переменной.

Ваш пример:

"use strict";

function main() { // Вы здесь просто ОБЪЯВИЛИ функцию.
  alert("This!");
}

main(); // А это её вызов, через () скобки

document.getElementById('read').onclick = function() {
  console.log('http://google.com');
};

id('pade').onclick = function() {
  this.style.backgroundColor = 'red';
};

/***/

function id(str) {
  // Если лень каждый раз писать getEleляляля, можно сделать такую функцию
  return document.getElementById(str);
}

#pade {
  transition-property: background-color;
  transition-duration: 2s;
}

<button id="read">Follow</button>
<button id="pade">No more</button>

БЛОГ НА HUSL

не работают js скрипты

Ответы (1 шт):