HTML data into JavaScript function issue

Question

I have the following code that uses a weather plugin (https://a12k.io/reallysimpleweather), my problem is that I am wondering how to use the data that is gathered from a user via the HTML form element like below,

<script>var input = document.getElementById('cityInput').value;</script>

<script>
reallySimpleWeather.weather({
  //var city = "Bend, Or";
  wunderkey: '', // leave blank for Yahoo API
    location: input,
    woeid: '', // "Where on Earth ID" optional alternative to location
    unit: 'f', // 'c' also works
    success: function(weather) {
      html = '<h2>'+weather.temp+'°'+weather.units.temp+'</h2>';
      html += '<ul><li>'+weather.city+', '+weather.region+'</li>';
      html += '<li>'+weather.currently+'</li>';
      html += '<li>'+weather.wind.direction+' '+weather.wind.speed+' '+weather.units.speed+'</li></ul>';
    document.getElementById('weather').innerHTML = html;
    },
    error: function(error) {
    document.getElementById('weather').innerHTML = '<p>'+error+'</p>';
    }
});
</script>


</head>
<body>
<div class="container-fluid">
<div id="weather"></div>

<form>
City: <input type="text" name="city" id="cityInput">
<input type="submit" value="Submit">
</form>

</div>
</body>
</html>

I'm unsure as to if my issue is caused because of how the page and the API I am calling might be loading, but when I open it all up in a browser I am currently just getting an error from the plugin that says "There is a problem receiving the latest weather. Try again." Im not sure if this is caused because it is not able to update itself once it is initially loaded or if its because I am incorrectly storing the variable wrong in

 location: input,

Whenever I hit "submit" nothing changes expect the URL itself changes to add city=%27Bend%2C+OR%27 at the end or whatever the city entered is.

well you need to call it after the user enters the data....

epascarello
– epascarello

2017-10-04 18:53:49 +00:00
Commented Oct 4, 2017 at 18:53 — epascarello
– epascarello, Commented Oct 4, 2017 at 18:53

davidbuzatto · Accepted Answer · 2017-10-04 18:38:45Z

3

Get the value using JavaScript and put where you want:

<form action="begin-create-done.html" method="get">
    City: <input type="text" name="city" id="cityInput">
    <input type="submit" value="Submit">
</form>

In JavaScript:

var value = document.getElementByName( "city" ).value;
// or
// var value = document.getElementById( "cityInput" ).value;

reallySimpleWeather.weather({
    wunderkey: '',
    location: value,
    woeid: '',
    unit: 'f',
    success: function(weather) {
        html =  '<h2>'+weather.temp+'°'+weather.units.temp+'</h2>';
        html += '<ul><li>'+weather.city+', '+weather.region+'</li>';
        html += '<li>'+weather.currently+'</li>';
        html += '<li>'+weather.wind.direction+' '+weather.wind.speed+' '+weather.units.speed+'</li></ul>';
        document.getElementById('weather').innerHTML = html;
    },
    error: function(error) {
        document.getElementById('weather').innerHTML = '<p>'+error+'</p>';
    }
});

Please, note that you will need to use the "id" attribute of the input tag to be able to catch this input through JavaScript. Not that inside your code will already used the document.getElementById() function. You will need an div to insert the html generated by the success function and this div must have the id attribute set to "weather".

Also, note that reallySimpleWeather.weather is a function that receives an object with various attributes. You can't set an variable inside this object. It is a syntax error. You must declare it before the reallySimpleWeather.weather call. Take a look above.

edited Oct 4, 2017 at 18:38

answered Oct 4, 2017 at 18:29

davidbuzatto

9,4841 gold badge48 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

jelidens Over a year ago

Hi and thanks for the response. This might be a "read the docs" type situation, but I have tried a few variations of that without luck. For example I have tried declaring the variable value, like you mentioned right at the start of the reallySimpleWeather.weather function above like, var value = document.getElementByName( "city" ).value; However this then removed the data altogether being displayed?

davidbuzatto Over a year ago

Its because you tried to declare a variable in a not allowed region. I'm updating my answer.

jelidens Over a year ago

I also added in an edit to original to maybe give a little more clarification.

davidbuzatto Over a year ago

@jelidens take a look.

davidbuzatto Over a year ago

Do you want to keep calliing the reallySimpleWeather.weather function within a time interval?

|

j08691 · Accepted Answer · 2017-10-04 18:31:12Z

1

I'd give the input an ID (e.g. <input type="text" name="city" id="city">)to make it easy to select say with:

var city = document.getElementById('city');

Then change the line in your plugin call to reference the value:

location: city.value,

answered Oct 4, 2017 at 18:31

j08691

208k33 gold badges269 silver badges281 bronze badges

1 Comment

jelidens Over a year ago

Thank you for the help! I am currently working with this suggestion and others.

Sourav Sachdeva · Accepted Answer · 2017-10-04 18:31:13Z

1

Give your input city an id and than you use getElementById to put that city in place for your location variable

answered Oct 4, 2017 at 18:31

Sourav Sachdeva

3536 silver badges20 bronze badges

1 Comment

jelidens Over a year ago

Thank you for the help! I am currently reading into this and others.

Collectives™ on Stack Overflow

HTML data into JavaScript function issue

3 Answers 3

7 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related