Не создаётся элемент

@Aleks00231 · Регистрация: 05.02.2019

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

Здравствуйте, подскажите почему не создаётся элемент, вроде всё правильно

Вот JavaScript код:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
    let form = document.getElementById('form');
    let hrForm = document.getElementById('hr');
 
    btnSendNickname.addEventListener('click', function () {
        let nickname = document.getElementById("inputNickname").value;
 
        if (nickname !== "" && nickname.search(/\s+/i) !== -1) {
            let errorNickname = document.createElement('div');
            errorNickname.innerHTML = "Нельзя использовать пробелы";
            form.insertBefore(errorNickname, hrForm);
            errorNickname.classList.add('alert');
            errorNickname.classList.add('alert-danger');
            console.log("true")
        }
    })

Вот HTML:

HTML5
1
2
3
4
5
6
7
8
9
10
11
<div id="fullScreenSize" class="nickname">
        <div class="card">
            <div id="form" class="card-body">
                <h4>Введите ваш никнейм:</h4>
                <input id="inputNickname" class="form-control form-control-lg" type="text" placeholder="Ваш никнейм">
                <hr id="hr" class="my-3">
                <button type="button" class="btn btn-danger "><a href="./index.html">Выйти</a></button>
                <submit class="btn btn-primary btnSendNickname">Продолжить</button>
            </div>
        </div>
    </div>

@mrtoxas · 08.03.2019, 21:56

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

не создаётся

Создается

@Mr_Sergo · 09.03.2019, 01:58

Aleks00231,

JavaScript
1
btnSendNickname.addEventListener('click', function () {

btnSendNickname не объявлена, соответственно куда вешается клик не понятно

#####################################

HTML5
1
<submit class="btn btn-primary btnSendNickname">Продолжить</button>

Работает конечно... но наверное так будет правильней?

HTML5
1
<button class="btn btn-primary btnSendNickname">Продолжить</button>

#####################################

Итог:

PHP/HTML
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
<div id="fullScreenSize" class="nickname">
    <div class="card">
        <div id="form" class="card-body">
            <h4>Введите ваш никнейм:</h4>
            <input id="inputNickname" class="form-control form-control-lg" type="text" placeholder="Ваш никнейм">
            <hr id="hr" class="my-3">
            <button type="button" class="btn btn-danger "><a href="./index.html">Выйти</a></button>
            <button class="btn btn-primary btnSendNickname">Продолжить</button>
        </div>
    </div>
</div>
 
<script>
        let form = document.getElementById('form');
        let hrForm = document.getElementById('hr');
 
    document.querySelector('.btnSendNickname').addEventListener('click', function () {
        let nickname = document.getElementById("inputNickname").value;
 
        if (nickname !== "" && nickname.search(/\s+/i) !== -1) {
            let errorNickname = document.createElement('div');
            errorNickname.innerHTML = "Нельзя использовать пробелы";
            form.insertBefore(errorNickname, hrForm);
            errorNickname.classList.add('alert');
            errorNickname.classList.add('alert-danger');
            console.log("true")
        }
    })
</script>

@mrtoxas · 09.03.2019, 02:17

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

btnSendNickname не объявлена, соответственно куда вешается клик не понятно

Почему не понятно? Вешать на что-то с id="btnSendNickname".

@Mr_Sergo · 09.03.2019, 05:06

mrtoxas,
только и остается... на что-то

Новые блоги и статьи Все статьи Все блоги /
Оптимизация кода на разграничение прав доступа к элементам формы Maks 13.04.2026 Алгоритм из решения ниже реализован на нетиповом документе, разработанного в конфигурации КА2. Задачи, как таковой, поставлено не было, проделанное ниже исключительно моя инициатива. Было так:. . .	Контроль заполнения и очистка дат в зависимости от значения перечислений Maks 12.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .	Архитектура слоя интернета для сервера-слоя. Hrethgir 11.04.2026 В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .	Подстановка значения реквизита справочника в табличную часть документа Maks 10.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .
Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .	модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .	Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка. Hrethgir 08.04.2026 Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .

@Mr_Sergo 2037 / 1096 / 409 Регистрация: 29.04.2016 Сообщений: 2,625
	09.03.2019, 05:06
	mrtoxas, только и остается... на что-то 0

Не создаётся элемент

Решение