Actividad 1: Botones JavaScript
En esta actividad elaboramos un botón con ayuda de JavaScript que nos permite agregarle una funcionalidad a nuestro botón. En este caso, nuestro botón imprime en pantalla un texto cada vez que lo presionamos.
El código de nuestro archivo boton1.html es:
Al ejecutar este código dentro del navegador nos aparece el siguiete botón:
Al darle clic en el botón nos aparece el siguiente texto abajo de nuestro botón cada vez que le hacemos clic
El código de nuestro archivo boton1.html es:
<html>
<head>
<meta charset="utf-8">
<title>Ejemplo de un botón básico en JavaScript</title>
<script>
document.addEventListener("DOMContentLoaded", function() {
function createParagraph() {
let para = document.createElement('p');
para.textContent = 'Hiciste clic en el botón!';
document.body.appendChild(para);
}
const buttons = document.querySelectorAll('button');
for(let i = 0; i < buttons.length ; i++) {
buttons[i].addEventListener('click', createParagraph);
}
});
</script>
</head>
<body>
<button>Haz clic aquí</button>
</body>
</html>
<head>
<meta charset="utf-8">
<title>Ejemplo de un botón básico en JavaScript</title>
<script>
document.addEventListener("DOMContentLoaded", function() {
function createParagraph() {
let para = document.createElement('p');
para.textContent = 'Hiciste clic en el botón!';
document.body.appendChild(para);
}
const buttons = document.querySelectorAll('button');
for(let i = 0; i < buttons.length ; i++) {
buttons[i].addEventListener('click', createParagraph);
}
});
</script>
</head>
<body>
<button>Haz clic aquí</button>
</body>
</html>
Al ejecutar este código dentro del navegador nos aparece el siguiete botón:
Al darle clic en el botón nos aparece el siguiente texto abajo de nuestro botón cada vez que le hacemos clic
Comentarios
Publicar un comentario