HTML5 - Events, Handlers and All that Jazz: A Little Interaction) - Getting the song name

Head First HTML5 Programming

開発環境

• macOS Sierra - Apple (OS)
• Emacs (Text Editor)
• Safari(Web browser)

Head First HTML5 Programming (Elisabeth Robson (著)、Eric Freeman (著)、O'Reilly Media)の Chapter 3.(Events, Handlers and All that Jazz: A Little Interaction)、Getting the song name の SHARPEN YOUR PENCIL(No. 1948) を取り組んでみる。

SHARPEN YOUR PENCIL(No. 1948)

コード(Emacs)

HTML5

<input id="songTextInput0" value="Blue Suede Strings, by Elvis Pagely">

<button id="run0">run</button><button id="clear0">clear</button>
<pre id="output0"></pre>

<script src="sample1.js"></script>

JavaScript

let btn0 = document.querySelector('#run0'),
    btn1 = document.querySelector('#clear0'),
    pre0 = document.querySelector('#output0');

let logAlert = (msg) => {
    pre0.textContent += msg + '\n';
    alert(msg);
};
let logPrompt = (msg) => {
    pre0.textContent += msg + '\n';
    return prompt(msg);
};

let handleButtonClick = () => {
    let textInput = document.querySelector('#songTextInput0'),
        songName = textInput.value;

    logAlert(`Adding ${songName}`);
};
btn0.onclick = () => {
    handleButtonClick();
};

btn1.onclick = () => {
    pre0.textContent = '';
};