Форум программистов, компьютерный форум, киберфорум
JavaScript для начинающих
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.88/8: Рейтинг темы: голосов - 8, средняя оценка - 4.88
0 / 0 / 0
Регистрация: 02.05.2018
Сообщений: 12

Не отображается элемент

05.12.2019, 22:49. Показов 1574. Ответов 9
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Суть вкратце: делаю кликер, чтобы залипать на уроках. Все шло гладко до момента создания ежесекундного прибавления, писал js код, сделал html <div> с запуском функции, но этот <div> не отображается. Консоль ругается на ошибку: Uncaught TypeError: Cannot set property 'innerHTML' of null.

p.s. если кто-то предложит нормальный скрипт, который будет ежесекундно прибавлять к score autoadd - расцелую.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!DOCTYPE html>
<html lang="en">
<head>
 
  <link rel="shortcut icon" href="https://sun9-13.userapi.com/c851328/v851328266/18ca09/1T7Vrhvkm8s.jpg" type="image/jpg">
 
<meta charset="UTF-8">
<title> kostyafix.game</title>
</head>
<body background="https://getbg.net/upload/full/www.GetBg.net_Nature___Fields_Landscaped_green_field_110983_.jpg">
<style>
  .cow {
  position: absolute; /* Фиксированное положение */
  right: 100pt; bottom: 100pt; /* Левый нижний угол */
  bottom: 10px; /* Положение от нижнего края */
  right: 830px; /* Положение от правого края */
}
    
   .layer {
    position: absolute; /* Абсолютное позиционирование */
    bottom: -20px; /* Положение от нижнего края */
    right: 200x; /* Положение от правого края */
    line-height: 1px;
   }
   
   .layer1 {
    position: absolute; /* Абсолютное позиционирование */
    bottom: 300px; /* Положение от нижнего края */
    right: 500x; /* Положение от правого края */
    line-height: 1px;
   }
   
   .layer2 {
    position: absolute; /* Абсолютное позиционирование */
    bottom: -30px; /* Положение от нижнего края */
    right: 200x; /* Положение от правого края */
    line-height: 1px;
   }
 
</style>
<h1><b>Молока:</b> <div id="score"></div> </h1>
 
<div class="layer1">
<p><b>Автоматически доется:</b></p><div id="autoadd"></div>
 
 
<div id="#cow"><img src="http://pngimg.com/uploads/cow/cow_PNG50629.png" onClick="addscore()" 
width="340" height="230.6" ></a> </div>
 
<div class="layer">
  <div id="shopclick" onClick="buy_addclick()">
    <p> <strong>Купить дополнительный клик. Цена: <div id="buyclick"><div> <strong> 
</div>
 
<div class="layer2">
  <div id="shoptime" onClick="buy_addtime()">
    <p> <strong>Купить доярку (0,5 литра/сек). Цена: <div id="buytime"><div> <strong> 
</div>
 
<script src="game.script.js"></script>
</script>
</body>
</html>
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
// переменные.
let score = 0; //количество молока на руках
let click = 1; //количество кликов за раз.
let autoadd = 0; //автоматическое прибовление в секунду.
  let litrs = " / литров"; //текст для <div> части
  let secunds = " / секунду"; //текст для <div> части
let buster = 2; //увеличение цены
 
let starttime = false;
let i = 1;
 
let count_addclick = 150; //цена на покупку клика (изменяема)
let count_addtime = 500; //цена на покупку времени (изменяема)
 
//Изначальное отображение
document.getElementById("score").innerHTML = score + litrs; //молоко
document.getElementById("autoadd").innerHTML = autoadd + secunds; //отображение кароче молока в секунду
document.getElementById("buyclick").innerHTML = count_addclick + litrs; // часть магазина
document.getElementById("buytime").innerHTML = count_addtime + litrs; // часть магазина (время)
 
// Функции.
 
function addscore(){
score = score + click;
document.getElementById("score").innerHTML = score + litrs;
}
 
function buy_addclick () {
    if (score < count_addclick) {
        alert ("Увы, у вас не хватает молока для покупки дополнительного клика.");
        return;
    }
  click++;
  score = score - count_addclick;
  document.getElementById("score").innerHTML = score + litrs;
  count_addclick = count_addclick * buster;
  document.getElementById("score").innerHTML = score + litrs;
  document.getElementById("buyclick").innerHTML = count_addclick + litrs;
}
 
//админпанель (special for dev)
function adminpanel (){
    let a = Number(prompt ("установить молока"));
    score = a;
    document.getElementById("score").innerHTML = score + litrs;
}
 
function buy_addtime (){
    if (score < count_addtime) {
        alert ("Увы, у вас не хватает молока для покупки дополнительного клика.");
        return;
    }
  score = score - count_addtime;
  document.getElementById("score").innerHTML = score + litrs;
  
  autoadd = autoadd + 0.5;
  document.getElementById("autoadd").innerHTML = autoadd + secunds;
  
  count_addtime = count_addtime * buster;
  document.getElementById("buytime").innerHTML = count_addtime + litrs;
  
  starttime = true;
}
 
//функция передачи денег ежесекундно
function secondmoney () {
    score = score + autoadd;
}
 
//хрень, которая ежесекундно деньги приносит
if (starttime == true) {
    while (i){
    setTimeout(secondmoney, 1000);
    }
}
0
Лучшие ответы (1)
IT_Exp
Эксперт
34794 / 4073 / 2104
Регистрация: 17.06.2006
Сообщений: 32,602
Блог
05.12.2019, 22:49
Ответы с готовыми решениями:

Не отображается элемент
Я уже что только не перепробовал, кнопка 'закрыть' не отображается. Хотя видно в режиме разработчика в браузере, что она существует, и её...

Не отображается элемент
Доброго времени суток. После нажатия на символ &quot;X&quot; должно появляться подтверждение удаления элемента из таблицы(Do you really want to...

Не отображается элемент
window.onload = function () { &quot;use strict&quot; createResultTable (&quot;resultTable&quot;); } function createResultTable (id) { ...

9
Эксперт JS
 Аватар для DrType
6553 / 3624 / 1075
Регистрация: 07.09.2019
Сообщений: 5,877
Записей в блоге: 1
05.12.2019, 23:44
...В ожидании ответов от специалистов скажу:
сам html небрежно составлен: в строках 47 — 48 тег img не закрыт; в строчках 52, 57 тоже допущены ошибки. Браузер, конечно, может догадаться, что вы имеете в виду, но может и вовсе не отобразить ничего. Это я к тому, что, может быть, сначала HTML подправить, потом уже в JS искать ошибку
1
Эксперт JSЭксперт HTML/CSS
 Аватар для mrtoxas
3827 / 2677 / 1521
Регистрация: 12.07.2015
Сообщений: 6,672
Записей в блоге: 4
06.12.2019, 01:33
Лучший ответ Сообщение было отмечено BoomFX как решение

Решение

Цитата Сообщение от DrType Посмотреть сообщение
тег img не закрыт
И не должен
А вот в строках 52, 57 и кроется вся проблема. Только не в отсутствии закрывающего тега </p>, а в том, что div не может находится в параграфе.
BoomFX, замените div'ы на span'ы
HTML5
1
2
<p><strong>Купить дополнительный клик. Цена: <span id="buyclick"><span><strong>
<p><strong>Купить доярку (0,5 литра/сек). Цена: <span id="buytime"><span><strong>
2
06.12.2019, 01:55

Не по теме:

mrtoxas, да, про img что-то несуразное написал, извиняюсь. Там ещё </a> лишний затесался...
То есть, я всё-таки правильно догадался, что объект null методом getElementById создаётся из-за ошибок в html.
:yahoo:

0
0 / 0 / 0
Регистрация: 02.05.2018
Сообщений: 12
06.12.2019, 10:23  [ТС]
Цитата Сообщение от mrtoxas Посмотреть сообщение
в отсутствии закрывающего тега </p>
Спасибо за помощь, но разве html не закрывает все теги, если их не закрыли? Еще раз спасибо.
0
06.12.2019, 11:02

Не по теме:

BoomFX, хотел сказать: не знаю, каким текстовым редактором Вы пользуетесь при написании кода, но существуют хорошие редакторы с подсветкой синтаксиса, автозакрытием тегов, уведомлениями о синтаксических ошибках. Когда пишешь длинный код, это очень удобно: открыл тег, а программа (не совсем html) сама поставила закрывающий тег. Ускоряет работу, сокращает число ошибок.

0
the hardway first
Эксперт JS
 Аватар для j2FunOnly
2475 / 1847 / 910
Регистрация: 05.06.2015
Сообщений: 3,610
06.12.2019, 11:26
Цитата Сообщение от BoomFX Посмотреть сообщение
но разве html не закрывает все теги, если их не закрыли?
Не все https://html5book.ru/neobyazatelnye-tegi-html5/ но не рекомендуется так писать.
0
0 / 0 / 0
Регистрация: 02.05.2018
Сообщений: 12
06.12.2019, 12:38  [ТС]
Цитата Сообщение от DrType Посмотреть сообщение
существуют хорошие редакторы с подсветкой синтаксиса, автозакрытием тегов, уведомлениями о синтаксических ошибках.
Буду благодарен, если подскажите название такого чуда.
0
Эксперт JS
 Аватар для DrType
6553 / 3624 / 1075
Регистрация: 07.09.2019
Сообщений: 5,877
Записей в блоге: 1
06.12.2019, 12:56
BoomFX, не знаю, какая у Вас ОС (у меня IOS); я для себя установил пару приложений типа easyHTML и HTMLeditor, чтобы быстро проверять коды прямо на устройстве. Если будет под рукой яблочное устройство — попробуйте.
Ничего кроссплатформенного предложить не могу (погуглите), но думаю, что большая часть специализированных html редакторов как раз должна поддерживать перечисленные функции, по крайней мере авторасстановку закрывающих тегов. Иначе работать в них будет практически невозможно: пальцы сломаешь вручную набирать, и слишком много внимания потребуется, чтобы нигде не ошибиться...
1
0 / 0 / 0
Регистрация: 02.05.2018
Сообщений: 12
06.12.2019, 13:21  [ТС]
DrType, спасибо еще раз за помощь, для начала я решил установить себе пару дополнительных плагинов на Notepad++ (использую Windows 10). А именно Preview Html, которая позволяет включить предпросмотр (без понятия как это будет полезно при работе) и TextFX Plugin, который самостоятельно закрывает теги.

В будущем, возможно изменю свой выбор и заменю редактор (или плагины).
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
BasicMan
Эксперт
29316 / 5623 / 2384
Регистрация: 17.02.2009
Сообщений: 30,364
Блог
06.12.2019, 13:21
Помогаю со студенческими работами здесь

Не отображается элемент MainMenu
Я новичок, не судите строго. Создала уже два элемента mainmenu,они отображаются при запуске программы. почему не отображаются последующие?...

Элемент Switch отображается коряво
Возникла проблема: элемент Switch в xml файле на некоторых смартфонах отображается нормально (в выключенном состоянии переключатель...

Не отображается элемент Ribbon (VS Community)
Добрый день! Хочу попробовать создать приложение на WPF с Ribbon. Создаю проект под .NET Framework 4.6.1, однако в Панели элементов...

Не отображается элемент asp:DataList
Не поможете решить проблему. Не хочет отображаться элемент asp:DataList, причем никаких ошибок не высвечивается просто как будто его нет. ...

Не отображается NumericUpDown элемент из Ajax
Перепробовал много вариантов, все возможные гайды, ютюбы и тд... Использую MS VS Express 2013 for WEB. Не могу понять в чём...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
10
Ответ Создать тему
Новые блоги и статьи
Символьное дифференцирование
igorrr37 13.02.2026
/ * Логарифм записывается как: (x-2)log(x^2+2) - означает логарифм (x^2+2) по основанию (x-2). Унарный минус обозначается как ! */ #include <iostream> #include <stack> #include <cctype>. . .
Камера Toupcam IUA500KMA
Eddy_Em 12.02.2026
Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .
И ясному Солнцу
zbw 12.02.2026
И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.
«Знание-Сила»
zbw 12.02.2026
«Знание-Сила» «Время-Деньги» «Деньги -Пуля»
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров
8Observer8 12.02.2026
Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .
SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image)
8Observer8 11.02.2026
Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .
SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image
8Observer8 10.02.2026
Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .
Установка Qt-версии Lazarus IDE в Debian Trixie Xfce
volvo 10.02.2026
В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru