這里比較新的程式員，不要太難判斷
長話短說，我正在嘗試為一個專案進行密碼強度測驗，但我認為如果我無法在點擊時輸入輸入然后將其放入我的函式中進行測驗，我將無法到達任何地方把它退回。
但我基本上被第一步難住了。
我現在的目標是讓火車滾動，是能夠單擊按鈕，然后將中間的大強度文本更改為“它有效”或類似的東西，找到一種呼叫函式的方法并正確使用它。
（僅供參考，我也在制作一個密碼生成器，就像一個二合一的交易，這就是為什么有一個額外的按鈕并且 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>uj5u.com熱心網友回復：
要使您的代碼正常作業，請更改此行：
let strength = "it worked"
至：
strength.innerHTML = "it worked"
要更改 html 元素的內容，您需要設定 .innerHTML 或 .innerText 屬性。或者，如果它是一個表單控制元件，如輸入或選擇，那么您將設定 .value。由于您已將元素的 ID 設定為強度，因此您可以使用它來參考元素。而strength.innerHTML = "它成功了！" 然后將更改螢屏上顯示的內容。
運行代碼片段以查看它是如何作業的。
function PasswordTest() {
document.getElementById("strength")
strength.innerHTML = "it worked"
// return strength; <-- not required
}<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>轉載請註明出處，本文鏈接：https://www.uj5u.com/net/488503.html
標籤：javascript html 功能 点击 getelementbyid