What happens with "mode-edit" and "mode-blockly" assigned to the same class?, HTML, CSS, JS |
What happens with "mode-edit" and "mode-blockly" assigned to the same class?, HTML, CSS, JS |
bhs67 |
May 7 2024, 10:20 AM
Post
#1
|
Group: Members Posts: 6 Joined: 17-April 24 Member No.: 29,168 |
The following code is posted on a Blockly website.
CSS: CODE h1 { width: 400px; position: relative; margin: 0 auto; color: #fff; font-size: 1.8em; line-height: 2.4em; } .mode-maker, .mode-edit, .mode-blockly { display: none; } [mode="maker"] .mode-maker, [mode="edit"] .mode-edit, [mode="blockly"] .mode-blockly { display: block; } HTML CODE <body> <header class="mdl-color--cyan-500"> <h1 class="mode-maker">Music Maker</h1> <h1 class="mode-edit mode-blockly">Music Maker Configuration</h1> </header> <main> <button class="mode-maker mdl-button" id="edit">Edit</button> <button class="mode-edit mdl-button mdl-js-button" id="done">Done</button> <p class="hint mode-edit">Tap any button to edit its code. <br/>When complete, press Done.</p> <button class="mode-blockly mdl-button mdl-js-button" id="save">Save</button> ... </main> JS CODE document.querySelector('#edit').addEventListener('click', enableEditMode); document.querySelector('#done').addEventListener('click', enableMakerMode); document.querySelector('#save').addEventListener('click', handleSave); enableMakerMode(); function enableMakerMode() { document.body.setAttribute('mode', 'maker'); document.querySelectorAll('.button').forEach(btn => { btn.addEventListener('click', handlePlay); btn.removeEventListener('click', enableBlocklyMode); }); } --- 1) It appears that [mode="maker"] is assigned to the ".mode-maker" Class selector. The HTML code uses "mode-maker". The JS code uses 'maker'. Wondering the reason for the two names? --- 2) The JS code CODE document.querySelector('#edit').addEventListener('click', enableEditMode); jumps to CODE function enableMakerMode() { document.body.setAttribute('mode', 'maker'); document.querySelectorAll('.button').forEach(btn => { btn.addEventListener('click', handlePlay); btn.removeEventListener('click', enableBlocklyMode); }); } with a left mouse click. I'm wondering what triggers CODE enableMakerMode(); ? --- 3) The HTML <body> contains CODE <h1 class="mode-edit mode-blockly">Music Maker Configuration</h1> What happens with "mode-edit" and "mode-blockly" assigned to the same class? |
Lo-Fi Version | Time is now: 29th May 2024 - 04:11 PM |