開発環境
- 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);
0 コメント:
コメントを投稿