js执行后在html中显示字符串

Question

所以，我试图创建一个帐户系统，我创建了一个有效的登录系统，但是当你输入错误的凭据时，我希望它在 ab 的值中显示“错误的用户名或密码”为空

标签，问题是我不知道如何访问

来自 app.js（node.js 项目）的标签

<div class="form">          
      <form class="login-form" action="/account" method="post">
        <p id = "check"></p>
        <h1 id = "login-text">Login</h1>
        <label style="color:white;">Username:</label>   
        <input type="text" id = "username" placeholder="Enter Username" name="username" required>
        <label style="color:white;">Password:</label>  
        <input type="password" id = "password" placeholder="Enter Password" name="password" required>
        <button type="submit">Login</button>
        <a href="register"><h5>register</h5></a>
      </form>
    </div>
  </div>

app.post('/account', (req, res) => { 
  const username = req.body.username;
  const password = req.body.password;
  con.query("USE discbin")
  con.query('SELECT * FROM accounts WHERE username = ?', [username], function (err, result, fields) {
    if (err) throw err;
      if (result.length > 0 && result[0].password === password) {
        console.log(result[0].username + " logged in!")
        res.render('account');
      }
      else {
        console.log("a user tried to login using the username: " + username)
        //set <p> to "wrong username or password"
      }
    });
  });

Answer 1

document.getElementById("check").textContent = "wrong username or password";

1. 获取要更新的元素document.getElementById("check")
2. 将其textContent 属性设置为您要使用的文本

Answer 2

我认为这是XY problem。 据我所知，直接从服务器访问 DOM 元素是不可能的，但是，您可以在客户端使用一点 JavaScript 来实现相同的结果。

例如，服务器响应可能是认证成功后的 JSON 对象：

{
  auth: true,
  //some token I guess...
}

身份验证失败：

{ auth: false }

然后，您可以使用 JavaScript 访问您想要的元素并使用 innerHTML 方法修改其内容。 在您的情况下，您可以存储要显示的字符串并根据服务器响应对其进行修改。

let checkStringVariable = "";

服务器响应：

checkStringVariable = response.auth ? "" : "wrong username or password";
document.getElementbById("check").innerHTML = checkStringVariable;