JavaScript (eventlistner or something)

Question

I have a simple html with a input box(id=input) and a button(id=button) with 'Show' as button's text. I have wrote JavaScript to change show to hide on click and basic stuff.

Initinally , no button is displayed (as button display is none). What I want is as soon as I type anything in the input box Show button should display. How to do so in JavaScript?

Here is my JavaScript:-

let input = document.getElementById('input');
let btn = document.getElementById('button');

btn.addEventListener('click', () => {
    if (btn.innerText === "SHOW") {
        btn.innerText = "HIDE";
        input.type = "text";
    } else {
        btn.innerText = "SHOW";
        input.type = "password";
    } 
})

Have you tried adding an [`input` event listener](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event) to the input (`id="input"`) and checking if it's value is empty or not (`if (input.value)`)? — nick zoum, Jan 04 '22 at 11:25
Instead of _describing_ your code ("I have a simple html with a input box(id=input) and a button(id=button)") could you please edit your question and add the _actual_ code? — Jeremy Thille, Jan 04 '22 at 11:29

Deepesh Nair · Answer 1 · 2022-01-04T11:54:08.740

The below snippet shows and hides button according to the data that is inside the input

Also this is the event you were looking for https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event

document.querySelector("#pass").addEventListener('input', 
(event) => 
  {
    if (document.querySelector("#pass").value.length === 0 ) {
     document.querySelector("#btn").style.display = 'none';
    } else {
    document.querySelector("#btn").style.display = 'inline-block'; 
    }
    
  }
);

#btn { display: none; }

<input id="pass"> 
<button id="btn"> Show </button>

The below code should help you for the question you have asked (i.e. it will not automatically hide the button )

document.querySelector("#pass").addEventListener('input', () => {
  document.querySelector("#btn").style.display = 'inline-block';
});

#btn {
 display: none;
}

<input id="pass">
<button id="btn"> Show </button>

score 0 · Answer 2 · answered Jan 04 '22 at 12:30

0

If I understood your question correctly, you should add a change eventlistener to input field. so that, when there is a change in input field, you can decide what to do.

input.addEventListener("change", function(){
if (input.value !== ""){
   // do something
   } else {
    do something else
   }
} )

answered Jan 04 '22 at 12:30

Deniz Karadağ

751
3
8

I don't know if this was actually what you were asking – Deniz Karadağ Jan 04 '22 at 12:31

score 0 · Answer 3 · answered Jan 04 '22 at 13:07

The below snippet is the working model of what u asked

please try to a avoid using innerText, innerHTML nor the on* attributes.

reference :

let input = document.getElementById('dataEntry')
let displayButton = document.getElementById('btn')

document.addEventListener('input', () => {
  if (input.value.length === 0) {
    displayButton.style.display = 'none';
  } else {
    displayButton.style.display = 'inline-block';
  }
})

displayButton.addEventListener('click', (event) => {
  if (event.target.textContent.toLowerCase() === 'hide') {
    input.type = 'password'
    event.target.textContent = 'Show'
  } else {
    input.type = 'text'
    event.target.textContent = 'Hide'
  }
})

.container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#btn {
  display: none;
}

<div class='container'>
  <input type='text' id='dataEntry' placeholder='Enter your password' required/>
  <button id='btn'>Hide</button>
</div>

JavaScript (eventlistner or something)

3 Answers3