nsakinejad nsakinejad - 5 months ago 8
HTML Question

clear() function not working with onClick, only through console

Hello there everyone,
I am helping a friend with JavaScript and there is an unusual problem. The

clear()
function used to clear the form page is not causing the objects on the page to clear when the button is clicked. It runs through console, though. What is the problem here? Here is the code for the site:


<html>
<head>
<title>UNDERTALE</title>
<style>
@font-face {
font-family: Undertale;
src: url("assets/DTM-Mono.otf") format("opentype");
}
body {
font-family: Undertale;
font-size: 24px;
color: #FFFFFF;
}

table {
font-family: Undertale;
font-size: 24px;
color: #FFFFFF;
}
</style>
<script>
function validateCheckBox(){
if(document.getElementsByName("check")[0].checked == true) { return true; }
if(document.getElementsByName("check")[1].checked == true) { return true; }
if(document.getElementsByName("check")[2].checked == true) { return true; }
if(document.getElementsByName("check")[3].checked == true) { return true; }
return false;
}
function validateDropdown(){
if(document.getElementsByName("select")[0].selectedIndex == 0) { return false; }
return true;
}
function validateRadio(){
if(document.getElementsByName("radio")[0].checked == true) { return true; }
if(document.getElementsByName("radio")[1].checked == true) { return true; }
if(document.getElementsByName("radio")[2].checked == true) { return true; }
if(document.getElementsByName("radio")[3].checked == true) { return true; }
return false;
}
function validateTextArea(){
if(document.getElementsByName("textarea")[0].value == "") { return false; }
return true;
}
function submit(){
if(validateCheckBox() == false) { alert("Please complete the first question."); return; }
if(validateDropdown() == false) { alert("Please complete the second question."); return; }
if(validateRadio() == false) { alert("Please complete the third question."); return; }
if(validateTextArea() == false) { alert("Please complete the fourth question."); return; }
alert("Form submitted successfully!");
}
function clear(){
document.getElementsByName("check")[0].checked = false;
document.getElementsByName("check")[1].checked = false;
document.getElementsByName("check")[2].checked = false;
document.getElementsByName("check")[3].checked = false;
document.getElementsByName("select")[0].selectedIndex = 0;
document.getElementsByName("radio")[0].checked = false;
document.getElementsByName("radio")[1].checked = false;
document.getElementsByName("radio")[2].checked = false;
document.getElementsByName("radio")[3].checked = false;
document.getElementsByName("textarea")[0].value = "";
return;
}
</script>
</head>
<body bgcolor="#000000">
<center>
<table width="1000px">
<tr><td>
<center>
<img src="assets/feedback.png" width="700px">
</center>
<tr><td>
<br>
<center>
1. What did you find helpful on this website?<br>
<input type="checkbox" name="check">About</input>
<input type="checkbox" name="check">Story</input>
<input type="checkbox" name="check">Main Characters</input>
<input type="checkbox" name="check">Locations</input>
<br><br>
2. Which page should I add more information?<br>
<select name="select">
<option>
<option>About
<option>Story
<option>Main Characters
<option>Locations
<option>None
</select>
<br><br>
3. Which page did you find the most helpful?<br>
<input type="radio" name="radio">About</input>
<input type="radio" name="radio">Story</input>
<input type="radio" name="radio">Main Characters</input>
<input type="radio" name="radio">Locations</input><br><br>
4. Please leave any other comments about this website here.<br>
<textarea rows=10 cols=50 name="textarea"></textarea><br><br>
<button onclick="submit()">Submit</button>
<button onclick="clear()">Clear</button>
</center>
</table>
</body>
</html>




Answer

Replace the function name for clear() with another name, e.g. reset() or better yet, use the built-in reset functionality as pointed out by Hamza Zafeer.

Why do you need to rename clear()? Because a function clear() is already defined within inline event-handlers. See Is "clear" a reserved word in Javascript?

Comments