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

@noname12345 · Регистрация: 01.11.2017

Author24 — интернет-сервис помощи студентам

Хотел сделать обычный кликер и столкнулся с рядом проблем:
Подскажите, как поместить кнопку в центр? И подскажите пожалуйста как решить эту проблему: VM149 external.js:3 Uncaught TypeError: Cannot read property 'addEventListener' of null ?
at

HTML5

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <title>Test</title>
  <link href="D:\Game_Clickr\external.css" rel="stylesheet">
</head>
<body>
    <button id = "clickr">Clickr</button>
    <script src="D:\Game_Clickr\external.js"></script><script src="external.js"></script>
</body>
</html>

CSS

body{
    background: #222123;
}
 
button{
    height: 80px;
    width: 150px;
    background: red;
    font-size: 22px;
    border: 1px solid black;
    border-radius:  10px;
    font-family: Georgia, 'Times New Roman', Times, serif;
    position: absolute;
    top: 50%;
}

Javascript

var ButtonClick = document.getElementById('clickr');
let Click = 0;
 
ButtonClick.addEventListener('onclick', function ()  {
    Click++;
})

@kalabuni · 02.03.2019, 23:51

noname12345, на момент исполнения строки var ButtonClick = document.getElementById('clickr');
браузер ещё ничего не знает о существовании тега <button id = "clickr">Clickr</button>

@amr-now · 03.03.2019, 10:34

noname12345, у Вас две ошибки и два недочета.
- на странице пути к файлам не пишут в стандарте Windows. Нужно писать в стандарте URL.
- buttonClick.addEventListener('click'
- мелкий недочет - имена переменных пишут с маленькой буквы.
- мелкий недочет - не смешивайте синтаксис древней и новой версии JavaScript.
Определитесь - или сайт рассчитан для браузера Палеозойской эры, или для современных браузеров.
index.html

PHP/HTML

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <title>Test</title>
  <link href="external.css" rel="stylesheet">
</head>
<body>
    <button id="clickr">Clickr</button>
    <script src="external.js"></script>
</body>
</html>

external.js

Javascript

var buttonClick = document.getElementById('clickr'),
    click = 0;
 
buttonClick.addEventListener('click', function ()  {
    click++;
    console.log(click);
})

Добавлено через 44 минуты

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

Подскажите, как поместить кнопку в центр?

Простой способ и подходит для старых браузеров - установить absolute и отрицательные margin-left и margin-top, равные половине ширины и высоты.
external.css

CSS

* {
    padding: 0px;
    margin: 0px;
}
body {
    background: #222123;
}
 
button {
    height: 80px;
    width: 150px;
    background: red;
    font-size: 22px;
    border: 1x solid black;
    border-radius:  10px;
    font-family: Georgia, 'Times New Roman', Times, serif;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -75px;
    margin-top: -40px;
}

@kalabuni · 03.03.2019, 11:03

Сообщение от amr-now

мелкий недочет - имена переменных пишут с маленькой буквы.

это кто вам сказал?

@Antiplayer · 03.03.2019, 11:15

kalabuni, есть принятый code style. Имена переменных и функций с маленькой буквы, имена конструкторов с большой. Можете писать как хотите, но 95% людей будут цепляться за этот момент.

@amr-now · 03.03.2019, 11:21

Мистика какая-то.

В стандарте https://drafts.csswg.org/css-ui-3/#box-sizing

box-sizing
Value: content-box | border-box
Initial: content-box

И во всех онлайн-учебниках пишут, что по умолчанию box-sizing: content-box;

Но у <button> в разных браузерах по умолчанию

box-sizing: border-box;

"Я всем расскажу, до чего довёл планету этот фигляр ПЖ!" (С)

@kalabuni · 03.03.2019, 11:55

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

есть принятый code style.

какой именно code style?
и кем именно принятый, неужто лично вами?

к примеру, в, имхо, наиболее авторитетном Google JavaScript Style Guide нет рекомендаций подобного рода

@amr-now · 03.03.2019, 12:00

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

в, имхо, наиболее авторитетном google style javascript

6.2.8 Local variable names
Local variable names are written in lowerCamelCase, except for module-local (top-level) constants, as described above. Constants in function scopes are still named in lowerCamelCase. Note that lowerCamelCase applies even if the variable holds a constructor.

Ну с конструктором они конечно перегнули палку. Приверженцев засовывать класс в переменную ну очень много. Я понимаю, что это извращение. но сам язык поддерживает такую фичу.

@Antiplayer · 03.03.2019, 12:27

kalabuni, я не люблю споры ради споров. Пишите хоть капсом на кириллице.

@kalabuni · 03.03.2019, 12:36

Не по теме:

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

я не люблю споры ради споров

ну да, мы все здесь сегодня собрались, чтобы узнать, что вы любите, а что не любите :)

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,625
	02.03.2019, 23:51	2
	noname12345, на момент исполнения строки var ButtonClick = document.getElementById('clickr'); браузер ещё ничего не знает о существовании тега <button id = "clickr">Clickr</button> 0

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,625
	03.03.2019, 11:03	4
	Сообщение от amr-now мелкий недочет - имена переменных пишут с маленькой буквы. это кто вам сказал? 0

@Antiplayer 129 / 112 / 39 Регистрация: 27.09.2012 Сообщений: 305
	03.03.2019, 11:15	5
	kalabuni, есть принятый code style. Имена переменных и функций с маленькой буквы, имена конструкторов с большой. Можете писать как хотите, но 95% людей будут цепляться за этот момент. 1

@amr-now 6494 / 3905 / 2005 Регистрация: 14.06.2018 Сообщений: 6,781
	03.03.2019, 11:21	6
	Мистика какая-то. В стандарте https://drafts.csswg.org/css-ui-3/#box-sizing box-sizing Value: content-box \| border-box Initial: content-box И во всех онлайн-учебниках пишут, что по умолчанию box-sizing: content-box; Но у `<button>` в разных браузерах по умолчанию `box-sizing: border-box;` "Я всем расскажу, до чего довёл планету этот фигляр ПЖ!" (С) 0

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,625
	03.03.2019, 11:55	7
	Сообщение от Antiplayer есть принятый code style. какой именно code style? и кем именно принятый, неужто лично вами? к примеру, в, имхо, наиболее авторитетном Google JavaScript Style Guide нет рекомендаций подобного рода 0

@amr-now 6494 / 3905 / 2005 Регистрация: 14.06.2018 Сообщений: 6,781
	03.03.2019, 12:00	8
	Сообщение от kalabuni в, имхо, наиболее авторитетном google style javascript 6.2.8 Local variable names Local variable names are written in lowerCamelCase, except for module-local (top-level) constants, as described above. Constants in function scopes are still named in lowerCamelCase. Note that lowerCamelCase applies even if the variable holds a constructor. Ну с конструктором они конечно перегнули палку. Приверженцев засовывать класс в переменную ну очень много. Я понимаю, что это извращение. но сам язык поддерживает такую фичу. 0

@Antiplayer 129 / 112 / 39 Регистрация: 27.09.2012 Сообщений: 305
	03.03.2019, 12:27	9
	kalabuni, я не люблю споры ради споров. Пишите хоть капсом на кириллице. 1

@kalabuni
	03.03.2019, 12:36 Исправление ошибок #10
	Не по теме: Сообщение от Antiplayer я не люблю споры ради споров ну да, мы все здесь сегодня собрались, чтобы узнать, что вы любите, а что не любите :) 0

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

Решение