如何仅在使用JavaScript聚焦特定输入时显示div块？

我尝试在JavaScript中使用

onfocus

函数在.php文件（使用bootstrap 4设计）中聚焦密码字段时显示一个块，但是当我单击PassSwarm字段时，什么也没有发生

我尝试使用jQuery代码进行同样的操作，但仍然没有得到任何结果

var myInput=document.getElementById（“密码”）；
var字母=document.getElementById（“字母”）；
var资本=document.getElementById（“资本”）；
var编号=document.getElementById（“编号”）；
var length=document.getElementById（“长度”）；
myInput.onfocus=函数（）{
document.getElementById（“message”）.style.display=“block”；
}
myInput.onblur=函数（）{
document.getElementById（“消息”）.style.display=“无”；
}

小写字母
大写字母
一个数字

至少8个字符

您的代码可能存在三个问题

1）

表单组

div未关闭，因此您的浏览器可能错误地解释了代码，弄乱了其结构

2） 页面加载时，未触发任何事件；因此，默认情况下，

消息

div将可见。当您将注意力集中在

密码上时，然后取消对密码的关注，
消息
确实会消失。要解决此问题，请将
style=“display:none；”“
添加到您的
消息中

3） 最重要的是，您的脚本需要在文档加载后执行。通过将所有脚本放入JQuery document.ready函数中，可以轻松完成此操作：

$（函数（）{
//在这里执行所有操作。此函数仅在文档准备就绪后执行。
}

或者，正如我所做的，只需将
脚本
标记放在页面底部。这样，脚本将在页面其余部分加载后加载

原因很简单。当浏览器加载页面时，它会或多或少地一个一个地加载每个元素。脚本一加载就执行。因此，如果脚本在加载其余HTML之前运行，则不会发生任何事情



小写字母
大写字母
一个数字

至少8个字符
//这是我的javascript代码
var myInput=document.getElementById（“密码”）；
var字母=document.getElementById（“字母”）；
var资本=document.getElementById（“资本”）；
var编号=document.getElementById（“编号”）；
var length=document.getElementById（“长度”）；
myInput.onfocus=函数（）{
document.getElementById（“message”）.style.display=“block”；
}
myInput.onblur=函数（）{
document.getElementById（“消息”）.style.display=“无”；
}
这应该可以做到：


const$=（选择器）=>document.querySelector（选择器）；
常量输入=$（“#密码”）；
常量消息=$（'.message'）；
input.addEventListener（'focus'，（e）=>{
message.style.display='block'；
});
input.addEventListener（'blur'，（e）=>{
message.style.display='none'；
})；
。消息{
显示：无；
}

小写字母
大写（大写）字母
数字
至少8个字符
您的代码工作正常。当我单击DIV显示的输入字段时，当我从中单击时，DIV消失。但是在我的服务器上没有发生任何事情，我使用的是Wamp服务器，您的代码也对我起作用。我会检查是否还有其他地方可以处理这些事件。我猜有另一个事件处理程序正在调用stopProp服务器不重要，此代码完全在浏览器中运行。JavaScript控制台中是否有任何错误？