javascript - 禁用按钮,直到用户单击复选框 | JavaScript
问题描述
我希望在用户通过单击复选框同意游戏规则之前,禁用 User-Id 下方的按钮。我已经有一个朋友发送的代码。但我的问题是它在实际页面上不起作用。我认为不是因为 JS 脚本在 HTML 脚本中没有正确连接。如何正确连接脚本?
这是JavaScript的代码:
function input(event) {
const checked = document.getElementById("startgame").checked;
const button = document.getElementById("startbutton");
if (checked) {
button.disabled = false;
return;
alert("Herzlichen Glückwunsch! Sie haben sich erfolgreich angemeldet. Das Spiel beginnt, sobald sie den Knopf betätigen.")
} else
button.disabled = true;
alert("Es tut us leid. Jedoch müssen Sie zuerst unsere Regeln akzeptieren.")
}
这是我的 HTML 脚本:
<div class="quiz-menu" data-aos="fade-up" data-aos-duration="3000">
<div class="rules">
<h1 class="rules-title"><i class="fas fa-scroll"></i> RULES!</h1>
<p class="rules-text">
<center>
<b>
Damit das Quiz Ihnen nicht zu einfach gemacht wird; gibt es ein paar Regeln. Lesen Sie diese bitte durch:
</b>
</center>
</p>
<p class="rules-list">
1. Hilfsmittel (wie z.B. Websiten) werden blockiert;
<br>
<br />
2. Sie haben <i>alle Zeit der Welt</i>. Überstressen Sie sich also nicht und denken sie mit Ruhe nach.
<br><br />
3. Seien Sie nicht enttäuscht, wenn sie fehler haben. Sie können diesen Test jeder Zeit wiederholen -
und sich verbessern.
</p>
</div>
<div class="user-id">
<div class="user-background" data-aos="flip-down" data-aos-duration="3000">
<h2 class="user-title">USER-ID</h2>
<p class="user-text">
Damit Sie unseren Highscore auch richtig nutzen können,
bitten wir sie, dass sie sich einen Usernamen ausdenken.
</p>
<form action="/action_page.php" class="quizform">
<label for="nname" class="formtext"><b>Nickname:</b></label><br>
<input type="text" id="fname" name="nname" value="Dein Username">
<br><br />
<input type="checkbox" id="startgame" name="startgame" value="startgame">
<label for="startgame"> Um das Spiel zu starten, muss du die Checkbox ankreuzen</label><br>
<br>
</form>
</div>
</div>
<div>
<a href="kategorieeins.html" class="quiz-button" id="startbutton"><span><i class="fas fa-play"></i> quiz starten</span></a>
</div>
</div>
解决方案
你有函数 input(event)然后在复选框更改事件上调用它,就像使用下面的代码片段
<input type="checkbox" id="startgame" name="startgame" value="startgame" onchange="input(this)">
你必须在标签内添加按钮,这样你就可以在复选框选择时启用它,所以我用这个更改你的标签
<a href="kategorieeins.html" class="quiz-button"><button id="startbutton" disabled><i class="fas fa-play"></i> quiz starten</button></a>
这是一个工作演示,希望易于理解。
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
function input(event) {
const checked = document.getElementById("startgame").checked;
const button = document.getElementById("startbutton");
if (checked) {
button.disabled = false;
return;
alert("Herzlichen Glückwunsch! Sie haben sich erfolgreich angemeldet. Das Spiel beginnt, sobald sie den Knopf betätigen.")
} else
button.disabled = true;
alert("Es tut us leid. Jedoch müssen Sie zuerst unsere Regeln akzeptieren.")
}
function showAlert()
{
alert("Herzlichen Glückwunsch! Sie haben sich erfolgreich angemeldet. Das Spiel beginnt, sobald sie den Knopf betätigen.")
}
</script>
</head>
<body>
<div class="quiz-menu" data-aos="fade-up" data-aos-duration="3000">
<div class="rules">
<h1 class="rules-title"><i class="fas fa-scroll"></i> RULES!</h1>
<p class="rules-text">
<center>
<b>
Damit das Quiz Ihnen nicht zu einfach gemacht wird; gibt es ein paar Regeln. Lesen Sie diese bitte durch:
</b>
</center>
</p>
<p class="rules-list">
1. Hilfsmittel (wie z.B. Websiten) werden blockiert;
<br>
<br />
2. Sie haben <i>alle Zeit der Welt</i>. Überstressen Sie sich also nicht und denken sie mit Ruhe nach.
<br><br />
3. Seien Sie nicht enttäuscht, wenn sie fehler haben. Sie können diesen Test jeder Zeit wiederholen -
und sich verbessern.
</p>
</div>
<div class="user-id">
<div class="user-background" data-aos="flip-down" data-aos-duration="3000">
<h2 class="user-title">USER-ID</h2>
<p class="user-text">
Damit Sie unseren Highscore auch richtig nutzen können,
bitten wir sie, dass sie sich einen Usernamen ausdenken.
</p>
<form action="/action_page.php" class="quizform">
<label for="nname" class="formtext"><b>Nickname:</b></label><br>
<input type="text" id="fname" name="nname" value="Dein Username">
<br><br />
<input type="checkbox" id="startgame" name="startgame" value="startgame" onchange="input(this)">
<label for="startgame"> Um das Spiel zu starten, muss du die Checkbox ankreuzen</label><br>
<br>
</form>
</div>
</div>
<div>
<a href="kategorieeins.html" class="quiz-button"><button onclick="showAlert()" id="startbutton" disabled><i class="fas fa-play"></i> quiz starten</button></a>
</div>
</div>
</body>
</html>
推荐阅读
- python - 当一个包含 ids 并且第二个包含与该 id 关联的名称时,需要帮助来合并两个 sql 表
- angular5 - Angular 5 应用程序有时会在浏览器中加载旧版本,我在构建产品时进行了哈希处理,如何从服务器加载 Angular 5 应用程序加载?
- java - 在我的 Java 应用程序中记录配置
- javascript - 如何使此悬停字幕正常工作?
- javascript - 在对象上使用 lodash 地图时如何获取迭代次数?
- r - 如何使用列表中的 tibbles 和 tibbles 展平列表以使所有 tibbles 处于同一级别?
- solr - Websphere Commerce 8 SOLR 中的类别名称搜索
- html2canvas - 将html2canvas图像发送到ajax的问题
- r - 经纬度县平均值
- webhooks - Reddit 是否有任何 Webhook 可以捕获消息?