根据输入字段中是否有值，应该显示/隐藏一个按钮

Question

Right now the button shows when input is added to the input field, but if I remove the input the button doesn't hide.

My only idea for a solution is to divide the function into 2 seperate ones. That is, one that adds the input to the input field on click, and then another functions that keeps track of input.val, and controls the hide/show effect of the button.

Would that be a better way of doing it?

$("#peopleInPopup").on('click', '.list-group-item', function() {
  var peopleName = $(this).children("span").text();
  var peopleID = $(this).children("span").attr("class");
  var input = $("#friendsNames");
  input.val(input.val() + peopleName + "");
  if (input.val().length === 0) {
    $("#checkButton").toggle(false);
    console.log("button should NOT display");
  } else {
    console.log("button should display");
    $("#checkButton").toggle(true);
  }
  $("#checkButton").click(function() {
    var newParticipants = input.val();
    socket.emit("addParticipantsToConversation", newParticipants);
    $("#chatToInfo").append(", ", input.val());
    $("#friendsNames").val("");
    $(":mobile-pagecontainer").pagecontainer("change", $("#pagefour"), {
      transition: "slidedown"
    });
  });
});

Answer 1

Just use show and hide from jQuery instead, perhaps? I assume you want this to happen as the input is changing, so I've thrown in keyup (could use onChange or alternatives).

Tweaking your code slightly...

$('input').on('keyup', function (event) {
  let value = event.target.value;

  if (value && value !== '' && value.length > 0) {
    $('#myButton').show();
  } else {
    $('#myButton').hide();
  }
})

With a markup...

<input id='input' />
<button id='myButton'>GO</button>

And some sort of base style...

#go {
  display: none;
}

Do the trick?

Answer 2

I actually just found a solution to my problem. The code below makes it work:

 $("#peopleInPopup").on('click', '.list-group-item', function(){ var peopleName = $(this).children("span").text(); var peopleID = $(this).children("span").attr("class"); var input = $("#friendsNames"); input.val(input.val() + peopleName + ""); $("#checkButton").toggle(true); $("#friendsNames").on('input', function(event) { if (this.value.length === 0) { console.log("Works!"); $("#checkButton").toggle(false); console.log("button should NOT display"); } else { console.log("button should display"); $("#checkButton").toggle(true); } }); $("#checkButton").click(function(){ var newParticipants = input.val(); socket.emit("addParticipantsToConversation", newParticipants); $("#chatToInfo").append(", ",input.val()); $("#friendsNames").val(""); $(":mobile-pagecontainer").pagecontainer("change", $("#pagefour"), { transition: "slidedown" }); }); });