2

hacer un formulario que llame una funcion cada vez que haya un cambio en el input

     function cambio(){
     var cambio=document.getElementById("nombre").value;
     document.getElementById("valor_nombre").innerHTML=cambio;
     }

html

     <form action="" method="post">
     <input type="text" name="nombre" placeholder="nombre" id="nombre">
    <div id="valor_nombre"> </div>

    </form> 

Lo que deseo es que se llame la función cambio cuando en el input se agrege o se elimine un caracter, y la función lo que hará será copiar el valor del input y pegarlo en el div.

¿Que le debo poner al input?

2
  • como puedo hacer para que cuando haga un cambio en el valor de el input llame a la funcion cambio
    – gabriel
    el 14 oct. 2020 a las 23:34
  • lo que deseo es que el se llame la funcion cambio cuando el input se agrege o se elimine un caracter, y la funcion lo que ara sera copiar el valor del input y pegarlo en el div
    – gabriel
    el 14 oct. 2020 a las 23:43

2 respuestas 2

2

Todos los elementos HTML tienen eventos. Y a cada elemento se le puede asignar una función que se llama cuando se dispara el evento. En este caso, te interesa el evento input.

De https://developer.mozilla.org/es/docs/Web/API/HTMLElement/input_event:

El evento input se dispara cuando el valor (value) de un elemento <input>, <select>, o <textarea> ha sido cambiado.

const elemNombre = document.getElementById("nombre"),
      elemValorNombre = document.getElementById("valor_nombre");

function cambio(evento) {
  var cambio = elemNombre.value;   //también podrías usar  evento.target.value
  elemValorNombre.innerText = cambio;
}


//Acá se asocia el evento con la funcion cambio()
elemNombre.addEventListener('input', cambio);
<form action="" method="post">
  <input type="text" name="nombre" placeholder="nombre" id="nombre">
  <div id="valor_nombre"> </div>
</form>

2

Tu código funciona salvo los siguientes puntos:

  • No invocas a la función
  • No le indicas a JS en que evento debe ejecutar esta función
  • Puedes:
    • Invocar inline a la función dentro de la etiqueta HTML, asociando esta llamado al evento onkeyup
    • O recuperar el input por medio de su id y darle un listener al mismo evento pero aqui sería: keyup

Código:

<form action="" method="post">
<input type="text" name="nombre" onkeyup="cambio()" placeholder="nombre" id="nombre">
<div id="valor_nombre"> 

</div>
</form> 

<script>
    function cambio () {
        let cambio=document.getElementById("nombre").value;
        document.getElementById("valor_nombre").innerHTML = cambio;
    }
</script>

Para no involucrar el llamado de la función directo en el HTML, podemos hacer lo siguiente:

    <form action="" method="post">
        <input type="text" name="nombre" placeholder="nombre" id="nombre">
        <div id="valor_nombre"> 
    
        </div>
    </form> 
        
        <script>
          
          let valorOriginal = document.getElementById('nombre');
          let valorClonado  = document.getElementById("valor_nombre");
          
          valorOriginal.addEventListener('keyup', () => {
            valorClonado.innerText = valorOriginal.value;
          })
        </script>

Referencia

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.