Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » JQuery » PROBLEMA AL EJECTUAR VARIABLE

JQuery - PROBLEMA AL EJECTUAR VARIABLE

Volver
Nuevo Tema
<<>>
 
Vista:
sin imagen de perfil

PROBLEMA AL EJECTUAR VARIABLE

Publicado por HELENA (2 intervenciones) el 05/03/2022 12:50:47
Buenos días a todos, estoy intentando hacer un ejercicio en Apache Cordova en el que a partir de un dato introducido en un campo de un formulario, la imagen se adapta a este dato en altura. He creado el código HTML y el archivo JS pero no logro que se ejecute. Os adjunto el código a ver si alguien puede ver donde está el error.
Este es el código HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
        <meta name="format-detection" content="telephone=no">
        <meta charset="utf-8">
        <meta name="msapplication-tap-highlight" content="no">
        <meta name="viewport" content="initial-scale=1, width=device-width, viewport-fit=cover">
        <link rel="stylesheet" type="text/css" href="jquerymobile/jquery.mobile-1.4.5.min.css">
        <script type="text/javascript" src="js/jquery-1.12.3.js"></script>
        <script type="text/javascript" src="jquerymobile/jquery.mobile-1.4.5.min.js"></script>
        <meta name="color-scheme" content="light dark">
        <link rel="stylesheet" href="css/index.css">
        <title>App</title>
    </head>
    <body>
        <div data-role="page" id="tappage">
            <div data-role="header">
                <h1>Formulario</h1>
            </div>
            <div data-role="content">
                <form method="post" id="miForm">
                    <label for="numero">Número:</label>
                    <input type="number" name="numero" id="numero"/><br/>
                    <p><img src="img/logo.png" alt="imagen" id="imagen"></p><br/>
                     <input type="submit" data-inline="true" value="Enviar" name="enviar"/>
                </form>
            </div>
            <div data-role="footer">
                Copyright
            </div>
        </div>
        <script src="cordova.js"></script>
        <script src="js/index.js"></script>
    </body>
</html>

Y este es el archivo JS:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
document.addEventListener('deviceready', onDeviceReady, false);
 
function onDeviceReady() {
    // Cordova is now initialized. Have fun!
 
    console.log('Running cordova-' + cordova.platformId + '@' + cordova.version);
    document.getElementById('deviceready').classList.add('ready');
};
 
app.initialize();
 
$(document).on("pageinit", function(){
    $("#miForm").on("submit", function(evt){
        var valor=$("#numero").val();
        if(valor!="" && valor>=10 && valor<=100) {
            $("#imagen").height(valor);
        } else {
        alert ("El valor no puede ser menor que 10 ni mayor que 100");
        }
        evt.preventDefault();
    });
});

Muchas gracias por la ayuda
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
sin imagen de perfil
Val: 142
Plata
Ha mantenido su posición en JQuery (en relación al último mes)
Gráfica de JQuery

PROBLEMA AL EJECTUAR VARIABLE

Publicado por Horroroso (65 intervenciones) el 10/03/2022 01:50:36
Hola, buen día,

Te sugiero primero que le pongas un Id al boton que hace el Submit, algo asi como:

1
<input type="submit" data-inline="true" value="Enviar" name="enviar" id="btnEnviar" />

y luego, solo atrapa el evento click del boton:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$(document).ready(function () {
 
            $("#btnEnviar").on("click", function (evt) {
 
                var valor = $("#numero").val();
 
                if (valor != "" && valor >= 10 && valor <= 100) {
 
                    $("#imagen").height(valor);
 
                } else {
 
                    alert("El valor no puede ser menor que 10 ni mayor que 100");
 
                }
 
                evt.preventDefault();
 
            });
 
        })

Es mas sencillo y con eso funciona.

Saludos!

-Horroroso-
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil

PROBLEMA AL EJECTUAR VARIABLE

Publicado por HELENA (2 intervenciones) el 10/03/2022 17:11:37
Muchisimas gracias por la respuesta.
Pero sigue sin ejecutarse, cuando abro el emulador de Android Studio me aparece el formulario, pero ni me sale el alert indicando que el campo no es correcto, ni cambia el tamaño de la imagen.
No se si puede ser algo en index.js anterior a la función, es decir las funciones propias que crea Cordova. Las adjunto por si se te ocurre algo.
Muchas gracias de nuevo. Esto es todo lo que tiene el archivo index,js entero
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
document.addEventListener('deviceready', onDeviceReady, false);
 
function onDeviceReady() {
    // Cordova is now initialized. Have fun!
 
    console.log('Running cordova-' + cordova.platformId + '@' + cordova.version);
    document.getElementById('deviceready').classList.add('ready');
}
$(document).ready(function () {
     $("#btnEnviar").on("click", function (evt) {
         var valor = $("#numero").val();
         if (valor != "" && valor >= 10 && valor <= 100) {
            $("#imagen").height(valor);
           } else {
                 alert("El valor no puede ser menor que 10 ni mayor que 100");
            }
            evt.preventDefault();
 
            });
 
        })
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar