Create a variable with the input value and addeventlistener "keypress"

Asked

Viewed 109 times

1

Guys, I’m trying to get the isolated value of some inputs when typed in the input.

I can even log in the entered value. eg: console.log(topLeft.value), which returns the value that is present in the input at the moment and something 'Undefined'.

I wanted the value that is present in the input to become the value of a variable.

I have tried to create variables outside the functions with the corresponding side name (ex Let topLeft;) but it does not store the input value.

I’m a beginner in the subject and I wanted to know where I’m going wrong.

function getElemento(getElement) {
    topLeft = getElement("tl");
    topRight = getElement("tr");
    bottomLeft = getElement("bl");
    bottomRight = getElement("br");
}
function addEvento(addEvent){
    addEvent(topLeft);
    addEvent(topRight);
    addEvent(bottomLeft);
    addEvent(bottomRight);
}

window.onload = () => {
    function getInputValue() {
        let inputValue = this.value;
        return inputValue
    };
    function getElement(id){
        let element = document.getElementById(id);
        return element
    };
    function addEvent (side){
        side.addEventListener("keypress", getInputValue);
    };
    getElemento(getElement);
    addEvento(addEvent)
}
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="js/value.js"></script>
    <title>Document</title>
</head>
<body>
    <form action="">
        <p>
            <label for="top-left">Top Left:</label>
            <input  id="tl" name="top-left" type="number" value="0">
        </p>
        <p>
            <label for="top-right">Top Right:</label>
            <input type="number" id="tr" name="top-right" value="0">
        </p>
        <p>
            <label for="bottom-left">Bottom Left:</label>
            <input type="number" id="bl" name="bottom-left" value="0">
        </p>
        <p>
            <label for="bottom-right">Bottom Right:</label>
            <input type="number" id="br" name="bottom-right" value="0">
        </p>
    </form>
</body>
</html>

javascript javascript-events
  • 1

    Put HTML to get a sense of how the code works.

  • HTML code added.

  • You want to take a variable from inside the callback of the event?

  • I believe so, I wanted a variable with the input value, at the moment the value is entered, the callback of the event extracts the value gives variable that contains the input and returns its value, but I do not see how to extract it

  • What do you want to do with this input value? I still don’t understand your goal

  • Later use as values for a border-Radius in css, but it will be another learning

  • You can return the values of inputs for four global variables? One specific for each input?

  • That’s the goal, how I should proceed ?

Show 3 more comments

1 answer

3


The problem is that you generalized the installation of the same events to all your inputs and when you needed to fetch a value from a specific input you were left with no output... or almost.

The solution to this impasse is to verify the id(or another attribute that identifies it, ex: date attributes-*) of the element that generated the event and allocate the value of that element to its destination based on that id.

In case I do not know what would be the fate of the values of these inputs then created four global variables tL, tR, bL and bR and a button that logs its values.

In function getInputValue() I added a check from id of the element that triggered the event and fate its value to tL, tR, bL and bR based on that id:

let tL = 0;
let tR = 0;
let bL = 0;
let bR = 0;

function getElemento(getElement) {
  topLeft = getElement("tl");
  topRight = getElement("tr");
  bottomLeft = getElement("bl");
  bottomRight = getElement("br");
}

function addEvento(addEvent) {
  addEvent(topLeft);
  addEvent(topRight);
  addEvent(bottomLeft);
  addEvent(bottomRight);
}

window.onload = () => {
  function getInputValue() {
    let inputValue = this.value;
    //Verifica o id do elemento que disparou o evento
    //e atribui seu valor a sua respectiva variável
    switch (this.id) {
      case "tl":
        tL = inputValue;
        break;
      case "tr":
        tR = inputValue;
        break;
      case "bl":
        bL = inputValue;
        break;
      case "br":
        bR = inputValue;
        break;
    }
    return inputValue
  };

  function getElement(id) {
    let element = document.getElementById(id);
    return element
  };

  function addEvent(side) {
    //Aqui troquei o evento keypress por input que é mais adequado
    side.addEventListener("input", getInputValue);
  };
  getElemento(getElement);
  addEvento(addEvent)
}

function imprimir() {
  console.log(`${tL}, ${tR}, ${bL}, ${bR}`);
}
<html lang="pt-br">

<head>
  <meta charset="UTF-8">
  <script type="text/javascript" src="js/value.js"></script>
  <title>Document</title>
</head>

<body>
  <form action="">
    <p>
      <label for="top-left">Top Left:</label>
      <input id="tl" name="top-left" type="number" value="0">
    </p>
    <p>
      <label for="top-right">Top Right:</label>
      <input type="number" id="tr" name="top-right" value="0">
    </p>
    <p>
      <label for="bottom-left">Bottom Left:</label>
      <input type="number" id="bl" name="bottom-left" value="0">
    </p>
    <p>
      <label for="bottom-right">Bottom Right:</label>
      <input type="number" id="br" name="bottom-right" value="0">
    </p>
    <p><input type="button" onclick="imprimir()" value="Imprimir variáveis" /></p>
  </form>
</body>

</html>

MDN Event input: https://developer.mozilla.org/en-US/docs/Web/Events/input

  • 1

    Augusto, thank you so much for presenting the solution! Entedi, I was wrong the moment I wanted to leave the code without many repetitions and I couldn’t imagine the use of the switch! Now is to continue the studies, thank you all! And I still learned a new event that I imagined existed but had not found...

Browser other questions tagged javascript javascript-events

You are not signed in. Login or sign up in order to post.