JSFiddle - React, Tailwind, and code Playground

by uedatakuya

HTML

<div>
    <span id="error"></span>
</div>
名前：<input id="name"type="text" name="name"/>
<div id="submit-button">
</div>

CSS

#submit-button {
    width: 150px;
    height: 50px;
    background-image: url("http://placehold.jp/150x50.png?text=Submit");
    background-size:150px 50px;
}

#error {
    color: red;
}

JavaScript

var submitButtonElm = document.getElementById('submit-button');
var nameInputElm = document.getElementById('name');
var errorElm = document.getElementById('error');

submitButtonElm.addEventListener('click', function() {
    if (nameInputElm.value === '') {
        error.innerText = '名前を入れて下さい．';
    } else {
        error.innerText = '';
    }
}, false);