[Resuelto] Problema con Script de javascript y HTML

[Victor26]

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 [Seleccionar] Expandir

<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 [Seleccionar] Expandir

/* 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!

[engel lex]

Código [Seleccionar] Expandir

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 [Seleccionar] Expandir

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 [Seleccionar] Expandir

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

[@XSStringManolo]

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.

[engel lex]

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

su valor agregado sin perdida notable de eficiencia

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

[Victor26]

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

[#!drvy]

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 (html5) [Seleccionar] Expandir

<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>


<script>
    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;
    }
</script>

Saludos

[Victor26]

Muchas gracias por el codigo, al comienzo no me funciono porque debia llamar el evento onclick al boton en HTML

Código [Seleccionar] Expandir

<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 [Seleccionar] Expandir

document.getElementById('btnInvert').addEventListener('click', function(e){
        invertir();
    });
Quisiera saber que podria ser gracias.

[#!drvy]

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/

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

[MinusFour]

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 (javascript) [Seleccionar] Expandir


document.addEventListener('DOMContentLoaded', function(){
  //DOM cargado aquí
});

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.

[Victor26]

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 [Seleccionar] Expandir

<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 [Seleccionar] Expandir


/* 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 */