Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How to save current input.value while typing, into a new global variable?

how do i save the input.value while typing into a new variable(currentInput) so that i can use that new variable globally?

HTML code:

        <h1>Check if your text is a Palindrome:</h1>
        <div id="palindrome-checker">
          <p>Enter your text</p>
          <form id="palindrome-form">
            <input type="text" id="text-input" required value="">
            <button type="button" id="check-btn" >Enter</button>
          </form>

Javascript code:  

       const input = document.querySelector("#text-input");
       const button = document.querySelector("#check-btn");
       const output = document.querySelector("#result");
       const form  = document.querySelector("#palindrome-form");
       let currentInput = "";

       
       input.onkeyup = myFunction
  
      function myFunction(){
        currentInput = document.querySelector("#text-input").value 
      }
Tags:

2

Answers


  1. 0

    maybe this would be better code:

           const input = document.querySelector("#text-input");
       const button = document.querySelector("#check-btn");
       const output = document.querySelector("#result");
       const form  = document.querySelector("#palindrome-form");
       let currentInput = "";

       
       input.addEventListener("input", myFunction)
  
      function myFunction(){
        currentInput = input.value 
      }
    Login or Signup to reply.
  2. 0

    So, this would be the straight forward answer: You can listen for the input event on the input element and update the variable currentInput:

    const form = document.forms.palindrome_form;
let currentInput = "";

form.text_input.addEventListener('input', e => {
  currentInput = e.target.value;
  console.log(currentInput);
});
    <h1>Check if your text is a Palindrome:</h1>
<div id="palindrome_checker">
  <p>Enter your text</p>
  <form id="palindrome_form">
    <input type="text" id="text_input" required value="">
    <button type="button" id="check_btn">Enter</button>
  </form>
</div>

    But, why have that extra variable when there is already a variable with the value. From anywhere in you JavaScript code you can ask for: form.text_input.value. That said, I guess you would like to update something when the value change. To either just add more event listeners:

    const form = document.forms.palindrome_form;

form.text_input.addEventListener('input', update_output);
form.text_input.addEventListener('input', test_palindrome);

function update_output(e){
  e.target.form.output.value = e.target.value;
}

function test_palindrome(e) {
  let str = e.target.value;
  if (str.length > 2) {
    let str2 = str.split("").reverse().join("");
    if (str == str2) {
      console.log('Palindrome!');
    }
  }
}
    <h1>Check if your text is a Palindrome:</h1>
<div id="palindrome_checker">
  <p>Enter your text</p>
  <form id="palindrome_form">
    <input type="text" id="text_input" required value="">
    <button type="button" id="check_btn">Enter</button>
    <output name="output"></output>
  </form>
</div>

    Or create a custom event when the value updates:

    const form = document.forms.palindrome_form;

form.text_input.addEventListener('input', e => {
  let event = new CustomEvent('textInput', {detail: e.target.value});
  document.dispatchEvent(event);
});

document.addEventListener('textInput', update_output);
document.addEventListener('textInput', test_palindrome);

function update_output(e){
  form.output.value = e.detail;
}

function test_palindrome(e) {
  let str = e.detail;
  if (str.length > 2) {
    let str2 = str.split("").reverse().join("");
    if (str == str2) {
      console.log('Palindrome!');
    }
  }
}
    <h1>Check if your text is a Palindrome:</h1>
<div id="palindrome_checker">
  <p>Enter your text</p>
  <form id="palindrome_form">
    <input type="text" id="text_input" required value="">
    <button type="button" id="check_btn">Enter</button>
    <output name="output"></output>
  </form>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search