JavaScript - Getting to know the DOM - Interacting with Your Web Page(event handler, callback)

Head First JavaScript Programming

開発環境

• macOS Sierra - Apple (OS)
• Emacs (Text Editor)
• JavaScript (プログラミング言語)
• Safari(Web browser)

Head First JavaScript Programming (Eric T. Freeman (著)、Elisabeth Robson (著)、O'Reilly Media)の Chapter 6.(Getting to know the DOM - Interacting with Your Web Page)の SHARPEN YOUR PENCIL(No. 3876)を取り組んでみる。

SHARPEN YOUR PENCIL(No. 3876)

コード(Emacs)

HTML5

<h1>My awesome playlist</h1>
<ul id="playlist">
  <li id="song1"></li>
  <li id="song2"></li>
  <li id="song3"></li>
</ul>
<pre id="output0"></pre>
<button id="run0">run</button>
<button id="clear0">clear</button>

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

JavaScript

let btn0 = document.querySelector('#run0'),
    btn1 = document.querySelector('#clear0'),
    pre0 = document.querySelector('#output0'),
    p = (x) => pre0.textContent += x + '\n';


let addSong = () => {
    let song1 = document.querySelector('#song1'),
        song2 = document.querySelector('#song2'),
        song3 = document.querySelector('#song3'),
        songs = [song1, song2, song3],
        playList = ['Blue Suede Strings, by Elvis Pagely',
                    'Great Objects on Fire, by Jerry JSON Levis',
                    'I Code the Line, by Johnny JavaScript'];
    songs.forEach((song, i) => {
        song.textContent = playList[i];
    });
};


let output = () => {
    addSong();
};
btn0.onclick = output;
btn1.onclick = () => {
    let song1 = document.querySelector('#song1'),
        song2 = document.querySelector('#song2'),
        song3 = document.querySelector('#song3'),
        songs = [song1, song2, song3],
        playList = ['Blue Suede Strings, by Elvis Pagely',
                    'Great Objects on Fire, by Jerry JSON Levis',
                    'I Code the Line, by Johnny JavaScript'];
    songs.forEach((song, i) => {
        song.textContent = '';
    });
};

output();

My awesome playlist