-1

apenas estoy empezando en esto de javascript y estoy tratando de hacer algo muy sencillo, un input y un boton, cuando le doy click al boton, me muestra en la consola un valor. al introducir un valor en especifico en el input, quiero que al darle click al boton, en la consola se muestre un valor en especifico tambien, y sino, si es cualquier otro valor, que muestre otro, simplificando: si el valor del input es X, quiero que al darle click al boton se muestre Y. si el valor del input es C,V,Y, etc, quiero que al darle click al boton se muestre Z. dejo el codigo a continuacion:

var button = document.getElementById("button")
button = addEventListener("click", function(e){
    e.preventDefault
    var input = document.getElementById("input").value
    if (input == "x"){
        console.log("y")
    }else {
        console.log("z")
    }
})
<form action="">
  <input type="text" placeholder="number" id="input">
  <input type="button" value="enviar" id="button">
</form>

el tema es que cuando doy click en cualquier parte del html o en el input mismo, me devuelve el valor del input, cosa que no quiero, quiero que solo cuando, y solo cuando, le doy click al boton, ahi me ejecute la funcion dicha. gracias!

1
  • hay un error ahi button = addEventListener debería ser button.addEventListener . Estás asignando el evento al documento y no al boton el 11 ago. 2018 a las 4:14

3 respuestas 3

0

Brother, el único erro de tu código es button = addEventListener Lo correcto es

button.addEventListener("click", function (e) ....

También nota que no estas usando un boton tipo submit, entonces el prevent default, está e más.

Espero te sirva

0
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <input type='text' class='form-control' id='direccion_mass' maxlength='45' value="carrera de java"   required='required' autofocus>

    <button type="button" id="acciones" class="btn btn-primary mass"  onclick="myFunction()" data-dismiss="modal">massar
                            </button>

la funcion de java seria de la siguiente forma

   function myFunction(){
      var datos =$('#direccion_mass').val();
      console.info(datos);
   }

function myFunction(){
var datos =$('#direccion_mass').val();

console.info(datos);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='text' class='form-control' id='direccion_mass' maxlength='45' value="carrera de java"   required='required' autofocus>

<button type="button" id="acciones" class="btn btn-primary mass"  onclick="myFunction()" data-dismiss="modal">
							<span class="glyphicon glyphicon-check"></span> massar
						</button>

1
  • 2 cosas: la primera el lenguaje es javascript no java y la segunda conviene la aclares que en tu ejemplo estas usando jquery igual y no esta de mas
    – user75901
    el 11 ago. 2018 a las 4:13
0

Te comento lo siguiente

  1. Cuando compares valores, usa el triple signo igual === es mas estricto
  2. No es necesario el event.preventDefault() pero si quieres lo puedes dejar
  3. Opcionalmente usa la sintaxis de querySelector para obtener los valores o por id o por class asi mismo es .addEventListener

Te dejo tu código funcional para que lo pruebes

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>

  <input type="text" placeholder="number" id="input">
  <input type="button" value="enviar" id="button">

<script>
    let botton = document.querySelector("#button")
    
    botton.addEventListener("click", function(){
      let caja = document.querySelector("#input").value
    
    if(caja === 'x'){
      console.log("y")
    }else{
      console.log("z")
    }})
</script>
</body>
</html>
   

3
  • el problema es que cuando hago click fuera del input, me ejecuta ese condicional, por ejemplo, si en el input no escribi nada y hago click fuera, en la consola muestra z, hago 20 veces click fuera y devuelve 20 veces z, y si en el input pongo x y hago click fuera me devuelve y, y no quiero que suceda eso, quiero que SOLO cuando le doy al boton ejecute esa funcion
    – Mu-coder
    el 11 ago. 2018 a las 4:00
  • prueba mi código hace lo que pides @LuchoK
    – user75901
    el 11 ago. 2018 a las 4:01
  • @LuchoK copialo completo y pruebalo lo he testeado antes de responderte
    – user75901
    el 11 ago. 2018 a las 4:02

Tu Respuesta

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

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