Uncaught ReferenceError: getSelectedOption is not defined at HTMLButtonElement.document.getElementById.onclick

Question

I am a super beginner in javascript and html and doing an experiment to build an webapp. I ran npm install http-server -g and http-server '' -o and it opened up a browser tab. But in the console, I get this error and cannot identify what is causing the problem.

Uncaught ReferenceError: getSelectedOption is not defined
at HTMLButtonElement.document.getElementById.onclick (app.js:5)
document.getElementById.onclick @ app.js:5

In the browser I see a pull down menu and Refresh button. So why is getSelectedOption not defined?? I'm not sure if it's related to this problem, but even though I click the button, console.log("clicked!") doesn't print anything.

Here is my index.html

<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"> </script>   
    <script type="text/javascript" src="app.js" defer></script>
</head>
<body>
    <form>
    <div class="form-group">
        <label>Store ID</label>
        <select class="form-control" id="company">
          <option selected>All</option>
          <option>Air France</option>
          <option>Lufthansa</option>
        </select>
        <button  class="btn btn-primary" type='button' id="button">Refresh</button>
      </div>
    </form>
</body>

Here is my app.js

console.log("button", document.getElementById("button"))

document.getElementById('button').onclick = function(){
    console.log("clicked!")
    let company = getSelectedOption('company');
    let headers = new Headers()
    let init = {
        method : 'GET',
        headers : headers
    }
    let params = {
        'company':company
    }

    $.get( "/getmethod/<params>" );

    $.get("/getpythondata", function(data) {
        console.log($.parseJSON(data))
    })

Do you want to [get the selected value from `#company`](https://stackoverflow.com/a/1085810)? — double-beep, May 31 '20 at 13:42

score 0 · Accepted Answer · answered May 31 '20 at 13:44

You need to use document.getElementById('company').value to get value of select box.i.e :

console.log("button", document.getElementById("button"))

document.getElementById('button').onclick = function() {
    console.log("clicked!")
    let company = document.getElementById('company').value;//get value of select box
    console.log(company)
    let headers = new Headers()
    let init = {
      method: 'GET',
      headers: headers
    }
    let params = {
      'company': company
    }

    $.get("/getmethod/<params>");

    $.get("/getpythondata", function(data) {
      console.log($.parseJSON(data))
    })
    
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <div class="form-group">
    <label>Store ID</label>
    <select class="form-control" id="company">
      <option selected>All</option>
      <option>Air France</option>
      <option>Lufthansa</option>
    </select>
    <button class="btn btn-primary" type='button' id="button">Refresh</button>
  </div>
</form>

Thank you! i feel so stupid, `getSelectedOption` was just a function that I needed to define — Makoto Miyazaki, May 31 '20 at 15:38

Uncaught ReferenceError: getSelectedOption is not defined at HTMLButtonElement.document.getElementById.onclick

1 Answers1