How make input RESET Button?-CodePudding

How make input RESET Button?

INFO: Hi I'm trying to do that if I click on my input which has the ID search-input so that if I write something in the input then class cancel which is the cross that resets the value it's like <button type =" reset "> so if I write something so that it appears to me sodisplay: block;and if I delete or input it won't have a value to dodisplay: none;and I would like to do all this to make it work even if the user doesn't have Javascript so I would like to do it in PHP version but I don't know what I have so far I only have this code which shows the icon when something is in the input but unfortunately the code has stopped working and especially when I delete the input via the button so the icon doesn't disappear for more information be sure not to be afraid to ask.

const input = document.getElementById("search-input")
const button = document.getElementById("cancel")
const icon = document.getElementById("icon")

input.addEventListener('keyup', test);
button.addEventListener("button", test)

function test() {
  let isShown = false

  if (input.value.trim() == "" || isShown == false) {
    icon.style.display = "none"
    isShown = true
  } else {
    icon.style.display = "flex"
  }
}

PS: Everything was translated by Google translator if there was a mistake or you did not understand something write and I will definitely tell you how it should be thought in advance thank you very much for your help.

CodePudding user response：

I think Uttam Nath's answer was close to what you wanted but not exactly. This may work better:

EDIT: Alright I changed the code a bit and I added the HTML with it so there is no confusion.

<body>
  <input type="text" id="search-input">
  <button type="button" id="cancel">Cancel</button>
  <div id="icon" style="background-color: green; width: 50px; height: 50px; display: none;"></div>
</body>
<script>
const input = document.getElementById("search-input");
const button = document.getElementById("cancel")
const icon = document.getElementById("icon");

input.addEventListener('keyup', changeIconDisplay);

button.addEventListener('click', () => {
  input.value = '';
  changeIconDisplay();
});

function changeIconDisplay() {
  if (input.value.trim() == "" ) {
    icon.style.display = "none";
  } else {
    icon.style.display = "flex";
  }
}
</script>