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

Question

So, im trying to create a accounts system, i made a login system that works, but when you enter wrong credentials i want it to display "wrong username or password" in the value of ab empty

tag, the thing is that i dont know how to access the

tag from app.js (node.js project)

<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. Get the element you want to update document.getElementById("check")
2. Set its textContent property to the text you want to use

Answer 2

I think this is an XY problem . As far as I know, it is not possible to access a DOM element directly from the server, however, you can achieve the same result with a little JavaScript on the client side.

For example the server response could be on authentication success a JSON object like that:

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

and on authentication fail:

{ auth: false }

Then, you can use JavaScript to access the element you want and modify its content using the innerHTML method. In your case, you could store the string to be displayed and modify it according to the server response.

let checkStringVariable = "";

On server response:

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