Can not receive value from a data-list

Question

I've tried countless ways now to receive the value of this data-list when the user clicks the button to pass the information to the APIs and return the data. I am trying to receive these country names to pass them to another API to receive the country code to pass into the others. I've tried everything my novice self knows, and I either get null or it throws an error because I tried to pass null to a variable I already stated was to be a string.

The HTML

<input
            name="countryText"
            list="countrySelect"
            placeholder="Start typing..."
            id="'countryList"
            type="text"
          />
          <datalist id="countrySelect">
            <option value="United States"></option>
            <option value="Afghanistan"></option>
            <option value="Albania"></option>

The data-list continues and every value is that of the respective country

Just one of the iterations of JS I've tried to collect the value

searchBtn.addEventListener('click', async () =>{
    textValue = textBox.value.toLowerCase();
    countryValue = countrySelect.value;
    console.log(countryValue);

And earlier in the code I collect that element by ID and assign it to countrySelect const countrySelect = document.getElementById('countryList');

And yes I have seen solutions with JQuery but I have to do mine with vanilla

I've tried everything my novice self knows, and I either get null or it throws an error because I tried to pass null to a variable I already stated was to be a string.

Answer 1

This should work fine, kept your toLowerCase in case you need it, provided that you have a already managed to grab the search button and put it in the variable searhBtn:

searchBtn.addEventListener('click', async () => {
  let country = document.querySelector('input[name="countryText"]').value.toLowerCase();
  console.log(country);
});

Some points:

• It seems unnecessary to have an id on the countryText input since you can grab it by name, both in js and in your css if needed.
• Unless you are going to fetch something - maybe you are (you mentioned API:s) - or do something else async/await you might not have to keep 'async' on the event listener function.

Answer 2

Try to change id="'countryList" to id="countryList" looks like vanilla js is not getting the required string value. whereas jQuery already filters it

Answer 3

id of the input is different from the value given in js.

input element id = 'countryList
id in the js = countryList

I have added a snippet with your code. please check

var countrySelect = document.getElementById("countryList");

const searchBtn = document.getElementById('searchBtn');

searchBtn.addEventListener('click', async () =>{
    countryValue = countrySelect.value;
    console.log(countryValue);
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/vquery/5.0.1/v.min.js"></script>


<input name="countryText" list="countrySelect" placeholder="Start typing..."
            id="countryList"
            type="text"
          />
          <datalist id="countrySelect">
            <option value="United States"></option>
            <option value="Afghanistan"></option>
            <option value="Albania"></option>
           </datalist>
     <button id="searchBtn">Search</button>