 Autor
|
Tema: [Resuelto] Problema con Script de javascript y HTML (Leído 8,635 veces)
|
Victor26
 Desconectado
Mensajes: 26
|
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  <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. /* 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 pm por #!drvy »
|
En línea
|
|
|
|
|
engel lex
|
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 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 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.
|
|
|
|
|
|
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 |
|
|
|
« Última modificación: 4 Septiembre 2019, 22:11 pm 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
Mensajes: 26
|
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
|
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. <form method="post" name="Formulario"> <input type="text" name="numero" maxlength="10" placeholder="Digite el numero" id="numero"> <input type="text" name="inversor" maxlength="10" placeholder="Resultado" id="inversor"><br> 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; }
Saludos |
|
|
|
|
En línea
|
|
|
|
Victor26
Desconectado
Mensajes: 26
|
Muchas gracias por el codigo, al comienzo no me funciono porque debia llamar el evento onclick al boton en HTML <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:8document.getElementById('btnInvert').addEventListener('click', function(e){
invertir();
}); Quisiera saber que podria ser gracias. |
|
|
|
|
En línea
|
|
|
|
|
#!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 |
|
|
|
|
En línea
|
|
|
|
|
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: 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.
|
|
|
|
|
En línea
|
|
|
|
Victor26
Desconectado
Mensajes: 26
|
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: <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: /* 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
|
|
|
|
|
| Mensajes similares |
|
Asunto |
Iniciado por |
Respuestas |
Vistas |
Último mensaje |
|
|
[Resuelto] Abrir primero un script que una página .html
Desarrollo Web
|
Puntoinfinito
|
1
|
2,264
|
12 Enero 2013, 22:25 pm
por lipman
|
|
|
|
[Resuelto] Problema al probar los script de entrada al localhost
PHP
|
Blitox1570
|
7
|
3,399
|
3 Julio 2015, 17:20 pm
por DarK_FirefoX
|
|
|
|
Problema con While En Script de Ubuntu (Resuelto)
Scripting
|
Aitorseven
|
8
|
7,757
|
21 Mayo 2018, 20:26 pm
por Aitorseven
|
|
|
|
[Resuelto] Problema con PHP y HTML
PHP
|
Victor26
|
4
|
2,208
|
23 Septiembre 2019, 05:14 am
por Victor26
|
|
|
|
Dividir un script de un html en dos archivos de javascript
Desarrollo Web
|
rubcr
|
0
|
2,034
|
11 Mayo 2020, 19:49 pm
por rubcr
|
 |
