我无法更改 javascript 中 class 的显示

Question

我正在尝试更改 JavaScript 中元素的可见性。

我尝试运行 openloginHud(); 使用控制台 window 并且它以未定义的方式响应

我也试过使用控制台，它告诉我错误是

Uncaught TypeError: Cannot read properties of null (reading 'style') at openloginHud (index.js:20:40) at HTMLInputElement.onclick (index.html:13:110)

我的代码

HTML:

<div class="login"><input id="login" type="submit" name="login" onclick="openloginHud();" value="Login"/></div>
<div class="loginHud">
        <div class="inputs">
            <h1>Login</h1>
            <div class="email"><input type="email" name="email" id="email" placeholder="Email"></div>
            <div class="password"><input type="password" name="password" id="pass" placeholder="Password"></div>
            <div class="submit"><input id="submit" type="submit" name="Login" onclick="login();" value="Login"/></div>
        </div>
    </div>

JavaScript:

function openloginHud() {
    document.getElementById("loginHud").style.display = "block";
}

Css:

.inputs {
    background-color: rgb(94, 94, 94);
    position: absolute;
    display: none;
    left: 50%;
    top: 40%;
    transform: translate(-50%, -50%);
    padding: 0 100px;
    padding-top: 50px;
    padding-bottom: 100px;
    border-radius: 55px;
}

.inputs .email {
    padding-bottom: 15px;
}

.inputs .email input,
.inputs .password input {
    padding: 10px;
    background: none;
    outline: none;
    border: 5px solid white;
    border-radius: 15px;
    color: white;
}

.inputs .email input::placeholder,
.inputs .password input::placeholder {
    color: rgb(199, 199, 199);
}

.inputs h1 {
    color: white;
    font-size: 65px;
    text-align: center;
}

.inputs .password input,
.inputs .email input {
    height: 20px;
    width: 250px;
}

Answer 1

loginHud 是 class，不是 ID。您有 2 个选择：

如果只有一个元素带有 class，只需将其更改为 ID：

<div id="loginHud">

如果有多个元素，使用getElementsByClassName并循环：

for (let el of document.getElementsByClassName('loginHud')) {
    el.style.display = 'block';
}

Answer 2

改变 “document.getElementbyID” 至

function openloginHud() {
    document.querySelector(".loginHud").style.display = "block";
}

querySelector 允许您使用 css 选择器，例如“#”和“.”。它可以更轻松地在两种类型之间无缝切换。请记住使用 CSS 选择器，它会改变样式。

我无法更改 javascript 中 class 的显示

I cannot change the display on a class in javascript

html

javascript

css