Javascript, Uncaught ReferenceError: variable is not defined

Question

I'm new to Javascript , and I am trying to pass two parameters to a function which then submits them via a form, but I get an ReferenceError when I click the image that acts as a function caller. These are my inputs, a text area and three radio buttons:

<label for="searchString">
   <input type="text" id="searchString" name="searchString" maxlength="20"> </br>
</label>

<section id="searchMode" style="margin-top: 3px; margin-bottom: 2px">
   <input type="radio" id="Title" name="searchMode" value="Title"/>
   <label for="Title">Title</label>
   <input type="radio" id="Author" name="searchMode" value="Author"/>
   <label for="Author">Author</label>
   <input type="radio" id="Number" name="searchMode" value="Number"/>
   <label for="Number">Number</label>
</section>

And this is the search function:

<script>
   s = document.getElementById("searchString").value;
   opt = document.querySelector('input[name="searchMode"]:checked').value;
</script>

<section style="margin-top: 3px;">
   <a href="javascript:search(s,opt)">
       <img alt="search" id="searchImage" src="images/search.png" width="22" height="22">
   </a>
</section>

The error message I am seeing is:

Uncaught ReferenceError: opt is not defined

I've tried declaring the two variables without let or var but that doesn't seem to work, how can I fix my code so I don't get this error?

---

EDIT : I think the issue might be that I can't properly pass my parameters from my form to the controller; the search function gets called and I get no error but they are received as undefined . Here are the form and the function:

<form name="searchForm" method="post" action="Dispatcher">
   <input type="hidden" name="searchString"/>
   <input type="hidden" name="searchMode"/>
   <input type="hidden" name="controllerAction" value="ProductsManagement.view"/>
</form>

function search(s,opt){
   const f = document.searchForm;
   f.searchString.value = s;
   f.searchMode.value = opt;
   f.submit();
}

Answer 1

This will fix it the changes: The function is a function now, Its ran with onclick() not href, To get the value Attribute of the buttons we need to use getAttribute, And finally to keep the underline and purple color (as we removed the href) we need to add: style="text-decoration: underline; color: purple;"

 <label> <input type="text" id="searchString" name="searchString" maxlength="20"> </label> <section id="searchMode" style="margin-top: 3px; margin-bottom: 2px"> <input type="radio" id="Title" name="searchMode" value="Title"/> <label for="Title">Title</label> <input type="radio" id="Author" name="searchMode" value="Author"/> <label for="Author">Author</label> <input type="radio" id="Number" name="searchMode" value="Number"/> <label for="Number">Number</label> </section> <script> function search(){ console.log('here') let s = document.getElementById("searchString").value; let opt = document.querySelector('input[name="searchMode"]:checked') if(opt){ opt = opt.getAttribute('value'); } console.log(opt) console.log(s) } </script> <section style="margin-top: 3px;"> <a onclick='window.search()' style="text-decoration: underline; color: purple;"> <img alt="search" id="searchImage" src="images/search.png" width="22" height="22"> </a> </section>

Answer 2

s and opt are not defined in the scope of your anchor. They seem to be defined elsewhere. Consider changing it to the following:

<a onclick="search"><img...></a>

And then, in your search

<script>
   s = document.getElementById("searchString").value;
   opt = document.querySelector('input[name="searchMode"]:checked').value;
   search(s,opt);
</script>

Answer 3

Your searchString does not have any value so, when you try to access its value, it gives you error. So for this you need to assign a value for it. eg

<label for="searchString">
  <input type="text" id="searchString" name="searchString" maxlength="20" 
  value 
  = "search" > </br>
</label>

Exactly like that When you have not checked any options from radio-button it gives error because at that particular time it won't have any value in it.

So you must assign values for respective elements.