这里的程序员比较新,不要太难判断
长话短说,我正在try 为一个项目进行密码强度测试,但我想如果我不能在单击时获取输入,然后将其放入我的函数中,然后测试并发送回来,我将无法获得任何结果.
但我基本上在第一步就被难住了.
我现在的目标是让火车开动,就是能够单击按钮,然后将中间的大强度文本更改为"it worked"或类似的内容,以找到调用函数并正确使用它的方法.
(仅供参考,我也在为二合一交易制作一个密码生成器,这就是为什么有一个额外的按钮,css文件有一些"冗余"代码的原因)
非常感谢您的帮助<;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>