Почему получение .value поля ввода не работает после отправки? - PullRequest
Новая
       2

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

1 голос
/ 10 апреля 2019

У меня есть поле ввода, значение которого я получаю с помощью .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>

1 Ответ

2 голосов
/ 10 апреля 2019

Слушатель становится тупым.Вот способ защитить слушателя, добавив 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...