2017年1月11日水曜日

開発環境

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);

0 コメント:

コメントを投稿

Comments on Google+: