我是js和学习方面的新手。请帮我更正代码。
输入为：
单选按钮-1；单选按钮-2；
输入字段集1；输入字段集2；输入字段提交。
我想要实现的是：
页面加载时，仅显示单选按钮1和单选按钮2。单击单选按钮-1 input-fields-set-1和input field submit（输入字段提交）将显示，但单击单选按钮-2 input-fields-set-2和input field submit（输入字段提交）将显示。
下面给出了完整的代码。在上面运行这些http://jsfiddle.net/ 它工作得很好，但是在一个网站上，点击任何一个单选按钮都不会出现任何东西。我已将代码上传到https://testing2601.000webhostapp.com/ 用于测试目的，但不起作用。
另外请注意，set-1和set-2中的所有输入字段都是必填字段。
完成.js和.html文件中的代码-
function ageCheck() {
if (document.getElementById('below').checked) {
document.getElementById('ifBelow').style.display = 'block';
document.getElementById('ifAbove').style.display = 'none';
document.getElementById('ifChecked').style.display = 'block';
}
else if (document.getElementById('above').checked) {
document.getElementById('ifBelow').style.display = 'none';
document.getElementById('ifAbove').style.display = 'block';
document.getElementById('ifChecked').style.display = 'block';
}
else {
document.getElementById('ifAbove').style.display = 'none';
document.getElementById('ifBelow').style.display = 'none';
document.getElementById('ifChecked').style.display = 'none';
}
}<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8" />
</head>
<body >
<div>
<form method="post" name="childDetails" action="example.php">
<div class="radioB">
<div class="a">
<input type="radio" onclick="javascript:ageCheck();" id="below" name="age" >
<label for="below">Age of my child is below 4 years.</label>
</div>
<div class="a">
<input type="radio" onclick="javascript:ageCheck();" id="above" name="age" >
<label for="above">Age of my child is above 4 years.</label>
</div>
</div>
<div id="ifBelow" class="set-1" style="display: none">
<div>
<input type="number" id="dob" name="dob" placeholder="DOB of Child in mmddyy" required />
</div>
<div>
<input type="text" id="name" name="name" placeholder="Name of the child" required />
</div>
<div>
<input type="email" id="email" name="email" placeholder="Your email" />
</div>
</div>
<div id="ifAbove" class="set-2" style="display: none">
<div>
<input type="number" id="age" name="age" placeholder="Age of your child" required />
</div>
<div>
<input type="text" id="name2" name="name2" placeholder="Name of the child" required />
</div>
<div>
<input type="text" id="hobby" name="hobby" placeholder="Hobby of your child" required />
</div>
<div>
<input type="email" id="email-2" name="email-2" placeholder="Your email" />
</div>
</div>
<div id="ifChecked" class="set-3" style="display: none">
<div class="set-3">
<input type="checkbox" id="proud" name="proud" required>
<label for="proud">I am a proud parent.</label>
</div>
<div>
<input type="submit" name="submit" value="Submit" class="primary" />
</div>
</div>
</form>
</div>
<script type="text/javascript" src="/assets/js/main.js"></script>
</body>
</html>
1条答案
按热度按时间qyswt5oh1#
当我看到你的代码在https://testing2601.000webhostapp.com/ ，我看到您的javascript代码（来自main.js）如下所示，如果是这样的话
ageCheck未连接到全局，因此无法定义供您的html使用，这是它不起作用的根本原因。