Cfrgtkky

HTML - There is currently two text input fields followed by a "check" button.

There is then a dropdown selection, with some predetermined locations.

<h4 class="subhead">Enter Coordinates of location</h4>

<label for="la" id="label1">Latitude</label>

<input type="text" name="coords" id="la" class="inputtext" placeholder="example: 53.48"><br> 

<br>

<label for="Lo" id="label2">Longitude</label>

<input type="text" name="coords" id="lo" class="inputtext" placeholder="example: -2.24"><br> 

<button id="check">Check</button>



<h4 class="subhead">Or select below</h4>  

  <select id="dropdown">

    <option value="manchester" id="manchester" >Manchester</option>

    <option value="hongkong" id="hongkong">Hong Kong</option>

    <option value="london" id="london">London</option>

    <option value="paris" id="paris">Paris</option>

    <option value="berlin" id="berlin">Berlin</option>

    <option value="nyc" id="nyc">New York</option>  

    <option value="kl" id="kl">Kuala Lumpur</option>  

  </select>

JavaScript - I currently have an if statement that checks if the text boxes are empty strings"". If they are empty, it checks what dropdown is selected. There is an event listener to check for the selected dropdown. When one is selected, the weather() function is called and takes latitude and longitude coordinates as arguments, in this case I have entered the actual numeric values because they are predetermined via google search. The dropdown part currently works fine.

  checked(); 

  document.getElementById("dropdown").addEventListener("change", checked);

  function checked() {

    if (document.getElementById('la').value != "" && document.getElementById('lo').value != "") {

      weather(la, lo);

    }  else if (document.getElementById('dropdown').value == "manchester") {

      weather(53.48, -2.24);

    } else if (document.getElementById('dropdown').value == "hongkong") {

      weather(22.2855, 114.157);

    } else if (document.getElementById('dropdown').value == "london") {

      weather(51.5074, -0.12);     

   } else if (document.getElementById('dropdown').value == "paris") {

      weather(48.85, 2.35);

   } else if (document.getElementById('dropdown').value == "berlin") {

      weather(52.520007, 13.404954);

   } else if (document.getElementById('dropdown').value == "nyc") {

      weather(40.7128, -74.0060);

   } else if (document.getElementById('dropdown').value == "kl") {

      weather(3.1390, 101.6869); 

   }

  }

I currently don't know how to make the text box coordinates part work. My ideal result is to have the user type in a latitude value and a longitude value, press the check button, and then the values of whatever they input is stored in the variables la and lo.

When this happens, the first stage of the conditional statements will run, because the values in the text boxes are no longer = to an empty string "".

It will then call the weather function with arguments (la, lo) which will be input by the user.

In summary, I want the check button to submit the input values to variables la and lo without reloading the page. Then run the checked function again, which will execute the first if statement, calling the weather function with latitude and longitude coordinates selected by the user.

Sorry if this is confusing, I'm new to this.

If it is question about assigning value to variables then:

var la, lo;



function update() {

    if (document.getElementById('la').value != "" && document.getElementById('lo').value != "") {

        weather(document.getElementById('la').value, document.getElementById('lo').value);

    }

}



function weather(x, y){

    la = x;

    lo = y;

}

And HTML

<button id="check" onclick="update()">Check</button>