prueba.html 1.25 KB
Newer Older
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript InnerHtml</title>
</head>
<body>
    <ul id="menu">
        <li>Home</li>
        <li>Services</li>
        <input type="button" id="btn">Button</input>
        <div id="message"></div>
    </ul>

    <script>
        let menu = document.getElementById('menu');

        //Create new element id
        let li = document.createElement('li');
        li.textContent = 'About Us';
        //Add it to the ul element
        menu.appendChild(li);

        console.log(menu.innerHTML);

        const btn = document.querySelector("#btn");
        btn.addEventListener('mouseup', (e)=>{
            let msg = document.querySelector('#message');
            switch (e.button){
                case 0:
                    msg.textContent = 'Left mouse button clicked';
                    break;
                case 1:
                    msg.textContent = 'Middle mouse button clicked';
                    break;
                case 2:
                    msg.textContent = 'Right mouse button clicked';
                    break;
                default:
                    msg.textContent = `Unknown mouse button code: ${event.button}`;
            }
        })
    </script>
</body>
</html>