@LICVIDE

Почему не работает код?

Это простенький чат, по идеи в поле слева ты вводишь сообщение, а справа оно повторяется.
window.onload = function(){
    document.getElementById("btn").onclick = function () {
    var message = document.getElementById('mes');
var chat = document.getElementById('chat');
document.getElementById('mes').innerHTML = ' ';
}
}

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="script.js" charset="utf-8"></script>
    <title>Document</title>
</head>
<body>
<input type="text" id="mes" placeholder="Введите сообщение">
<style>
    input[type=text]{
        width: 450px;
        height: 300px;
    }
    #chat{
        float: right;
        width: 500px;
        height: 500px;
    }
</style>
<input type="button" id="btn" value="Отправить">
<div id="chat">

</div>
</body>
</html>
  • Вопрос задан
  • 242 просмотра
Пригласить эксперта
Ответы на вопрос 3
EreminD
@EreminD
Кое-что умею
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="script.js" charset="utf-8"></script>
    <title>Document</title>
    <style>
        input[type=text]{
            width: 450px;
            height: 300px;
        }
        #chat{
            float: right;
            width: 500px;
            height: 500px;
        }
    </style>






    <script>
    window.onload = function(){
<!--запомнили первое окно-->
     var message = document.getElementById('mes');
<!--запомнили второе окно-->
     var chat = document.getElementById('chat');
<!--если кто нажал на кнопку-->
     document.getElementById("btn").onclick = function () {
        <!--во второе окно вписываем значение инпута-->
        chat.innerText = message.value;
       <!--чистим инпут--> 
       message.value = "";
       }
    }
    </script>






</head>
<body>
<input type="text" id="mes" placeholder="Введите сообщение">
<input type="button" id="btn" value="Отправить">
<div id="chat">
</div>
</body>
</html>
Ответ написан
Комментировать
Falseclock
@Falseclock
решаю нестандартные задачи
document.getElementById('mes').innerHTML += chat.value;


getElementById - плохая идея, так как не все браузеры правильно ищут поля.

есть Prototype.js, который решает эту проблему. Он подходит тем, кто шарит в JS и любит писать как бы нативно и хардкорно.
есть jQuery - тоже самое, только "ванильная" библиотека, которая подходит тем, что мало соображает в JS и предпочитает подключать готовые модули.
Ответ написан
Krasnodar_etc
@Krasnodar_etc
avito front
Я не понял, зачем тебе переменные, если ими не пользоваться))

window.onload = function(){
    document.getElementById("btn").onclick = function () {
        var message = document.getElementById('mes').val();
        var chat = document.getElementById('chat');
        chat.innerHTML = message; //если не сработает, то вместо message - ' + message+ ' , (кавычки тоже писать). Должно помочь
      message.innerHTML += '';
    }
}


UPD: Это если я правильно понял. Скрипт из твоего вопроса тупо добавляет пробелы в инпут message
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы