How do I call a function onclick, while also changing the value of the text outside of the function-CodePudding

Relatively new programmer here, don't judge too hard

Long story short, I'm trying to make a password strength test for a project, but I figured I won't be able to get anywhere if I cant take an input on click and then put it into my function to then test it and send it back.

But I got stumped on basically the first step.

My goal as of right now to get the train rolling, is to be able to click the button, and then have the big strength text in the middle change to "it worked" or something like that, to find a way to call the function and use it properly.

(FYI, I was making a password generator as well for like a two in one deal, thats why theres an extra button and the css file has some "redundant" code)

Any help is massively appreciated <3

/* Background color   text colour and centering */
body {
    background-color: black;
    color: black;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0%;
    font-family: Arial, Helvetica, sans-serif;
}
/* div block */
.container {
    background-color: yellow;
    padding: 3rem;
    border: 2px solid white;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
/* spacing out text and inputs */
.form {
    display: grid;
    grid-template-columns: auto auto;
    row-gap: 1rem;
    column-gap: 3rem;
    justify-content: center;
    align-items: center;
}

.title {
    text-align: center;

}

/* Making text easier to see/read */
label {
    font-weight: bold;
}
.characteramountrange {
    display: flex;
}

.number-input {
    width: 2rem;
}

/*display box*/
.password-display {
    background-color: white;
    color: black;
    padding: 1rem;
    border: 1px solid black;
    height: 2rem;
    width: 350px;
    display: flex;
    justify-content: center;
    align-items: center;
    word-break: break-all;
}
/* Customizing the style of the "Generate" Button */
.button {
    grid-column: span 2;
    background-color: white;
    border: 2px solid black;
    color: black;
    padding: .5rem 1rem;
    font-weight: bold;
    cursor: pointer;
}

.button:hover {
    background-color: #FFFFFF33;
}
/* redirect button */
.btn {
    background-color: white;
    border: 2px solid black;
    color: black;
    font-weight: bold;
    cursor: pointer;
    padding: 5px;
}
.btn:hover {
    background-color: #FFFFFF33;
}

   
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="styles.css">
  <title>Password Strength Test</title>
</head>
<body>
  <div >
    <h1 >Password Strength Test</h1>
    <input type="text" class= "password" value= "password" id="password">
    <form id="passwordGeneratorForm" >
      <h1 id="strength">Strength</h1>
      <button type="button"  onclick="PasswordTest()" id="btn">Check Strength</button>
      <a href="index.html"  style="text-decoration: none;">Password Generator</a>
    </form>
    <script>
      function PasswordTest() {
        document.getElementById("strength")
        let strength = "it worked"
        return strength;
      }
    </script>
    </section>
  </div>
</body>
</html>

CodePudding user response：

To make your code work change this line:

let strength = "it worked"

to:

strength.innerHTML = "it worked"

To change the content of an html element you need to set the .innerHTML or .innerText property. Or if it is a form control, like an input or a select, then you would set the .value. And since you've set the ID of the element to strength you can use that to reference the element. And strength.innerHTML = "It worked!" will then change what appears on the screen.

Run the snippet to see how it works.

function PasswordTest() {
  document.getElementById("strength")
  strength.innerHTML = "it worked"
  // return strength; <-- not required
}

<input type="text"  placeholder="password" id="password">
<h1 id="strength">Strength</h1>
<button type="button"  onclick="PasswordTest()" id="btn">Check Strength</button>