Show hidden element if their character length is less than 8

Question

I have a hidden element called ShowUsername that I want to show if the user inputs a username that is less than 8 characters. I can't seem to figure this out if someone could help me out. I currently have the element hidden and it stays hidden if the string input is 8 or more characters.

var myPassword = document.getElementById("Password");
var myUserName = document.getElementById("Username");

document.getElementById("frmRegister").onsubmit = function() {

  <!-- Username must be 8 or more characters -->
  if (myUserName.value.length >= 8) {
    alert("YOur Username was saved");
  } else {
    ShowUsername.display;
  }
}

I've taken the liberty of adding a Stack Snippet with the JavaScript code you had provided. You may want to [edit] your question, and the snippet (there should be a "edit the above snippet" link below it) to add the HTML elements so that people can reproduce the issue. — Heretic Monkey, Apr 07 '21 at 21:15
Note that `ShowUsername.display;` does nothing. If you have an HTML element with the ID "ShowUsername` you could get away with `ShowUsername.style.display = "block";`... — Heretic Monkey, Apr 07 '21 at 21:17

score 0 · Answer 1 · answered Apr 07 '21 at 21:17

0

Please try like this.

ShowUsername.style.display = 'block';

answered Apr 07 '21 at 21:17

score 0 · Answer 2 · answered Apr 07 '21 at 21:32

set the default display in html using style="display:none;" and use style.display = 'block' or style = 'display:block;' to show

example

window.btn.onclick = function() {
  if (window.Username.value.length >= 8) {
    window.ShowUsername.style = 'display:none;';
    console.log("YOur Username was saved");
  } else {
    window.ShowUsername.style = 'display:block;';
  }
}

<input id="Username">
<div id="ShowUsername" style="display:none;"> min 8 chars</div>
<div><button id="btn" type="button">BTN</button></div>

Show hidden element if their character length is less than 8

2 Answers2