При нажатии на кнопку не сдвигаться картинка влево

Question

При нажатии на кнопку должно сдвигаться картинка влево, но ничего не происходит. В чём ошибка?

document.getElementById('slider-left').onclick = turn();
function turn() {
  var line = document.getElementById("line");
  line.style.left = -128 + "px";
}

#slider {
  width: 384px;
  height: 128px;
  border: 5px solid #000;
  margin: 50px auto;
}

#line {
  background-color: red;
  width: 896px;
  position: relative;
}

#line img {
  float: left;
}

#line::after {
  content: "";
  display: block;
  clear: both;
}

<div id="slider">
  <div id="line">
    <img src="img/die.png" alt="1">
    <img src="img/happy.png" alt="2">
    <img src="img/lol.png" alt="3">
    <img src="img/sleep.png" alt="4">
    <img src="img/smile.png" alt="5">
  </div>
</div>

<button id="slider-left">Turn left</button>

Возможный дубликат вопроса: Как куда-нибудь передать функцию // почему событие вызывается сразу же? — , Nov 16 '19 at 12:26

useruser · Answer 1 · 2017-06-17T19:18:38.910

При назначении функции не нужно ее вызывать.

Замените document.getElementById('slider-left').onclick=turn();
на document.getElementById('slider-left').onclick=turn;

С вызовом функции присваивается то, что она возвращает, а т.к. в ней нет return ваш код равен этому:
document.getElementById('slider-left').onclick=undefined;

Также, нужно дождаться загрузки DOM'а, чтобы #slider-left был доступен.

Рабочий код: (на jQuery DOMContentLoaded вызываться не будет)

document.addEventListener('DOMContentLoaded', function () {
    document.getElementById('slider-left').onclick=turn;
}

function turn(){
    var line = document.getElementById("line");
    line.style.left = -128 + "px";
}

Всё равно выдаёт ошибку Uncaught TypeError: Cannot set property 'onclick' of null at script.js:1 — Denis Shestopalov, Jun 17 '17 at 18:19

score 1 · Answer 2 · answered Jun 17 '17 at 18:27

Если вы только начинаете работать с событиями – обратите внимание на следующие особенности.

Функция должна быть присвоена как turn, а не turn().

element.onclick = turn;

Если добавить скобки, то turn() – будет уже результат выполнения функции (а так как в ней нет return, то в onclick попадёт undefined). Нам же нужна именно функция.

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

…А вот в разметке как раз скобки нужны:

<input type="button" id="slider-left" onclick="turn()" />

Это различие просто объяснить. При создании обработчика браузером из атрибута, он автоматически создает функцию из его содержимого. Поэтому последний пример – фактически то же самое, что:

element.onclick = function() { turn(); // содержимое атрибута };

А почему тогда, когда я повешал в html событие onclick функция сработала, а когда в jsе это сделал, то не сработало, хотя я копировал уже правильный код? — Denis Shestopalov, Jun 17 '17 at 18:32
Поместите Ваш js код сюда: document.addEventListener("DOMContentLoaded", function() { ваш код}); Таким образом Ваш js код сперва дождётся формирования DOM дерева, а потом выполнится. Иначе ему ещё не будут доступны элементы 'slider-left' и 'line'. — Олег Олегович, Jun 17 '17 at 18:54

score -1 · Answer 3 · answered Jun 17 '17 at 19:05

Можно сделать так

document.getElementById('slider-left').onclick = function turn(){
 document.getElementById('line').style.left = -128+'px';
}

#slider{
 width: 384px;
 height: 128px;
 border: 5px solid #000;
 margin: 50px auto;
}
#line{
 background-color: red;
 width: 896px;
 position: relative;
}
#line img{
float: left;
}
#line::after{
 content: "";
 display: block;
 clear: both;
}

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <script src="script.js"></script>
 <link rel="stylesheet" href="style.css">
</head>
<body>
 <div id="slider">
  <div id="line">
   <img src="img/die.png" alt="1">
   <img src="img/happy.png" alt="2">
   <img src="img/lol.png" alt="3">
   <img src="img/sleep.png" alt="4">
   <img src="img/smile.png" alt="5">
  </div>
 </div>

 <button id="slider-left">Turn left</button>
</body>
</html>

При нажатии на кнопку не сдвигаться картинка влево

3 Answers3