DHTML Ya

Problema:Crear una tabla con 10 casillas. Utilizar el método document.getElementsByTagName para obtener un vector con todas las marcas td de la tabla. En un for llamar a la función addEventListener para cada objeto td.

<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Prueba</title>
</head>

<body>
    <table border="1">
        <tr>
            <td>Recuadro 1</td>
            <td>Recuadro 2</td>
            <td>Recuadro 3</td>
            <td>Recuadro 4</td>
            <td>Recuadro 5</td>
            <td>Recuadro 6</td>
            <td>Recuadro 7</td>
            <td>Recuadro 8</td>
            <td>Recuadro 9</td>
            <td>Recuadro 10</td>
        </tr>
    </table>
    <script src="funciones.js"></script>
</body>

</html>

let vec = document.getElementsByTagName('td')
for (let f = 0; f < vec.length; f++) {
    vec[f].addEventListener('mousedown', presionar)
    vec[f].addEventListener('mouseup', soltar)
}

function presionar(e) {
    e.target.style.backgroundColor = '#ffff00'
}

function soltar(e) {
    e.target.style.backgroundColor = '#ffffff'
}

37 - Eventos mousedown ,mouseup (DOM)

Retornar