Блог

Главная - Вопросы по программированию - Почему получение полей ввода .value не работает после его отправки?

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

#javascript #html #input

#javascript #HTML #ввод

Вопрос:

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

Прослушиватель забивается. Вот способ защитить слушателя, добавив 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>