所以你是我最后的希望。
我需要创建一个验证名称和电子邮件的测验。一旦验证了名称和电子邮件，那么测验就会显示出来。事情是，当我把我的代码
function changeStyle() {
if (document.getElementById('quiz').style.display == "none") {
document.getElementById('quiz').style.display = "block";
} else {
document.getElementById('quiz').style.display = "none";
}
}
in，我的if / else语句不起作用。在if / else语句之外运行此代码可以正常工作，只需单击按钮即可。 if / else语句中的警报也会运行，之后的其余脚本也会运行。它似乎只是忽略了这个脚本。这是我使用的Jquery：
$(document).ready(function() {
$('#contact_name').on('input', function() {
var input = $(this);
var re = /^[A-Za-z0-9]+ [A-Za-z0-9]+$/;
var is_name = re.test(input.val());
if (is_name) {
input.removeClass("invalid").addClass("valid");
} else {
input.removeClass("valid").addClass("invalid");
}
});
$('#contact_email').on('input', function() {
var input = $(this);
var re = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
var is_email = re.test(input.val());
if (is_email) {
input.removeClass("invalid").addClass("valid");
} else {
input.removeClass("valid").addClass("invalid");
}
});
$("#contact_submit button").click(function(event) {
var form_data = $("#contact").serializeArray();
var error_free = true;
for (var input in form_data) {
var element = $("#contact_" + form_data[input]['name']);
var valid = element.hasClass("valid");
var error_element = $("span", element.parent());
if (!valid) {
error_element.removeClass("error").addClass("error_show");
error_free = false;
} else {
error_element.removeClass("error_show").addClass("error");
}
}
if (!error_free) {
event.preventDefault();
} else {
alert('This alert is working');
function changeStyle() {
if (document.getElementById('quiz').style.display == "none") {
document.getElementById('quiz').style.display = "block";
} else {
document.getElementById('quiz').style.display = "none";
}
}
}
});
});
CSS：
#quiz{
display:none;
}
请帮忙！我尝试过body：onload，但它似乎只是有同样的问题。我已经在网上搜索了答案。我似乎错过了什么，我只是不知道是什么。
由于
正在调用EDIT * changeStyle。这是与此部分相关的HTML。
<form id="contact" method="post" action="">
<!-- Name -->
<div>
<label for="contact_name">Name:</label>
<input type="text" id="contact_name" name="name"></>
<span class="error">This field is required</span>
</div>
<!-- Email -->
<div>
<label for="contact_email">Email:</label>
<input type="email" id="contact_email" name="email"></>
<span class="error">A valid email address is required</span>
</div>
<!-- Submit Button -->
<div id="contact_submit">
<button type="button" onclick="show()">Submit</button> </div>
</form>
<content>
<form id="quiz" name="quiz">
<h1>Test your CSS knowledge!</h1>
<h3>What does CSS stand for?</h3>
<fieldset class="question">
<input type="radio" id="q1a1" class="answer" value="Cascading CSS" data- correct="false" name="q1" ><label for="q1a1">Cascading Css</label><br>
<input type="radio" id="q1b2" class="answer" value="Cascading Style Sheets" data-correct="true" name="q1"><label for="q1b2">Cascading Style Sheets</label><br>
<input type="radio" id="q1c3" class="answer" value="Cascading Seperate Style" data-correct="false" name="q1"><label for="q1c3">Cascading Separate Style</label><br>
</fieldset>
<h3>Which attribute can be set to bold?</h3>
<fieldset class="question">
<input type="radio" id="q2a1" class="answer" value="Text Decoration" data-correct="false" name="q2" ><label for="q2a1">Text Decoration</label><br>
<input type="radio" id="q2b2" class="answer" value="Font Style" data-correct="false" name="q2"><label for="q2b2">Font Style</label><br>
<input type="radio" id="q2c3" class="answer" value="Font Weight" data-correct="true" name="q2"><label for="q2c3">Font Weight</label><br>
</fieldset>
<h3>Which tag is used to link an external CSS file?</h3>
<fieldset class="question">
<input type="radio" id="q3a1" class="answer" value="Script" data-correct="false" name="q3" ><label for="q3a1">Script</label><br>
<input type="radio" id="q3b2" class="answer" value="Link" data-correct="true" name="q3"><label for="q3b2">Link</label><br>
<input type="radio" id="q3c3" class="answer" value="Rel" data-correct="false" name="q3"><label for="q3c3">Rel</label><br>
</fieldset>
<h3>Which attribute sets the underline property?</h3>
<fieldset class="question">
<input type="radio" id="q4a1" class="answer" value="Font Style" data-correct="false" name="q4" ><label for="q4a1">Font Style</label><br>
<input type="radio" id="q4b2" class="answer" value="Text Decoration" data-correct="true" name="q4"><label for="q4b2">Text Decoration</label><br>
<input type="radio" id="q4c3" class="answer" value="Font Weight" data-correct="false" name="q4"><label for="q4c3">Font Weight</label><br>
</fieldset>
<h3>Which element is NOT relative?</h3>
<fieldset class="question">
<input type="radio" id="q5a1" class="answer" value="Px" data-correct="true" name="q5" ><label for="q5a1">Px</label><br>
<input type="radio" id="q5b2" class="answer" value="Cm" data-correct="false" name="q5"><label for="q5b2">Cm</label><br>
<input type="radio" id="q5c3" class="answer" value="%" data-correct="false" name="q5"><label for="q5c3">%</label><br>
<input type="radio" id="q5d4" class="answer" value="Em" data-correct="false" name="q5"><label for="q5d4">Em</label><br>
</fieldset>
<h3>Which element IS relative?</h3>
<fieldset class="question">
<input type="radio" id="q6a1" class="answer" value="Em" data-correct="true" name="q6" ><label for="q6a1">Em</label><br>
<input type="radio" id="q6b2" class="answer" value="Cm" data-correct="false" name="q6"><label for="q6b2">Cm</label><br>
<input type="radio" id="q6c3" class="answer" value="MM" data-correct="false" name="q6"><label for="q6c3">MM</label><br>
<input type="radio" id="q6d4" class="answer" value="Inch" data-correct="false" name="q6"><label for="q6d4">Inch</label><br>
</fieldset>
<h3>What attribute is used to move an elements content away from its border?</h3>
<fieldset class="question">
<input type="radio" id="q7a1" class="answer" value="Margin" data-correct="false" name="q7" ><label for="q7a1">Margin</label><br>
<input type="radio" id="q7b2" class="answer" value="Padding" data-correct="true" name="q7"><label for="q7b2">Padding</label><br>
<input type="radio" id="q7c3" class="answer" value="Border" data-correct="false" name="q7"><label for="q7c3">Border</label><br>
<input type="radio" id="q74d" class="answer" value="Width" data-correct="false" name="q7"><label for="q7d4">Width</label><br>
</fieldset>
<h3>Which element does not contribute to a block elements total width?</h3>
<fieldset class="question">
<input type="radio" id="q8a1" class="answer" value="Width" data-correct="false" name="q8" ><label for="q8a1">Width</label><br>
<input type="radio" id="q8b2" class="answer" value="Border" data-correct="false" name="q8"><label for="q8b2">Border</label><br>
<input type="radio" id="q8c3" class="answer" value="Background-image" data-correct="true" name="q8"><label for="q8c3">Background-image</label><br>
<input type="radio" id="q8d4" class="answer" value="Padding" data-correct="false" name="q8"><label for="q8d4">Padding</label><br>
</fieldset>
<h3>Which property changes positioned elements display order?</h3>
<fieldset class="question">
<input type="radio" id="q9a1" class="answer" value="Width" data-correct="false" name="q9" ><label for="q9a1">Width</label><br>
<input type="radio" id="q9b2" class="answer" value="Background" data-correct="false" name="q9"><label for="q9b2">Background</label><br>
<input type="radio" id="q9c3" class="answer" value="z-index" data-correct="true" name="q9"><label for="q9c3">Z-index</label><br>
<input type="radio" id="q9d4" class="answer" value="Azimuth" data-correct="false" name="q9"><label for="q9d4">Azimuth</label><br>
</fieldset>
<h3>Which value of background-repeat will cause the background to repeat vertically?</h3>
<fieldset class="question">
<input type="radio" id="q10a1" class="answer" value="repeat-x" data-correct="false" name="q10" ><label for="q10a1">repeat-x</label><br>
<input type="radio" id="q10b2" class="answer" value="repeat" data-correct="false" name="q10"><label for="q10b2">repeat</label><<br>
<input type="radio" id="q10c3" class="answer" value="repeat-y" data-correct="true" name="q10"><label for="q10c3">repeat-y</label><br>
<input type="radio" id="q10d4" class="answer" value="No-repeat" data-correct="false" name="q10"><label for="q10d4">No-repeat</label><br>
</fieldset>
<footer>
<fieldset class="calc-percentage" name="score">
<input type="button" id="calc" value="Get score" />
<div>
<p><label for="percentage">Score = </label><input type=text size=15 id="percentage" name="percentage" /></p>
<input type="submit" onclick="checkQuiz()">
</div>
</fieldset>
答案 0 :(得分：0)
您只需重新定义function changeStyle(){}，永远不会调用它。此外，如果您打算使用jQuery，那么使用它。如果您不想.css()，请使用.toggle()。摆脱HTML中的onclick='changeStyle()'。
尽管你有其他可能的错误：
$(document).ready(function(){
$('#contact_name').on('input', function(){
var input = $(this);
var re = /^[A-Za-z0-9]+ [A-Za-z0-9]+$/;
var is_name = re.test(input.val());
if(is_name){
input.removeClass('invalid').addClass('valid');
}
else{
input.removeClass('valid').addClass('invalid');
}
});
$('#contact_email').on('input', function(){
var input = $(this);
var re = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
var is_email = re.test(input.val());
if(is_email){
input.removeClass('invalid').addClass('valid');
}
else {
input.removeClass('valid').addClass('invalid');
}
});
$('#contact_submit button').click(function(event){
var form_data = $('#contact').serializeArray(), error_free = true;
for(var input in form_data){
var element = $('#contact_' + form_data[input]['name']);
var valid = element.hasClass('valid');
var error_element = $('span', element.parent());
if(!valid){
error_element.removeClass('error').addClass('error_show');
error_free = false;
}
else{
error_element.removeClass('error_show').addClass('error');
}
}
if(!error_free){
event.preventDefault();
}
else{
// look what changed here - you have to call a function to execute it
$('#quiz').css('display', 'block');
}
});
});
再次摆脱常规JavaScript函数changeStyle()并将其从HTML中删除!!!