Loading…
En unos segundos, estará listo.
- Teoría
- Teoría
Añadimos el manejador con un bucle
Usamos el bucle for of para mostrar en la consola todos los elementos de la colección. Del mismo modo, se puede añadir un manejador de clic a todos los botones. En cada iteración, el bucle tomará el siguiente botón y le añadirá el manejador. Así, el script será universal y servirá para cualquier cantidad de botones.
Por ejemplo:
let elements = document.querySelectorAll('p');
for (let element of elements) {
// Añadimos el manejador a cada elemento por turno
element.onclick = function () {
console.log('¡Hiciste clic en el párrafo!');
};
}Después de ejecutar el bucle, todos los párrafos de la colección elements tendrán manejadores.
El manejador que muestra las ayudas en el sitio de noticias ya está escrito. Vamos a moverlo dentro del bucle y a reemplazar el acceso por índice por la variable tooltipButton que usamos en el bucle.
// Antes:
tooltipButtons[0].onclick = function () {
...
};
// Después:
for (let tooltipButton of tooltipButtons) {
tooltipButton.onclick = function () {
...
};
}
Después de eso, el manejador separado para el segundo botón ya no hará falta. Vamos a eliminarlo y a comprobar que el popup aparece al hacer clic en cada botón.
Todos los archivos
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="setting.css">
<link rel="stylesheet" href="style.css">
<title>FlashNews!</title>
</head>
<body class="page light-theme">
<header class="page-header">
<div class="container">
<span class="header-logo">
<img src="img/main-logo.svg" width="67" height="29" alt="Logotipo del portal FlashNews!">
</span>
<button class="theme-button" type="button">Cambiar tema</button>
</div>
</header>
<main class="inner-news">
<div class="tooltip">
<span class="tooltip-text"></span>
<button class="button close-button" type="button"><span>Cerrar</span></button>
</div>
<article class="container">
<h1 class="inner-heading">Amplia tu realidad</h1>
<div class="news-full">
<img src="img/ar.jpg" alt="Persona con gafas de realidad virtual">
<div class="news-stats">
<button class="heart" type="button"><span class="likes-number">297</span></button>
<time datetime="2020-02-18">18 de febrero de 2020</time>
</div>
<p>La redacción de FlashNews! preparó un regalo para sus suscriptores: la aplicación de <button class="tooltip-button" type="button" data-tooltip-text="es como tener a Pokémon en la sala de tu casa">realidad aumentada</button>, con la que podrán acariciar a <button class="tooltip-button" type="button" data-tooltip-text="algo a medio camino entre un cerdo y un jerbo">un cerdo hormiguero</button>, cultivar <button class="tooltip-button" type="button" data-tooltip-text="ni yo lo sé; pregúntale a Google">una pitahaya</button> o hablar con <button class="tooltip-button" type="button" data-tooltip-text="disponible solo para quienes tienen una suscripción anual">Cupcake</button>.</p>
</div>
</article>
<section class="comment-feed container">
<h2>Comentarios</h2>
<ol class="comment-list">
<li class="user-comment">¡Lo quiero!</li>
<li class="user-comment">Lo probé: ¡está increíble!</li>
<li class="user-comment">Si te pones un gorro de papel aluminio, la aplicación deja de funcionar. Me doy de baja.</li>
</ol>
<form action="https://codigoheroe.com/courses" method="post" class="comment-form">
<div class="comment-inner">
<label class="comment-label" for="comment-textarea">Tu comentario</label>
<textarea class="comment-field comment-area" rows="3" placeholder="Comentario" required id="comment-textarea"></textarea>
</div>
<button class="button submit-button" type="submit">Enviar</button>
</form>
</section>
</main>
<footer class="page-footer">
<div class="container">
<p>© FlashNews!</p>
<span class="footer-logo">
<img src="img/white-logo.svg" alt="Logotipo del portal FlashNews!">
</span>
</div>
</footer>
<script src="themes.js"></script>
<script src="likes.js"></script>
<script src="comments.js"></script>
<script src="tooltip.js"></script>
</body>
</html>
/* Estilos del texto del botón */
.tooltip-button {
cursor: pointer;
position: relative;
padding: 1px 8px;
border: none;
color: inherit;
font: inherit;
}
.tooltip-button::after {
position: absolute;
content: "";
top: 0;
right: 0;
width: 0;
height: 0;
border: 4px solid;
border-left-color: transparent;
border-bottom-color: transparent;
}
/* Estilos del tooltip */
@keyframes tooltip-opener {
0% {
transform: translate(50%) scaleX(0);
}
100% {
transform: translate(100%) scaleX(100%);
}
}
.tooltip {
z-index: 2;
display: none;
flex-direction: row-reverse;
position: fixed;
max-width: 256px;
right: 0;
top: 160px;
border-radius: 8px 0 0 8px;
}
.opened {
display: flex;
animation: tooltip-opener 150ms;
}
.tooltip-text {
display: flex;
align-items: center;
padding: 10px;
}
.close-button {
min-height: 64px;
display: flex;
justify-content: center;
align-items: center;
width: 30px;
margin: 0;
padding: 0;
border-radius: 8px 0 0 8px;
}
.close-button span {
display: inline-block;
vertical-align: middle;
transform: rotate(-90deg);
}
/* Estilos del bloque de entrada de comentarios */
.comment-area {
height: unset;
resize: none;
margin-bottom: 10px;
padding-top: 4px;
padding-bottom: 4px;
line-height: 24px;
}
.text-counter {
display: inline-block;
vertical-align: baseline;
padding: 7px 0;
margin-right: auto;
}
.comment-form.warning .comment-label {
color: #f05b29;
}
.comment-form.warning .comment-area {
color: #f05b29;
border-color: #f05b29;
}
.comment-form.warning .comment-area:focus {
outline-color: #f05b29;
}
.comment-form.warning .char-counter {
color: #f05b29;
font-weight: bold;
}
.submit-button:disabled {
opacity: 0.25;
}
/* Temas de color */
.light-theme .tooltip {
background-color: #ffffff;
box-shadow: 0 0 16px rgba(0, 0, 0, 0.5);
}
.light-theme .tooltip-button {
background-color: #f2f2f2;
}
.light-theme .tooltip-button:focus,
.light-theme .tooltip-button:hover {
background-color: #6653d9;
color: #ffffff;
outline-color: #b6aaff;
}
.tooltip-button:active {
opacity: 0.6;
}
.light-theme .tooltip-button::after {
border-right-color: #6653d9;
border-top-color: #6653d9;
}
.dark-theme .tooltip {
background-color: #2a2930;
box-shadow: 0 0 16px rgba(0, 0, 0, 1);
}
.dark-theme .tooltip-button {
background-color: #0a0910;
}
.dark-theme .tooltip-button:focus,
.dark-theme .tooltip-button:hover {
outline-color: #6653d9;
background-color: #b6aaff;
color: #17161a;
}
.dark-theme .tooltip-button::after {
border-right-color: #b6aaff;
border-top-color: #b6aaff;
}
let tooltip = document.querySelector('.tooltip');
let closeButton = document.querySelector('.close-button');
let tooltipButtons = document.querySelectorAll('.tooltip-button');
let tooltipText = document.querySelector('.tooltip-text');
tooltipButtons[0].onclick = function () {
tooltipText.textContent = tooltipButtons[0].dataset.tooltipText;
tooltip.classList.add('opened');
};
tooltipButtons[1].onclick = function () {
tooltipText.textContent = tooltipButtons[1].dataset.tooltipText;
tooltip.classList.add('opened');
};
closeButton.onclick = function () {
tooltip.classList.remove('opened');
};
for (let tooltipButton of tooltipButtons) {
console.log(tooltipButton);
}
let commentForm = document.querySelector('.comment-form');
let commentList = document.querySelector('.comment-list');
let commentField = document.querySelector('.comment-field');
commentForm.onsubmit = function (evt) {
evt.preventDefault();
let newComment = document.createElement('li');
newComment.classList.add('user-comment');
newComment.textContent = commentField.value;
commentField.value = '';
commentList.append(newComment);
};
let page = document.querySelector('.page');
let themeButton = document.querySelector('.theme-button');
themeButton.onclick = function () {
page.classList.toggle('light-theme');
page.classList.toggle('dark-theme');
};
let heart = document.querySelector('.heart');
let likesNumber = document.querySelector('.likes-number');
heart.onclick = function () {
if (heart.classList.contains('added')) {
likesNumber.textContent--;
} else {
likesNumber.textContent++;
}
heart.classList.toggle('added');
};
El código ha cambiado, haz clic en "Actualizar" o activa la ejecución automática.
Ha ido a otra página
Haga clic dentro del mininavegador para poner el foco en esta ventana.
100%
Consola
- Elimina todo el código de las líneas 11 a 14.
- Mueve todo el código de las líneas 6 a 9 dentro del bucle y elimina la salida en la consola.
- Reemplaza en todas partes
tooltipButtons[0]portooltipButton. - Haz clic en los cuatro botones de la noticia. Fíjate en que ahora la ayuda aparece al pulsar cualquiera de ellos.