document.getElementById(' ').value returns undefined

Question

I am using an API for a weather app. But when it comes to create a search bar using a <input type="text"> and a document.getElementById(' ').value it returns me undefined (when I log it out). So I'm wondering if there is any other way to get the input.

HTML:

<form class="search">

     <input type="text" id="Search" name="Search" placeholder="Search city..." style="width: 50%; padding: 10px;">

     <button type="submit" id="button" style="padding: 10px;">SEARCH</button>

</form>

JavaScript:

let location1 = document.getElementById('Search').value;
let api1 = 'http://api.openweathermap.org/data/2.5/weather?q=';
let api2 = '&appid=ece23eaa3a8d940b327a0cdc41c1e344&units=metric';

let API = api1 + location1 + api2;

// MAIN WEATHER */
fetch(API) // Current weather API

Any help will be apreciated

Is the js code inside the submit handler? It is probably called on page load. — adiga, Sep 28 '20 at 18:53
See https://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element. — isherwood, Sep 28 '20 at 18:53
Any chance you have a second element that is not an input with the same `id="Search"` in your document? I cannot imagine anything else - if `document.getElementById` didn't find an you'd get an exception when accessing `.value`, if it did find your input element then you'd always get a string and never `undefined` from the `.value` property. — Bergi, Sep 28 '20 at 19:00
@Bergi I've checked everithing and everithing is alright. The problem is with the `.value` i think because i've tried to log out the `document.getElementById` without the `.value` and it worked out — Manu Sampablo, Sep 28 '20 at 19:05

score 2 · Accepted Answer · answered Oct 03 '20 at 15:58

The problem was that I set a button which function was reload the page. The solution my proffesor told me is to set the entire JS code to a function. And when the button is pressed activate that function. I leave here the working code:

HTML

<form class="search">

            <input type="text" id="Search" name="Search" placeholder="Search city..." style="width: 50%; padding: 10px;">   
            <button type="button" id="button" style="padding: 10px;" onclick="find_weather()" >SEARCH</button>
         
</form>

JS

let find_weather= function(){
        let location1 = document.getElementById('Search').value;
        let api1 = 'http://api.openweathermap.org/data/2.5/weather?q=';
        let api2 = '&appid=ece23eaa3a8d940b327a0cdc41c1e344&units=metric';
    
        let api3 = 'http://api.openweathermap.org/data/2.5/forecast?q=';
        let api4 = '&appid=ece23eaa3a8d940b327a0cdc41c1e344&units=Metric';
        
        let API = api1 + location1 + api2;
        let API2 = api3 + location1 + api4;

        
        fetch(API).then(response => response.json())
        ...

thanks everyone who helped me ily <3

document.getElementById(' ').value returns undefined

1 Answers1