如果字符长度小于 8，则显示隐藏元素答案

【问题标题】：Show hidden element if their character length is less than 8如果字符长度小于 8，则显示隐藏元素
【发布时间】：2021-07-03 17:46:24
【问题描述】：

我有一个名为 ShowUsername 的隐藏元素，如果用户输入的用户名少于 8 个字符，我想显示该元素。如果有人可以帮助我，我似乎无法弄清楚这一点。我目前隐藏了该元素，如果字符串输入为 8 个或更多字符，它会保持隐藏状态。

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;
  }
}

【问题讨论】：

可以分享一下html吗？
我冒昧地使用您提供的 JavaScript 代码添加了堆栈片段。你可能想edit你的问题，并在sn-p（下面应该有一个“编辑上面的sn-p”链接）添加HTML元素，以便人们可以重现问题。
请注意，ShowUsername.display; 什么都不做。如果你有一个 ID 为 "ShowUsername` 的 HTML 元素，你可以使用 ShowUsername.style.display = "block";...
隐藏，display:none;，或<input type='hidden' />是什么意思？

标签： javascript html visibility display hidden-field

【解决方案1】：

请像这样尝试。

ShowUsername.style.display = 'block';

【讨论】：

【解决方案2】：

在html中使用style="display:none;"设置默认显示并使用style.display = 'block'或style = 'display:block;'显示

例子

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>

【讨论】：