¡Hola! Claro, con gusto reviso tu código. El error es una pequeña confusión entre los nombres de las funciones que llamas en tu HTML y cómo las has definido en tu archivo JavaScript.
El problema principal es que el botón con el texto "Prompt" está llamando a la función alerta()
, que es la que contiene el mensaje "Yo amo JS". Además, el código que pide el nombre de la ciudad se está ejecutando apenas carga la página en lugar de esperar a que se presione un botón.
El Problema Detallado
Llamada incorrecta en el botón "Prompt": En tu archivo index.html
, el botón "Prompt" tiene el atributo onclick="alerta()"
.
<button onclick="alerta();" class="button">Prompt</button>
Si miras tu archivo app.js
, la función alerta()
es la que efectivamente muestra el mensaje "Yo amo JS". Por eso ves ese mensaje al presionar ese botón.
function alerta () {
alert('Yo amo JS')
}
Función inexistente en el botón "Alert": El botón "Alert" intenta llamar a una función llamada mostrarAlerta()
.
<button onclick="mostrarAlerta();" class="button">Alert</button>
Sin embargo, esta función no existe en tu archivo app.js
, por lo que ese botón no hace nada.
Código que se ejecuta solo: El código que pide el nombre de una ciudad de Brasil no está dentro de una función.
let ciudadDeBrasil = prompt("Indique el nombre de una ciudad de Brasil");
alert(`Estuve en ${ciudad} y me acorde de ti`) // <-- ¡Ojo! También hay un error aquí.
Al no estar en una función, el navegador lo ejecuta tan pronto como lee el archivo app.js
, es decir, al cargar la página.
La Solución
Para solucionarlo, necesitamos ordenar las funciones en app.js
y asegurarnos de que el HTML llame a las correctas.
Paso 1: Arregla tu archivo app.js
Debemos crear una función para el código del prompt y renombrar la función alerta
para que coincida con lo que el botón "Alert" espera.
// Cambia el contenido de la etiqueta h1
let titulo = document.querySelector('h1');
titulo.innerHTML = 'Hora del Desafío';
// Función para el botón "Console"
function mostrarMensaje() {
console.log('El botón fue clicado');
}
// Función para el botón "Alert"
// RENOMBRAMOS la función 'alerta' a 'mostrarAlerta'
function mostrarAlerta() {
alert('Yo amo JS');
}
// Función para el botón "Prompt"
// CREAMOS una función para el código que pide la ciudad
function preguntarCiudad() {
let ciudadDeBrasil = prompt("Indique el nombre de una ciudad de Brasil");
// CORREGIMOS el nombre de la variable en la alerta
alert(`Estuve en ${ciudadDeBrasil} y me acordé de ti`);
}
// Función para el botón "Suma"
function sumaDosNumeros() {
let primerNumero = parseInt(prompt('Escoge un número'));
let segundoNumero = parseInt(prompt('Escoge otro número'));
let resultado = primerNumero + segundoNumero;
alert(`${primerNumero} + ${segundoNumero} = ${resultado}`);
}
Paso 2: Arregla tu archivo index.html
Ahora, solo necesitas cambiar el onclick
del botón "Prompt" para que llame a la nueva función que creamos.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<header>
<h1></h1>
</header>
<main class="container">
<button onclick="mostrarMensaje();" class="button">Console</button>
<button onclick="mostrarAlerta();" class="button">Alert</button>
<button onclick="preguntarCiudad();" class="button">Prompt</button>
<button onclick="sumaDosNumeros();" class="button">Suma</button>
</main>
<script src="app.js"></script>
</body>
</html>
Resumen del Arreglo
En resumen, los cambios que hicimos fueron:
- Encapsular el código que pide la ciudad dentro de una nueva función llamada
preguntarCiudad()
. - Renombrar la función
alerta()
a mostrarAlerta()
para que el botón "Alert" funcione. - Actualizar el
onclick
del botón "Prompt" en el HTML para que llame a la función correcta (preguntarCiudad()
).
LLego tarde pero espero te sirva, exito en tu aprendizaje!