elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.


 


Tema destacado: Recuerda que debes registrarte en el foro para poder participar (preguntar y responder)


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  [Resuelto] Problema con Script de javascript y HTML
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] 2 3 Ir Abajo Respuesta Imprimir
Autor Tema: [Resuelto] Problema con Script de javascript y HTML  (Leído 691 veces)
Victor26

Desconectado Desconectado

Mensajes: 20


Ver Perfil
[Resuelto] Problema con Script de javascript y HTML
« 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

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!


« Última modificación: 9 Septiembre 2019, 20:49 por #!drvy » En línea

engel lex
CoAdmin
***
Desconectado Desconectado

Mensajes: 14.532



Ver Perfil
Re: Problema con Script de javascript y HTML
« Respuesta #1 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);


En línea

El problema con la sociedad actualmente radica en que todos creen que tienen el derecho de tener una opinión, y que esa opinión sea validada por todos, cuando lo correcto es que todos tengan derecho a una opinión, siempre y cuando esa opinión pueda ser ignorada, cuestionada, e incluso ser sujeta a burla, particularmente cuando no tiene sentido alguno.
string Manolo


Desconectado Desconectado

Mensajes: 1.143


Genio de la ingenieria social. Nab en lenguajes


Ver Perfil WWW
Re: Problema con Script de javascript y HTML
« Respuesta #2 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.
En línea

Qnriwy sue uw jwkwkw wu qo siw nssuq lsowi je  ej wj7
engel lex
CoAdmin
***
Desconectado Desconectado

Mensajes: 14.532



Ver Perfil
Re: Problema con Script de javascript y HTML
« Respuesta #3 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
« Última modificación: 4 Septiembre 2019, 22:11 por engel lex » En línea

El problema con la sociedad actualmente radica en que todos creen que tienen el derecho de tener una opinión, y que esa opinión sea validada por todos, cuando lo correcto es que todos tengan derecho a una opinión, siempre y cuando esa opinión pueda ser ignorada, cuestionada, e incluso ser sujeta a burla, particularmente cuando no tiene sentido alguno.
Victor26

Desconectado Desconectado

Mensajes: 20


Ver Perfil
Re: Problema con Script de javascript y HTML
« Respuesta #4 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
En línea

#!drvy
Moderador
***
Desconectado Desconectado

Mensajes: 5.305



Ver Perfil WWW
Re: Problema con Script de javascript y HTML
« Respuesta #5 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
En línea

Victor26

Desconectado Desconectado

Mensajes: 20


Ver Perfil
Re: Problema con Script de javascript y HTML
« Respuesta #6 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.
En línea

#!drvy
Moderador
***
Desconectado Desconectado

Mensajes: 5.305



Ver Perfil WWW
Re: Problema con Script de javascript y HTML
« Respuesta #7 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
En línea

MinusFour


Desconectado Desconectado

Mensajes: 4.594


I'm fourth.


Ver Perfil WWW
Re: Problema con Script de javascript y HTML
« Respuesta #8 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.
En línea

Victor26

Desconectado Desconectado

Mensajes: 20


Ver Perfil
Re: Problema con Script de javascript y HTML
« Respuesta #9 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 */
En línea

Páginas: [1] 2 3 Ir Arriba Respuesta Imprimir 

Ir a:  

Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines