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();
}

@CertainPerformance The error message I get in the console is: Uncaught ReferenceError: opt is not defined — Paolo, Oct 25 '20 at 20:04
Are you sure you don't want to create the s and opt variables inside the search function? Then they will have values up to date with the form. — xdhmoore, Oct 25 '20 at 20:08
As it is now the opt and s variables will be set once on page load but then when the form changes and you click the click handler will get the original values. Unless I'm mistaken. — xdhmoore, Oct 25 '20 at 20:11
I don't know why your "href=JavaScript:" url isn't working. But you should be able to do the same thing using addEventListener. That's considered a more modern way anyway. — xdhmoore, Oct 25 '20 at 20:43

score 1 · Accepted Answer · answered Oct 25 '20 at 20:25

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>

score 0 · Answer 2 · answered Oct 25 '20 at 20:11

0

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>

answered Oct 25 '20 at 20:11

mankowitz

1,864
1
14
32

I don't think this will do what the OP was trying to do. It runs a search on page load when I think they want to run it when a button or link is clicked – xdhmoore Oct 25 '20 at 20:37

score 0 · Answer 3 · answered Oct 25 '20 at 20:28

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. e.g

<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.

Javascript, Uncaught ReferenceError: variable is not defined

3 Answers3