simple function to obtain the value of an input

Question

simple function to obtain the value of an input

Navigation

#1 by (0 votes)
#2 by (0 votes)
#3 by (0 votes)

-1

I'm just starting in javascript and I'm trying to do something very simple, an input and a button, when I click the button, it shows me a value in the console. When entering a specific value in the input, I want that by clicking on the button, the console will show a specific value as well, and if not, it will show another value, simplifying: If the value of the input is X, I want to show Y by clicking on the button. If the value of the input is C, V, Y, etc, I want that when clicking on the button Z is displayed. I leave the code below:

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>

the issue is that when I click on any part of the html or the input itself, it returns the input value, which I do not want, I want it only when, and only when, I click the button, there execute the said function. thanks!

javascript html

asked by Lucho K 11.08.2018 в 05:29

source

3 answers

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>

the java function would be like this

   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>

answered by 11.08.2018 в 06:12

0

I tell you the following

When you compare values, use the triple sign equal === is stricter

You do not need event.preventDefault() but if you want you can leave it

Optionally use the syntax of querySelector to get the values or by id or% class same is .addEventListener

I leave your functional code for you to try it

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

answered by 11.08.2018 в 05:48

Full screen Kali Linux VirtualBox? How can I execute one method after another?

score 0 · Accepted Answer

Brother, the only error in your code is button = addEventListener The correct thing is

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

Also note that you are not using a submit button, then the default default is e.

I hope you serve