将变量传递给外部Javascript文件以通过onClick更改图像

Question

I currently have a slew of images that I would like to display after passing certain variables to an external JS file:

HTML Code:

<li><a href="#" onClick="javascript: update_region('ne');">Northeast</a>
             <ul>
                <li><a id="t2m" href="#" onClick="javascript: update_variable('t2m');">2m Temperature</a></li>
                <li><a id="td2m" href="#" onClick="javascript: update_variable('td2m');">2m Dew Point Temp</a></li>
                <li><a id="dewdep" href="#" onClick="javascript: update_variable('dewdep');">2m Dew Point Depression</a></li>
                <li><a id="wetbulb" href="#" onClick="javascript: update_variable('wetbulb');">2m Wet Bulb Temp</a></li>
                <li><a id="rh" href="#" onClick="javascript: update_variable('rh');">2m Relative Humidity</a></li>
                <li><a id="wind" href="#" onClick="javascript: update_variable('wind');">10m Wind Speed</a></li>
                <li><a id="windgust" href="#" onClick="javascript: update_variable('windgust');">10m Wind Gust</a></li>
                <li><a id="apparent" href="#" onClick="javascript: update_variable('apparent');">2m Apparent Temp</a></li>
            </ul>
        </li>

Javascript Code:

function update_region(input) {
window.region = input;
imageload(); };

function update_variable(input) {
window.variable = input;
imageload(); };

function imageload() {
document.imageplot.src=(/images/rtma2p5_'+region+'_'+variable+'.png'); };

I'm not sure if this is an effective way to pass variables from outside the JS file to define the image url code or not, as I can't seem to get this to work at all.

Answer 1

Try ...

function imageload() {
  document.imageplot.src=("/images/rtma2p5_" + window.region + "_"+ window.variable + ".png");
};

You were missing a quote and were not referencing the variables created in previous functions correctly. you might also want to consider some default values.