我正在學習如何使用JavaScript和HTML進行網頁設計的不同事情,並且遇到了一個我無法弄清楚的問題,而且當我尋找時似乎找不到一個辦法。使用複選框更新輸入文本字段
我正在製作一個簡單的複選框表格,您可以在其中詢問問題,選擇答案並根據您的答案更新答案。用戶可以單擊這些框,並且響應將始終更新。我現在只有一個函數在我的JS中,因爲我在寫另外兩個函數之前先試着讓它工作。這是我的。
function StrengthCheckbox() {
var strengthCheckYes = document.getElementById("strengthCheckYes");
var strengthCheckNo = document.getElementById("strengthCheckNo");
if (strengthCheckYes === document.getElementById("strengthCheckYes").checked) {
document.getElementById("checkboxStrengthResponse").value = "You wrestled Putin in your past life didn't you?";
} else if (strengthCheckNo === document.getElementById("strengthCheckNo").checked) {
document.getElementById("checkboxStrengthResponse").value = "That could be a problem sometime in the future";
} else if ((strengthCheckYes === document.getElementById("strengthCheckYes").checked) && (strengthCheckNo === document.getElementById("strengthCheckNo").checked)) {
document.getElementById("checkboxStrengthResponse").value = "So which is it? Yes or No? Stop playing around!";
}
};
<thead>
<th colspan="3">Checkbox Version</th>
</thead>
<tbody>
<tr>
<td>
<p>Question</p>
</td>
<td>
<p>Answer</p>
</td>
<td>
<p>My Response</p>
</td>
</tr>
<tr>
<td>
<p>Can you fight with your bare hands?</p>
</td>
<td>
<input type="checkbox" id="strengthCheckYes" onchange="StrengthCheckbox()">YES</input>
<input type="checkbox" id="strengthCheckNo" onchange="StrengthCheckbox()">NO</input>
</td>
<td>
<input type="text" id="checkboxStrengthResponse" size="60px" disabled></input>
</td>
</tr>
<tr>
<td>
<p>Are you able to outrun a flying car?</p>
</td>
<td>
<input type="checkbox" id="speedCheckYes" onchange="SpeedCheckbox()">YES</input>
<input type="checkbox" id="speedCheckNo" onchange="SpeedCheckbox()">NO</input>
</td>
<td>
<input type="text" id="checkboxSpeedResponse" size="60px" disabled></input>
</td>
</tr>
<tr>
<td>
<p>Can you out play a super AI in chess?</p>
</td>
<td>
<input type="checkbox" id="intelligenceCheckYes" onchange="IntelligenceCheckbox()">YES</input>
<input type="checkbox" id="intelligenceCheckNo" onchange="IntelligenceCheckbox()">NO</input>
</td>
<td>
<input type="text" id="checkboxIntelligenceResponse" size="60px" disabled></input>
</td>
</tr>
</tbody>
</table>
任何幫助是值得歡迎的。此外,我不知道jQuery,我敢肯定它可以使用它來完成,但如果可以的話,我只想要JS答案。
有什麼問題嗎? – Liam
你有什麼樣的方程式,如果我認爲它們不相等,你必須改變你的左手邊。例如strengthCheckYes.checked === ... –