My html code is
<!DOCTYPE html>
<html><!--html start-->
<head>
<title>
Student Registration Form
</title>
<link href = "css/bootstrap.css" rel="stylesheet"/><!--Bootstrap linked-->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="js/projectScript.js"></script>
</head>
<body>
<header>
<div class="bg-success">
<h2 class="text-center">Student Enrollment Form</h2>
</div>
</header>
<div class="container">
<div class="row">
<div class="col">
<div class="container"><!--form container open-->
<div class="row">
<div class="col">
<div class="mb-3">
<label for="inputName" class="form-label">Name</label>
</div>
</div>
<div class="col">
<div class="mb-3">
<input type="text" class="form-control" id="inputName">
</div>
</div>
</div><!--row closed-->
<div class="row">
<div class="col">
<div class="mb-3">
<label for="inputEmail" class="form-label">Email</label>
</div>
</div>
<div class="col">
<div class="mb-3">
<input type="email" class="form-control" id="inputEmail">
</div>
</div>
</div><!--row closed-->
<div class="row">
<div class="col">
<div class="mb-3">
<label for="inputWebsite" class="form-label">Website</label>
</div>
</div>
<div class="col">
<div class="mb-3">
<input type="url" class="form-control" id="inputWebsite">
</div>
</div>
</div><!--row closed-->
<div class="row">
<div class="col">
<div class="mb-3">
<label for="imageLink" class="form-label">Image Link</label>
</div>
</div>
<div class="col">
<div class="mb-3">
<input type="url" class="form-control" id="imageLink">
</div>
</div>
</div><!--row closed-->
<div class="row">
<div class="col">
<div class="mb-3">
<label for="ShowSkillList" class="form-label"> Gender</label>
</div>
</div>
<div class="col">
<div class="mb-3">
<div class="form-check">
<input class="form-check-input" type="radio" name="gender" id="maleRadio">
<label class="form-check-label" for="flexRadioDefault1">
Male
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="gender" id="femaleRadio">
<label class="form-check-label" for="flexRadioDefault2">
Female
</label>
</div>
</div>
</div>
</div><!--row closed-->
<div class="row">
<div class="col">
<div class="mb-3">
<label for="ShowSkillList" class="form-label"> Skills</label>
</div>
</div>
<div class="col">
<input class="form-check-input" type="checkbox" value="" id="checkJava">
<label class="form-check-label" for="checkJava">
Java
</label>
<input class="form-check-input" type="checkbox" value="" id="checkHTML">
<label class="form-check-label" for="checkHTML">
HTML
</label>
<input class="form-check-input" type="checkbox" value="" id="checkCSS">
<label class="form-check-label" for="checkCSS">
CSS
</label>
</div>
</div><!--row closed-->
<button type="button" class="btn btn-primary" onclick="JavaScript:enroll()"> Enroll Student</button>
<button type="button" class="btn btn-danger" onclick="JavaScript:clear()"> Clear</button>
</div><!--container closed-->
</div><!--col closed-->
<div class="col">
<div class="heading"><h5><b>Enroll Student</b> </h5></div>
<div class="details">
<div class="card" style="width: 18rem;">
<div class="card-body">
<div class="row">
<div class="col-10">
<h4 class="card-title" id="name"></h4>
<p class="card-text">
Male <br>
john.doe@gmail.com <br>
www.johndow.com <br>
Java,Html
</p>
</div>
<div class="col-2">
<img src="..." class="card-img-top" alt="...">
</div>
</div>
<div class="card-body">
<div class="row">
<div class="col-10">
<h4 class="card-title">Matt Rolling</h4>
<p class="card-text">
Male <br>
matt.r@gmail.com <br>
www.mattr.com <br>
Java,CSS
</p>
</div>
<div class="col-2">
<img src="..." class="card-img-top" alt="...">
</div>
</div>
</div>
</div>
</div>
</div><!--col closed-->
</div><!--row closed-->
</div><!--container closed-->
<div class="container"><br><br><br><br><br><br></div>
<footer>
<div class="bg-success">
<h5 class="text-center">Copyright 2020-2021 by Fresher Training</h5>
</div>
</footer>
and js code is given below, I dodn't pasted the code for enroll() function because it is incomplete, and currently I only need this to work.
function clear(){
document.getElementById("inputName").value = "";
document.getElementById("inputEmail").value = '';
document.getElementById("inputWebsite").value = '';
document.getElementById("imageLink").value = '';
document.getElementById("maleRadio").checked = false;
document.getElementById("femaleRadio").checked = false;
}
JS file is successfully linked with HTML but the onclick is not working, both of them are not working but I only used clear() function here because if this will work then other will too. I looked up everywhere but couldn't get a solution.
