We have checked out quite a few posts on this, but none of them have seen to answered our issue. Our code is as follows:
<html>
<head>
<!-- reference to Javascript here -->
<script>
function search(){
}
function focus(){
document.getElementById("advSearchOptions").focus();
}
</script>
</head>
<!-- reference to HTML here -->
<body>
<!-- div for basic search bar -->
<div id="basicSearchBar">
<form>
<input id="basicSearchText" type="text" name="search" placeholder="Search">
<input id="basicSearchButton" type="submit" value="" onclick=search() />
</form>
</div>
<!-- div for advanced searching -->
<div id="advSearchBar">
<div id="advSearchOptions">
<!-- Education Form -->
<form id="advFormEducation">
<input type="text" name="search" placeholder="Search">
</form>
<!-- Skill Form -->
<form id="advFormSkill">
<input type="text" name="search" placeholder="Search">
</form>
<!-- Work Form -->
<form id="advFormWork">
<input type="text" name="search" placeholder="Search">
</form>
</div>
<!-- Adv Search Button -->
<p id='advButtonStyle'><button id="advSearchButton" type="menuexpand" value="" onclick=focus()></button></p>
</div>
<!-- div for search results -->
<div id="searchResults">
</div>
</body>
<footer>
{% endblock %}
</footer>
</html>
The two issues we are having are: 1. When clicking on the first button
<input id="basicSearchButton" type="submit" value="" onclick=search() />
The console gives us an Uncaught TypeError: search is not a function error code. We would like to understand what we may be doing wrong that is causing this error to appear.
.2. When clicking on the second button
<p id='advButtonStyle'><button id="advSearchButton" type="menuexpand" value="" onclick=focus()></button></p>
The console does not give an error, however no call or code is executed from the focus function in our javascript.
We have left out the CSS, but if anyone can help that would be greatly appreciated.
We have tried fixes including : scope/placement and renaming
