Есть простые файлы
Index.html и
script.js
Когда я пишу весь код в одном
index.html то все работает и тема страницы меняется:
<!DOCTYPE html>
<head>
<title>MDN</title>
</head>
<body>
<label for="theme">Выберите тему</label>
<select id="theme">
<option value="white">Белая</option>
<option value="black">Черная</option>
</select>
<script>
var select = document.querySelector('select');
var html = document.querySelector('html');
document.body.style.padding = '10px';
function update(bgColor, textColor) {
html.style.backgroundColor = bgColor;
html.style.color = textColor;
}
select.onchange = function() {
( select.value === 'black' ) ? update('black','white') : update('white','black');
}
</script>
<h1>My Site</h1>
</body>
</html>
Но когда отделяю в отдельные файлы то не работает:
index.html<!DOCTYPE html>
<head>
<title>MDN</title>
<script src="script.js"></script>
</head>
<body>
<label for="theme">Выберите тему</label>
<select id="theme">
<option value="white">Белая</option>
<option value="black">Черная</option>
</select>
<h1>My Site</h1>
</body>
</html>
script.jsvar select = document.querySelector('select');
var html = document.querySelector('html');
document.body.style.padding = '10px';
function update(bgColor, textColor) {
html.style.backgroundColor = bgColor;
html.style.color = textColor;
}
select.onchange = function() {
( select.value === 'black' ) ? update('black','white') : update('white','black');
}
