我如何将函数称为单击，同时也更改函数之外的文本的值

发布于 2025-02-06 00:25:39 字数 3184 浏览 2 评论 0原文

长话短说，我正在尝试为项目进行密码强度测试，但是我认为如果我不能单击输入，然后将其放入我的功能中以进行测试，然后将其发送回去。

但是我基本上是第一步。

我目前的目标是要单击该按钮，然后在中间更改为“工作”或类似的东西，以找到一种调用该功能的方法并正确使用它。

（仅供参考，我还为一个交易中的两个交易做了一个密码生成器，这就是为什么有一个额外的按钮，而CSS文件具有一些“冗余”代码）

任何帮助都非常感谢＆lt; 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 class="container">
    <h1 class="title">Password Strength Test</h1>
    <input type="text" class= "password" value= "password" id="password">
    <form id="passwordGeneratorForm" class="form">
      <h1 id="strength">Strength</h1>
      <button type="button" class="button" onclick="PasswordTest()" id="btn">Check Strength</button>
      <a href="index.html" class="btn" 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>

原文

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 class="container">
    <h1 class="title">Password Strength Test</h1>
    <input type="text" class= "password" value= "password" id="password">
    <form id="passwordGeneratorForm" class="form">
      <h1 id="strength">Strength</h1>
      <button type="button" class="button" onclick="PasswordTest()" id="btn">Check Strength</button>
      <a href="index.html" class="btn" 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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

面如桃花 2025-02-13 00:25:39

为了使您的代码工作更改以下行：

let strength = "it worked"

to：

strength.innerHTML = "it worked"

要更改HTML元素的内容，您需要设置.innerhtml或.innertext属性。或者，如果它是表单控件，例如输入或选择，则将设置。值。而且，由于您将元素的ID设置为强度，因此可以使用它来引用元素。 and strongth.innerhtml =“它工作！”然后将更改屏幕上显示的内容。

运行片段以查看其工作原理。

function PasswordTest() {
  strength.innerHTML = "it worked"
}

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

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() {
  strength.innerHTML = "it worked"
}

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

回复收藏 0 原文

~没有更多了~