marquez.juan/clase-9-eventos
1
0
Fork 16
Code Issues Pull Requests 10 Projects Releases Wiki Activity

WIPej9 #7

Open
arteche.mateo wants to merge 4 commits from arteche.mateo/clase-9-eventoskkkkk:arteche-mateo-rama into main
pull from: arteche.mateo/clase-9-eventoskkkkk:arteche-mateo-rama
merge into: marquez.juan:main
Conversation 0 Commits 4 Files Changed 2 +40 -4
2 changed files with 40 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
clase-9.js
View File

@@ -1 +1,29 @@
// Agregar acá el código javascript para los ejercicios const botonf = document.getElementById("boton1");
const parrafob = document.getElementById("parrafo1");
let contador = 0;
botonf.addEventListener("click", () => {
contador++;
parrafob.textContent = "Boton clickeado " + contador + " veces";
}) // Ejercicio 1
const textoCaracter = document.getElementById("text");
const parrafoCaracter = document.getElementById("carac0");
textoCaracter.addEventListener("input", () => {
parrafoCaracter.textContent = "Cantidad de caracteres: " + textoCaracter.value.length
}) // Ejercicio 2
const listaEvent = document.getElementById("itemListas");
listaEvent.addEventListener("click",(e) => {
if (e.target.tagName == "LI") {
console.log(e.target.textContent);
}
})

14
index.html
View File

@@ -9,15 +9,23 @@
<body> <body>
<h1>Clase 9 - Eventos</h1> <h1>Clase 9 - Eventos</h1>
<div id="ejercicio-1"> <div id="ejercicio-1">
<!-- Agregar acá el código HTML que haga falta para el ejercicio 1 --> <button id="boton1">Boton</button>
<p id="parrafo1">Boton clickeado 0 veces</p>
</div> </div>
<hr> <hr>
<div id="ejercicio-2"> <div id="ejercicio-2">
<!-- Agregar acá el código HTML que haga falta para el ejercicio 2 --> <input type="texto" id="text">
<p id="carac0">Cantidad de caracteres: 0</p>
</div> </div>
<hr> <hr>
<div id="ejercicio-3"> <div id="ejercicio-3">
<!-- Agregar acá el código HTML que haga falta para el ejercicio 3 --> <ul id="itemListas">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</div> </div>
<hr> <hr>
<div id="ejercicio-4"> <div id="ejercicio-4">