Почему получение .value полей ввода не работает после его отправки?

У меня есть поле ввода, значение которого я получаю с помощью .value, и оно получит значение в первый раз, но после того, как поле ввода было отправлено один раз, получение его .value больше не работает. Есть ли способ исправить это или альтернативный способ получить значение поля ввода, или я просто делаю что-то не так?

Чтобы воссоздать ошибку, просто запустите приведенный ниже фрагмент кода и введите что-нибудь дважды.

var chatinput = document.getElementById("chatinput");
var body = document.getElementById("body");
var username;
var inp = null;
var message = "";

username = prompt("Enter a username:", "Username");
if (username !== null) {
    inp = username.toLowerCase();
}

while (inp === null || inp === "" || inp == "username" || inp.includes("fuck") || inp.includes("ass") || inp.includes("shit") || inp.includes("*")) {
    username = prompt("That's not an appropriate username...", "Username");
    if (username !== null) {
        inp = username.toLowerCase();
    }
}

function sendchat() {
    message = "[" + username + "]: " + chatinput.value;
    body.innerHTML += "<p class=\"chatbox\">" + message + "</p>";
    chatinput.value = "";
}

addEventListener("keyup", function(event) {
    if (event.keyCode == 13) {
        sendchat();
    }
});

* {
    transition-duration: 0.5s;
    scroll-behavior: smooth;
}

body {
    background-color: black;
}

div {
    width: 100%;
    text-align: justify;
}

h1 {
    font: 8vw courier;
    color: white;
}

h2 {
    font: 7vw courier;
    color: white;
}

h3 {
    font: 6vw courier;
    color: white;
}

h4 {
    font: 5vw courier;
    color: white;
}

h5 {
    font: 4vw courier;
    color: white;
}

h6 {
    font: 3vw courier;
    color: white;
}

p {
    font: 2vw courier;
    color: white;
}

button, input, a {
    text-decoration: none;
    font: 2vw courier;
    color: cyan;
    border: 0.2vw solid cyan;
    border-radius: 1vw;
    background-color: darkblue;
}

a:hover, input:hover, button:hover {
    background-color: blue;
    box-shadow: 0px 0px 2.5vw white;
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset = "utf-8">
        <meta name = "viewport" content = "width=device-width">
        <title>Stuff</title>
        <link href = "/logo.png" rel = "icon">
        <link href = "/style.css" rel = "stylesheet">
    </head>

    <body id = "body">
        <p>Message: <input id = "chatinput"></p>
        <script src = "script.js"></script>
    </body>
</html>

javascript html input

10.04.2019 21:06

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Слушатель заблуждается. Вот способ защитить слушателя, добавив div и добавив новые элементы чата.

var chatinput = document.getElementById("chatinput");
var body = document.getElementById("body");
var username;
var inp = null;
var message = "";

username = prompt("Enter a username:", "Username");
if (username !== null) {
    inp = username.toLowerCase();
}

while (inp === null || inp === "" || inp == "username" || inp.includes("fuck") || inp.includes("ass") || inp.includes("shit") || inp.includes("*")) {
    username = prompt("That's not an appropriate username...", "Username");
    if (username !== null) {
        inp = username.toLowerCase();
    }
}

function sendchat() {

    var objchatAreaElem = document.getElementById("chatArea");

    var newMessageElem = document.createElement('p');

    message = "[" + username + "]: " + chatinput.value;

    newMessageElem.appendChild(document.createTextNode(message));

    objchatAreaElem.appendChild(newMessageElem );

    chatinput.value = "";
}

addEventListener("keyup", function(event) {
    if (event.keyCode == 13) {
        sendchat();
    }
});

* {
    transition-duration: 0.5s;
    scroll-behavior: smooth;
}

body {
    background-color: black;
}

div {
    width: 100%;
    text-align: justify;
}

h1 {
    font: 8vw courier;
    color: white;
}

h2 {
    font: 7vw courier;
    color: white;
}

h3 {
    font: 6vw courier;
    color: white;
}

h4 {
    font: 5vw courier;
    color: white;
}

h5 {
    font: 4vw courier;
    color: white;
}

h6 {
    font: 3vw courier;
    color: white;
}

p {
    font: 2vw courier;
    color: white;
}

button, input, a {
    text-decoration: none;
    font: 2vw courier;
    color: cyan;
    border: 0.2vw solid cyan;
    border-radius: 1vw;
    background-color: darkblue;
}

a:hover, input:hover, button:hover {
    background-color: blue;
    box-shadow: 0px 0px 2.5vw white;
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset = "utf-8">
        <meta name = "viewport" content = "width=device-width">
        <title>Stuff</title>
        <link href = "/logo.png" rel = "icon">
        <link href = "/style.css" rel = "stylesheet">
    </head>

    <body id = "body">
        <p>Message: <input id = "chatinput"></p>
        <div id = "chatArea"></div>
        <script src = "script.js"></script>
    </body>
</html>

10.04.2019 21:28

Другие вопросы по теме

Запустить функцию с нажатием клавиши только один раз?

Оформление флажков на основе CSS

<Span> в правом нижнем углу <div> без "position:absolute"

Он продолжает говорить: «Специальные символы должны быть экранированы: <» Что это значит?

Невозможно связать изображение с HTML в приложении Rails

3 столбца изображений в представлении на рабочем столе, 2 столбца изображений в мобильном представлении

Как проверить изменения с пайпами? Угловая текстовая область

Сделать ширину сайта полной на мобильной платформе

Поле множественного выбора Django не отображается на странице

MapTimeBoston Leaflet Tutorial RatMap Objects

Почему получение .value полей ввода не работает после его отправки?

Ответы 1

Другие вопросы по теме

Похожие вопросы