javascript - Writing a function to stop repeating code? - JS

Question

I'm using the Simpleweather.js plugin, and it utilises JS like this:

$.simpleWeather({
zipcode: '',
woeid: '12289',
location: '',
unit: 'c',
success: function(weather) {
    html = '<h2 class="none">'+weather.city+'</h2>';
    html += '<img src="assets/img/'+weather.code+'.png">';
    html += '<p>'+weather.temp+'&deg; '+weather.units.temp+'<br /><span>'+weather.currently+'</span></p>';
    html += '<p>Wind: '+weather.wind.speed+weather.units.speed+'</p>';
    html += '<div class="tmr"><p>Tomorrow:</p><img src="assets/img/'+weather.tomorrow.code+'.png">'+'<p>'+weather.tomorrow.high+'&deg;'+weather.units.temp+'<br />'+weather.tomorrow.forecast+'</p></div>';
    html += '<a href="'+weather.link+'">Full Forecast</a>';

    $("#weather").html(html);
},
error: function(error) {
    $("#weather").html('<p>'+error+'</p>');
}
});

And simple HTML such as

<div id="weather"></div> 

to display it.

However, I want to display weather for multiple places, and the only thing that differs for them is the woeid, which is a five-digit number, and the div ID for displaying it, shown here as #weather. What I'd like to do is write a function that when called, such as this:

weatherFunction(divid,woeid);

It takes the two as inputs and just adds them into the code above. I've only written very simple function in JS before and would really like help on this. I know in theory how to do it but not in practice -- can anyone help me out or give me a starting point? Cheers in advance!

Answer 1

var weatherFunction = function (divid, woeid) {

    $.simpleWeather({
        zipcode: '',
        woeid: woeid,
        location: '',
        unit: 'c',
        success: function(weather) {
            html = '<h2 class="none">'+weather.city+'</h2>';
            html += '<img src="assets/img/'+weather.code+'.png">';
            html += '<p>'+weather.temp+'&deg; '+weather.units.temp+'<br /><span>'+weather.currently+'</span></p>';
            html += '<p>Wind: '+weather.wind.speed+weather.units.speed+'</p>';
            html += '<div class="tmr"><p>Tomorrow:</p><img src="assets/img/'+weather.tomorrow.code+'.png">'+'<p>'+weather.tomorrow.high+'&deg;'+weather.units.temp+'<br />'+weather.tomorrow.forecast+'</p></div>';
            html += '<a href="'+weather.link+'">Full Forecast</a>';

            $(divid).html(html);
        },
        error: function(error) {
            $(divid).html('<p>'+error+'</p>');
        }
    });

}