“ onclick”事件未更新JS函数的结果

Question

I am very newbie to JavaScript and I am using it to create the full path for displaying images. Each figure path has four variables that come from 2 selections (rundate and plevel) and 2 divs of buttons (varname and timestep). The function works well but only if I press the "SHOW FULL PATH" button even though I have included the same onclick action on the other buttons. Why is this happening? How can I solve this? What I want is that when I select another variable, ie, RAINFALL it refreshes automatically without the need of pressing the "SHOW FULL PATH" button.

I have no default values for the buttons since I do not know how to do that yet. So for testing you have to click twice any variable and any timestep. After that you can change every variable required or just one of them and press the "SHOW FULL PATH" button. You will notice that the function seems to remember the last selected options even if you change only one. The reason for eliminating the need of refreshing manually using the "SHOW FULL PATH" button is that in reality there are several variables and timesteps combinations possible.

Simulation date selection:

 function getfigurepath() { var rundate = document.getElementById("rundate").value; var varname = document.getElementsByName("varname"); var plevel = document.getElementById("plevel").value; var timestep = document.getElementsByName("timestep"); var var_aux; var timestep_aux; for (var i = 0; i < varname.length; i++) { (function(index) { varname[index].onclick = function() { var_aux = document.getElementsByName("varname")[index].value; }; })(i) } for (var i = 0; i < timestep.length; i++) { (function(index) { timestep[index].onclick = function() { timestep_aux = document.getElementsByName("timestep")[index].value; }; })(i) } figurename = "FIGURE_" + rundate + "_3D_" + var_aux + "_" + plevel + "_" + timestep_aux + ".png"; document.getElementById("demo").innerHTML = figurename; } 

 <select id="rundate"> <option value="2019-06-19" selected>2019-06-19 (most recent)</option> <option value="2019-06-18">2019-06-18</option> <option value="2019-06-17">2019-06-17</option> </select> <br> Variable selection (buttons): <button onclick="getfigurepath()" name="varname" value="WIND">Wind</button> <button onclick="getfigurepath()" name="varname" value="TEMPERATURE">Temperature</button> <button onclick="getfigurepath()" name="varname" value="RAINFALL">Rainfall</button> <br> Vertical level: <select id="plevel"> <option value="SURFACE" onclick="getfigurepath()" selected>Surface</option> <option value="200" onclick="getfigurepath()">200 m</option> <option value="500" onclick="getfigurepath()">500 m</option> </select> <br> Timestep selection (buttons): <button name="timestep" value="000" onclick="getfigurepath()">+00</button> <button name="timestep" value="003" onclick="getfigurepath()">+03</button> <button name="timestep" value="006" onclick="getfigurepath()">+06</button> <hr> <button onclick="getfigurepath()">SHOW FULL PATH</button> <div id="demo"></div> 

I expect the output updating/displaying automatically after changing any of the options from the buttons and selection lists.

Answer 1

I think this is what your actually trying to do, just with the wrong controls and script. Changed your options to radio buttons. Now the behavior is more natural.

 function getfigurepath() { const rundate = document.querySelector('#rundate').value; const varname = document.querySelector('input[name="varname"]').value; const plevel = document.querySelector('#plevel').value; const timestep = document.querySelector('input[name="timestep"]').value; figurename = "FIGURE_" + rundate + "_3D_" + varname + "_" + plevel + "_" + timestep + ".png"; document.getElementById("demo").innerHTML = figurename; } 

 <select id="rundate"> <option value="2019-06-19" selected>2019-06-19 (most recent)</option> <option value="2019-06-18">2019-06-18</option> <option value="2019-06-17">2019-06-17</option> </select> <br> Variable selection (buttons): <input type="radio" name="varname" value="WIND" selected>Wind <input type="radio" name="varname" value="TEMPERATURE">Temperature <input type="radio" name="varname" value="RAINFALL">Rainfall <br> Vertical level: <select id="plevel"> <option value="SURFACE" selected>Surface</option> <option value="200">200 m</option> <option value="500">500 m</option> </select> <br> Timestep selection (buttons): <input type="radio" name="timestep" value="000" selected>+00 <input type="radio" name="timestep" value="003">+03 <input type="radio" name="timestep" value="006">+06 <hr> <button onclick="getfigurepath()">SHOW FULL PATH</button> <div id="demo"></div> 

Answer 2

If I understand correctly, you want any button click or dropdown change to refresh the full path displayed. Here is how I would do that.

 const varnameButtons = document.getElementsByName("varname"); const timestepButtons = document.getElementsByName("timestep"); const rundateDropdown = document.getElementById("rundate"); const plevelDropdown = document.getElementById("plevel"); const state = { varname: varnameButtons[0].value, timestep: timestepButtons[0].value, rundate: rundateDropdown.value, plevel: plevelDropdown.value, }; //* listen for changes and refresh for (let varnameButton of varnameButtons) { varnameButton.onclick = function() { state.varname = varnameButton.value; refresh(); }; } for (let timestepButton of timestepButtons) { timestepButton.onclick = function() { state.timestep = timestepButton.value; refresh(); }; } rundateDropdown.onchange = function() { state.rundate = rundateDropdown.value; refresh(); }; plevelDropdown.onchange = function() { state.plevel = plevelDropdown.value; refresh(); }; //*/ function refresh() { figurename = "FIGURE_" + state.rundate + "_3D_" + state.varname + "_" + state.plevel + "_" + state.timestep + ".png"; document.getElementById("demo").innerHTML = figurename; } 

 <select id="rundate"> <option value="2019-06-19" selected>2019-06-19 (most recent)</option> <option value="2019-06-18">2019-06-18</option> <option value="2019-06-17">2019-06-17</option> </select> <br> Variable selection (buttons): <button name="varname" value="WIND">Wind</button> <button name="varname" value="TEMPERATURE">Temperature</button> <button name="varname" value="RAINFALL">Rainfall</button> <br> Vertical level: <select id="plevel"> <option value="SURFACE" selected>Surface</option> <option value="200">200 m</option> <option value="500">500 m</option> </select> <br> Timestep selection (buttons): <button name="timestep" value="000">+00</button> <button name="timestep" value="003">+03</button> <button name="timestep" value="006">+06</button> <hr> <button onclick="refresh()">SHOW FULL PATH</button> <div id="demo"></div>