0

Lo que quiero hacer es que por intermedio de un cartel el usuario ingrese una opción, y que esta sea tomada por una función, El problema esta en que no sé declarar un evento onclick con una variable leída desde la función.

<head>
    <title>Ejercicio A Nicolás</title>
</head>

<body>
    <h3>Ejercicio A</h3>
    <script type="text/javascript">
        var opción = parseInt(prompt("Ingrese la opción deseada")); 
        <input id = "" type = "" value = "" onclick = "cartel()">

            function cartel() {
                if (!opción) {
                    alert("Introduce un número");
                }

                const opción = document.getElementById("opción").value;

                switch (opción) {
                    case 1:
                        // Duda: ¿Se puede declarar una variable dentro de un case? Sí
                        var radio = parseInt(prompt("Ingrese el radio"));
                        var area = Math.PI * Math.pow(radio, 2);
                        alert("El área del círculo es " + area);
                        break;
                        .
                        .
                        .
3
  • has cartel(opcion)
    – Christian
    Commented el 1 jun. 2021 a las 20:11
  • La línea <input id = "" type = "" value = "" onclick = "cartel()"> sin espacios alrededor del signo = y fuera del bloque script. onclick="cartel()" debe funcionar perfectamente dentro del HTML para llamar a cartel() si ya esta definida. Con "...con una variable leída desde la función." no se que quieres decir...
    – Orici
    Commented el 1 jun. 2021 a las 21:00
  • ¿Podrías explicarlo un poco mejor, porque así no me queda claro? Expón el código Commented el 1 jun. 2021 a las 21:15

3 respuestas 3

2

Recuerda que las funciones deben de ser llamadas, si tienes una función debes de llamarla funcion(params) las variables que estén en la función existen solamente en esta (aun que creo que depende de como hayan sido declaradas). ¿Pero como lo hacemos con un evento?, creo que la solución mas fácil seria obtener el valor dentro de la funcion

var opción = parseInt(prompt("Ingrese la opción deseada")); 
   function cartel() {
      const opción = document.getElementById("opción").value; 
             
      if (!opción) {
         alert("Introduce un número");
      }
....

El HTML

<input id = "" type = "" value = "" onclick="cartel()">

En tu código hay mas de una variable llamada opcion, cuidado con eso, por que al declararla con const te podrá dar un error si tratas de cambiar su valor

6
  • No tira error pero tampoco entra a la función. Commented el 1 jun. 2021 a las 21:15
  • 1
    el onclick debe de estar asi onclick="cartel" (creo), arriba te dejaron un comentario acerca de eso
    – intemeter
    Commented el 1 jun. 2021 a las 21:17
  • ¿Me pueden dar la línea de código completa, por favor? Commented el 1 jun. 2021 a las 21:19
  • @AlejandroCaro añadí el la etiqueta
    – intemeter
    Commented el 1 jun. 2021 a las 21:22
  • Si, esa línea es la que puse yo. Commented el 1 jun. 2021 a las 21:23
1

Tambien puedes ponerl la funcion onclick de otra forma, dentro del codigo

//tiene que ir antes que todo
var opcion = document.getElementById("opción");
opcion.onclick = cartel;

function cartel() {
   opcion.value; //si lo hemos declarado arriba ya no hace falta volverlo ha hacer 
             
   if (!opcion) {
      alert("Introduce un número");
   }else{
      alert("este es la otra condicion") //en caso no se cumpla
   }
}
4
  • Dale, lo pruebo Commented el 1 jun. 2021 a las 21:29
  • @AlejandroCaro la documentación dice que no lleva paréntesis
    – Christian
    Commented el 1 jun. 2021 a las 21:35
  • falta poner los paréntesis quedaría así opcion.onclick = cartel(); Commented el 1 jun. 2021 a las 21:56
  • @AlejandroCaro lee la documentación, si encuentras lo contrario puedes editar la respuesta
    – Christian
    Commented el 1 jun. 2021 a las 21:59
1

Tienes varios errores en tu código y vamos por partes, comenzando por el más importante:

  1. El input dentro de <script>...</script> va a generar error de sintaxis, debe estar antes.
<h3>Ejercicio A</h3>
<script type="text/javascript">
    var opción = parseInt(prompt("Ingrese la opción deseada")); 
    // La siguiente línea genera error de sintaxis
    <input id = "" type = "" value = "" onclick = "cartel()">

Coloca el campo debajo del texto:

<h3>Ejercicio A</h3>
<input id="" type="" value="" onclick="cartel()">
<script type="text/javascript">
    var opción = parseInt(prompt("Ingrese la opción deseada")); 
  1. Luego vienen los problemas de lógica:
  • Solo pides que se teclee algo (prompt()) al cargar la página que, por sí solo no está mal, a menos que quieras que se haga cada que el input reciba clic.
  • No definiste tipo para el input y no se entiende porqué ejecutar la función cuando se hace clic en él. Lo normal es que sea un botón
  • Al ejecutar la función intentas acceder a un elemento que no existe document.getElementById("opción"); entonces, debes decidir si vas a obtener el número desde una ventana de entrada o desde un input, sugiero la segunda opción, acompañado de un botón para ejecutar
  • De paso, unas recomendaciones:
    • No uses eventos en línea onclick="funcion()", es una mala práctica porque complica el mantenimiento de tus scripts
    • Evita usar caracteres especiales o con tilde en el nombre de tus variables, puede funcionar en algunos casos, pero también puede ser origen de problemas

<h3>Ejercicio A</h3>
<input type="number" id="opcion" value="">
<button id="ejecutar">Ejecutar</button>

<script>
function cartel() {
    // Obtener valor y asegurar que es un número entero
    const opcion = parseInt(document.getElementById('opcion').value) || 0;
    // Validar el número
    if (opcion == 0) {
        alert("Introduce un número");
        // Salir de la función
        return;
    }
    // Aquí ya puedes comparar con switch
    // Solo para ver que funciona
    console.log('El número tecleado fue: ' + opcion);
}
// Asignar función al botón
document.getElementById('ejecutar').addEventListener('click', cartel);
</script>

1
  • Excelente respuesta, se detalla también el error del uso de la etiqueta input dentro de un script
    – Anki Jedi
    Commented el 1 jun. 2021 a las 23:27

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.