Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: Victor26 en 4 Septiembre 2019, 20:19



Título: [Resuelto] Problema con Script de javascript y HTML
Publicado por: Victor26 en 4 Septiembre 2019, 20:19
Buenas tardes a todos, tengo una pequeña duda sobre un script que deseo realizar con un formulario en html:

Tengo este formulario realizado en html
(https://i.ibb.co/37NjLPG/paint.png)
Código:
<form method="post" name="Formulario">
     <label for="numero">Numero:</label><br>
     <input type="text" name="numero" maxlength="10" placeholder="Digite el numero" id="numero">
     <button onclick="inversor()">Inversor</button>
     <input type="text" name="inversor" maxlength="10" placeholder="Resultado" id="inversor"><br>
    </form>

y deseo que apenas yo digite el numero en el cuadro "Numero" y le unda al boton "Inversor" con un codigo javascript se realize la conversion del inversor y muestre dicho resultado en el cuadro "Resultado".

El codigo javascript que tengo es este.
Código:
/* INVERSOR DE UN NUMERO */
function inversor(){
  num1 = document.getElementById('numero').value;
  var resultado = 1/num1;
 document.getElementById('inversor').innerHTML = resultado;
}
/* FIN */

Por favor, les pido me puedan colaborar, gracias!


Título: Re: Problema con Script de javascript y HTML
Publicado por: engel lex en 4 Septiembre 2019, 20:29
Código:
document.getElementById('inversor').innerHTML = resultado;

no es un asunto de innerHTML (ya que los inputs no tienen html interno porque no son etiqueta de apertura y cierre)

si recibes valor con .value, daselo con .value

Código:
document.getElementById('inversor').value = resultado;


personalmente recomiendo que uses jquery para manejar el DOM, es una de las librerias mas usadas a nivel mundial para js por su valor agregado sin perdida notable de eficiencia

solo por ejemplo como sería

Código:
var num1 = $('#numero').val();
var resultado = 1/num1;
$('#inversor').val(resultado);


Título: Re: Problema con Script de javascript y HTML
Publicado por: @XSStringManolo en 4 Septiembre 2019, 21:25
https://medium.com/@trombino.marco/you-might-not-need-jquery-a-2018-performance-case-study-aa6531d0b0c3

Discrepo mucho en lo de sin pérdida notable de eficiencia.


Título: Re: Problema con Script de javascript y HTML
Publicado por: engel lex en 4 Septiembre 2019, 22:10
hablamos de 10.000 operaciones de modificación en el dom en unos 0.2 segundos...

a menos que realmente necesites hacer esa cantidad, humanamente es imperceptible el resultado y te soy sincero, si haces eso constantemente en tu documento, hay 2 opciones o haces algo muy experimental (donde tienes que realmente estar claro de tus herramientas y optimización) o haces algo muy mal...

los beneficios al tiempo de desarrollo, capacidad de actualizar y dan mantenimiento al mismo, ni por poco se acercan a los defectos devenidos al cliente por el uso de jquery, por lo que lo ha llevado a ser una herramienta muy usada a nivel mundial...

y mantengo mi frase
Citar
su valor agregado sin perdida notable de eficiencia

la perdida de eficiencia casi sin importar lo que hagas, no será notable para el usuario


Título: Re: Problema con Script de javascript y HTML
Publicado por: Victor26 en 5 Septiembre 2019, 03:58
Esta funcion que estoy haciendo es solamente para pruebas, pues ando aprendiendo de javascript y no quiero hacerlo desde jquery como tal, quiero desde 0. Por eso les pido la colaboracion, lo puse .value pero igual sigue sin darme. Gracias


Título: Re: Problema con Script de javascript y HTML
Publicado por: #!drvy en 5 Septiembre 2019, 10:07
A parte de lo que te ha dicho el compañero @engel lex, si usas onclick o parecidos, has de asegurarte de que no mezclas ID con nombres de funciones. En este caso estas invocando una función llamada "inversor" y al mismo tiempo tienes un ID "inversor". Por lo tanto el navegador tira un TypeError.

Lo mejor es usar eventos de JS para capturar acciones.

Código
  1. <form method="post" name="Formulario">
  2.    <label for="numero">Numero:</label><br>
  3.    <input type="text" name="numero" maxlength="10" placeholder="Digite el numero" id="numero">
  4.  
  5.    <button id="btnInvert" type="button">Inversor</button>
  6.    <input type="text" name="inversor" maxlength="10" placeholder="Resultado" id="inversor"><br>
  7. </form>
  8.  
  9.  
  10.    document.getElementById('btnInvert').addEventListener('click', function(e){
  11.        invertir();
  12.    });
  13.  
  14.    function invertir() {
  15.        var num1 = document.getElementById('numero').value;
  16.        var resultado = 1/num1;
  17.        document.getElementById('inversor').value = resultado;
  18.    }

Saludos


Título: Re: Problema con Script de javascript y HTML
Publicado por: Victor26 en 5 Septiembre 2019, 14:45
Muchas gracias por el codigo, al comienzo no me funciono porque debia llamar el evento onclick al boton en HTML
Código:
<button id="btnInvert" type="button" onclick="invertir()">Inversor</button>

Pero despues de eso me funciono a la perfeccion, muchas gracias!!
Ahora tengo una pregunta revisando la consola de google me parece un error con uno de los eventos al comienzo de JS
index.html:8 Uncaught TypeError: Cannot read property 'addEventListener' of null
    at index.html:8
Código:
document.getElementById('btnInvert').addEventListener('click', function(e){
        invertir();
    });
Quisiera saber que podria ser gracias.


Título: Re: Problema con Script de javascript y HTML
Publicado por: #!drvy en 5 Septiembre 2019, 15:03
Si tienes el evento capturado por javascript (addEventListener) no te hace falta el onclick. Aquí tienes el codigo que te he puesto funcionando, con addEventListener, sin onclick.

https://jsfiddle.net/s7f8Lgdk/


Citar
Quisiera saber que podria ser gracias.

Has eliminado el ID del boton Inversor? Estás intentando añadir un evento a algo que no existe.

Saludos


Título: Re: Problema con Script de javascript y HTML
Publicado por: MinusFour en 5 Septiembre 2019, 15:46
index.html:8 Uncaught TypeError: Cannot read property 'addEventListener' of null
    at index.html:8

El error lo tienes en la linea 8 de tu HTML, lo que significa que tienes el script en el header. En ese punto, no se ha cargado el DOM, no existe el contenido de tu documento. Si pones el script después del form entonces los elementos ya fueron cargados en el DOM y puedes acceder a ellos.

Otra cosa que puedes hacer es agregar otro listener:

Código
  1. document.addEventListener('DOMContentLoaded', function(){
  2.  //DOM cargado aquí
  3. });

Y dentro del listener puedes acceder a cualquier elemento del DOM.

No mezcles los handlers y listeners. Si vas a usar los handlers en los atributos/propiedades on<event> no uses listeners. Y viceversa. Yo también evitaría usar los handlers en general.


Título: Re: Problema con Script de javascript y HTML
Publicado por: Victor26 en 5 Septiembre 2019, 18:43
Gracias, me funciono a la perfeccion el codigo pero porque todo estaba junto en el HTML. Como haria para que mi codigo JS funcione en un archivo aparte?, yo lo tenia asi y me daba el error de la consola y ademas no funcionaba el inversor. Gracias

HTML:
Código:
<div class="container">
  <div class="row">
    <div class="col-12 col-6">
    <form method="post" name="Formulario">
    <label for="numero">Numero:</label><br>
    <input type="text" name="numero" maxlength="10" placeholder="Digite el numero" id="numero">
    <button id="btnInvert" type="button">Inversor</button>
    <input type="text" name="inversor" maxlength="10" placeholder="Resultado" id="inversor"><br>
</form>
    </div>
  </div>
</div>

JS:

Código:
/* INVERSOR EN FORMULARIO */
  document.getElementById('btnInvert').addEventListener('click', function(e){
        invertir();
    });
 
    function invertir() {
        var num1 = document.getElementById('numero').value;
        var resultado = 1/num1;
        document.getElementById('inversor').value = resultado;
    }
/* FIN */


Título: Re: Problema con Script de javascript y HTML
Publicado por: @XSStringManolo en 5 Septiembre 2019, 23:44
Hay muchas formas distintas de añadir un archivo externo. Te recomiendo el tag script src porque a parte de añadir tus archivos .js en local, también puedes añadir archivos externos como por librerías. https://www.w3schools.com/tags/att_script_src.asp
A parte de los mencionados aquí deberías añadir checksums para asegurar que el contenido del script no ha sido modificado en el servidor que aloja la librería o el archivo externo javascript por ejemplo en un ataque MITM, un proxy, etc.

En este enlace tienes explicados los recursos disponibles para asegurarte de que tus propios archivos alojados en un servidor permanecen íntegros
https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity


Título: Re: Problema con Script de javascript y HTML
Publicado por: Victor26 en 7 Septiembre 2019, 06:12
Buenas noches, entiendo lo que dices string manolo y gracias por aclararmelo.  Yo se como añadir un archivo JS en html y ya esta, el problema es que cuando pongo ese codigo script que me dieron funcionando ustedes en el archivo aparte no me quiere funcionar, pero apenas lo pongo debajo del codigo html hay si, entonces lo que queria saber era, que estaba mal para que no me funcionara aparte. Muchas gracias de antemano por la ayuda.


Título: Re: Problema con Script de javascript y HTML
Publicado por: @XSStringManolo en 7 Septiembre 2019, 13:54
Buenas noches, entiendo lo que dices string manolo y gracias por aclararmelo.  Yo se como añadir un archivo JS en html y ya esta, el problema es que cuando pongo ese codigo script que me dieron funcionando ustedes en el archivo aparte no me quiere funcionar, pero apenas lo pongo debajo del codigo html hay si, entonces lo que queria saber era, que estaba mal para que no me funcionara aparte. Muchas gracias de antemano por la ayuda.
Buenos días, vuelve a leer las respuestas de los otros usuarios porque te han respondido exactamente a esta pregunta.
Si no entiendes perfectamente algo de sus respuestas, por ejemplo que es el DOM, busca en Google lo que es. Busca todos los términos que no entiendas y después analizas todo el texto, y si no lo entiendes preguntas tus dudas.

En resumen estás declarando una función que utiliza un elemento HTML que no existe. Porque aún no se cargó y ya estás intentando utilizarla. Puedes subsanarlo de varias formas.

A mi lo de cargar el CSS y el javascript en otros archivos me parece una tontería a menos que el mismo CSS y/o JS se esté aplicando a varios documentos distintos. Que el JS sea un propio programa web en sí totalmente independiente de la página. O que el script se corra de forma ajena al cliente en el lado del servidor por lo que no lo ves y puedes trasladar el resultado de la operación directamente al documento sin mostrar el proceso.


Título: Re: Problema con Script de javascript y HTML
Publicado por: #!drvy en 7 Septiembre 2019, 15:51
Citar
pero apenas lo pongo debajo del código html hay si, entonces lo que quería saber era, que estaba mal para que no me funcionara aparte.

Muestra el código completo de como lo incluyes. A mi me parece que te esta pasando lo que dice @Minusfour, lo estas incluyendo en la cabecera (head) en vez de antes de terminar el body (</body>).

Saludos


Título: Re: Problema con Script de javascript y HTML
Publicado por: Victor26 en 7 Septiembre 2019, 17:26
Haber si me hago entender, en mi pagina, tengo un archivo llamado index.html y dos carpetas mas (JS, CSS), dentro de cada carpeta hay unos archivos llamados (js.js y estilos.css), dentro del archivo (JS.JS) tengo todos los scripts que he estado aprendiendo a hacer en mi estudio, y en index.html, tengo todo lo referente a estructuras de la pagina.

Ahora, en el archivo JS.JS tengo el script que he estado mostrando que no me funciona, ustedes alfin me lo pudieron resolver, pero no me funciona si lo pongo en mi archivo JS.JS, mientras que si me meto a index.html y lo pongo justo debajo de la estructura del (form) hay si me funciona.

Mi pregunta es, porque razon no me funciona poniendolo en el archivo de los scripts (JS.JS) y porque si me funciona si lo pongo debajo del form en html.

Si pongo todo mi html y js, no alcanza porque tengo varios scripts (JS.JS) y varias estructuras (index.html).

Disculpenmen si no he estado entendiendo completamente lo que me dicen, apenas estoy aprendiendo del lenguaje y es bastante lo que falta.

Saludos.  :D


Título: Re: Problema con Script de javascript y HTML
Publicado por: #!drvy en 7 Septiembre 2019, 17:36
Repito:

Citar
Muestra el código completo de como lo incluyes.

Citar
A mi me parece que te esta pasando lo que dice @Minusfour, lo estas incluyendo en la cabecera (head) en vez de antes de terminar el body (</body>).

Y no, no es buen consejo meter javascript en el html, siempre ponlo en su propio archivo.


Saludos


Título: Re: Problema con Script de javascript y HTML
Publicado por: Victor26 en 7 Septiembre 2019, 17:43
Este es el codigo en el HEAD de HTML
Código:
<head>
<meta charset="utf-8">
<title>CENAL</title>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> <!-- Para llamar a la hoja de estilos css -->
    <link rel="stylesheet" type="text/css" href="css/estilo.css">
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/js.js"></script>
</head>

JS
Código:
/* INVERSOR EN FORMULARIO */
  document.getElementById('btnInvert').addEventListener('click', function(e){
        invertir();
    });
 
    function invertir() {
        var num1 = document.getElementById('numero').value;
        var resultado = 1/num1;
        document.getElementById('inversor').value = resultado;
    }
/* FIN */

HTML
Código:
<div class="container">
  <div class="row">
    <div class="col-12 col-6">
    <form method="post" name="Formulario">
    <label for="numero">Numero:</label><br>
    <input type="text" name="numero" maxlength="10" placeholder="Digite el numero" id="numero">
 
    <button id="btnInvert" type="button">Inversor</button>
    <input type="text" name="inversor" maxlength="10" placeholder="Resultado" id="inversor"><br>
</form>


    </div>
  </div>
</div>


Título: Re: Problema con Script de javascript y HTML
Publicado por: #!drvy en 7 Septiembre 2019, 17:56
Lo dicho, estas poniendo los scripts en el head, tienes que ponerlos al final del body antes de cerrarlo.

Código
  1. <!DOCTYPE html>
  2. <html lang='es'>
  3.    <meta charset="utf-8">
  4.    <title>CENAL</title>
  5.    <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  6.    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> <!-- Para llamar a la hoja de estilos css -->
  7.    <link rel="stylesheet" type="text/css" href="css/estilo.css">
  8. </head>
  9.    <div class="container">
  10.        <div class="row">
  11.            <div class="col-12 col-6">
  12.                <form method="post" name="Formulario">
  13.                    <label for="numero">Numero:</label><br>
  14.                    <input type="text" name="numero" maxlength="10" placeholder="Digite el numero" id="numero">
  15.                    <button id="btnInvert" type="button">Inversor</button>
  16.                    <input type="text" name="inversor" maxlength="10" placeholder="Resultado" id="inversor"><br>
  17.                </form>
  18.            </div>
  19.        </div>
  20.    </div>
  21.  
  22.    <script src="js/jquery-3.3.1.min.js"></script>
  23.    <script src="js/js.js"></script>
  24. </body>
  25. </html>


Es buena practica poner siempre los scripts antes de cerrar el body. En la cabecera añaden tiempo de carga pre-renderización.  Además podrias poner un evento que escuche cuando se ha cargado el DOM.

Saludos


Título: Re: Problema con Script de javascript y HTML
Publicado por: MinusFour en 7 Septiembre 2019, 18:01
Tienes un archivo js, de nombre js, en una carpeta js.

(https://imgflip.com/s/meme/Yo-Dawg-Heard-You.jpg)

Usa nombres más apropiados para tus archivos, para evitar confusiones.


Título: Re: Problema con Script de javascript y HTML
Publicado por: Victor26 en 7 Septiembre 2019, 18:12
Listo, me ha funcionado excelente, muchas gracias ahora si me ha dado resultado, era como me decian que el JS lo tenia arriba del head, ademas ya le he cambiado el nombre gracias por la aclaracion. Saludos.


Título: Re: Problema con Script de javascript y HTML
Publicado por: @XSStringManolo en 7 Septiembre 2019, 22:02
Tienes un archivo js, de nombre js, en una carpeta js.

(https://imgflip.com/s/meme/Yo-Dawg-Heard-You.jpg)

Usa nombres más apropiados para tus archivos, para evitar confusiones.
Eso estaba pensando  :-(