JavaScript - Browser - Handling Events(Tabs, mousemove)

Eloquent JavaScript

開発環境

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

Eloquent JavaScript(Marijn Haverbeke 著、No Starch Press)のPart 2(Browser)、Chapter 14(Handling Events)、Exercises(Tabs)を取り組んでみる。

Exercises(Tabs)

コード(Emacs)

HTML5

<div id="div0"></div>
<script src="sample3.js"></script>

JavaScript

'use strict';

let div = document.querySelector('#div0');

let asTabs = (node) => {
    for (let i = 0; i < 5; i += 1) {
        let span = document.createElement('span');
        let button = document.createElement('button');
        let p = document.createElement('p');
        
        button.innerText = `button${i + 1}`;
        p.innerText = `name${i + 1}`;
        p.style.display = 'none';
        button.addEventListener('click', (event) => {
            p.style.display = 'inline';
        });
        span.appendChild(button);
        span.appendChild(p);
        node.appendChild(span);
    }
};

asTabs(div);