disable button if the input field is empty and enable if there is text-CodePudding

I am a new learner and I am facing a problem. I want to create a simple messaging app and I want that if there is no text inside the inputfield then the button should be disabled. help me out. here is the code

<body>
    <div id="messages"></div>
    <input type="text" id="val" />
    <button id="sendMessage">Send</button>
    <script src="app.js" type="text/javascript"></script>
  </body>

js code

let sendMessage = document.getElementById("sendMessage");
sendMessage.addEventListener("click", () => {
  let val = document.getElementById("val");
  let p = document.createElement("p");
  let pTxt = document.createTextNode(val.value);
  p.appendChild(pTxt);
  val.value = "";
  let messages = document.getElementById("messages");
  messages.appendChild(p);
  if (val.value === "") {
    sendMessage.disabled = true;
  } else {
    sendMessage.disabled = false;
  }
});

CodePudding user response：

You should use input event to set disabled to false or true. Set disabled to true by default and after button was clicked.

let sendMessage = document.getElementById("sendMessage");
let input = document.getElementById("val");

sendMessage.addEventListener("click", () => {
  let val = document.getElementById("val");
  let p = document.createElement("p");
  let pTxt = document.createTextNode(val.value);
  p.appendChild(pTxt);
  val.value = "";
  let messages = document.getElementById("messages");
  messages.appendChild(p);
  sendMessage.disabled = true;
});

input.addEventListener("input", () => {
  if(input.value.length > 0){
     sendMessage.disabled = false;
  } else {
    sendMessage.disabled = true;
  }
});

<body>
   <div id="messages"></div>
   <input type="text" id="val"/>
   <button id="sendMessage" disabled>Send</button>
   <script src="app.js" type="text/javascript"></script>
</body>

CodePudding user response：

Simply create a disabled class for the button if you use custom button. Then listen to the input change and toggle the class on button if the input have value.

With your code :

const button = document.getElementById('sendMessage');
const input = document.getElementById('message-input');
const messagesBox = document.getElementById('messages');

const toggleButton = () => sendMessage.disabled = input.value === '';

//Run once when start the script
toggleButton();

input.addEventListener('keyup', toggleButton);
button.addEventListener('click', () => {
  let p = document.createElement('p');
  let pTxt = document.createTextNode(input.value);
  p.appendChild(pTxt);
  messagesBox.appendChild(p);
});

<body>
   <div id="messages"></div>
   <input type="text" id="message-input" />
   <button id="sendMessage">Send</button>
   <script src="app.js" type="text/javascript"></script>
</body>

CodePudding user response：

Set a keyup handler for the input field and a click handler for the button. In the snippet event delegation is used.

document.addEventListener(`keyup`, handle);
document.addEventListener(`click`, handle);

function handle(evt) {
  const isInput = evt.target.closest(`#val`);
  if (isInput) {
    const bttnActivator = isInput.value.trim() ? 
      `removeAttribute` : `setAttribute`;
    return document
      .querySelector(`#sendMessage`)[bttnActivator](`disabled`, `disabled`);
  }
  if (evt.target.closest(`#sendMessage`)) {
    const inputField = document.querySelector(`#val`); 
    const bttn = document.querySelector(`#sendMessage`);
    document.body.insertAdjacentHTML(`beforeend`, 
      `<p>Your input: ${inputField.value.trim()}</p>`);
    inputField.value = ``;
    inputField.focus();
    return bttn.setAttribute(`disabled`, `disabled`);
  } 
}

<div id="messages"></div>
<input type="text" id="val" />
<button id="sendMessage" disabled>Send</button>