JSFiddle - React, Tailwind, and code Playground

by Ilia Lesnykh

HTML

<form>
    <input type="text" id="myInputField" value="" />
    <button onclick="myFunction(); return false;">Do the output</button>
</form>

<div id="myOutputArea"></div>

CSS

#myOutputArea {
    border: 1px dashed #ccc;
    margin: 10px auto;
    width: 300px;
    padding: 5px;
    font-family: monospace;
}

JavaScript

// создаем глобальные переменные для доступа к кнопке и полю
// глобальные переменные нужны чтобы внутри функции каждый раз не получать на них ссылку
var output = document.getElementById('myOutputArea');
var field = document.getElementById('myInputField');

function myFunction() {
    // добавляем в конец содержимого блока вывода значение, введенное в поле
    output.innerHTML += field.value;
    // выводим разделительную черту, так понятнее
    output.innerHTML += '<hr />';
    // очищаем введенное значение в поле
    field.value = '';
    // и передаем в него фокус для быстрого повторного ввода
    field.focus();
}