"onclick“事件没有更新JS函数的结果
"onclick“事件没有更新JS函数的结果
提问于 2019-07-18 07:29:04
我是JavaScript的新手，我正在用它来创建显示图像的完整路径。每个图形路径有四个变量，它们来自两个选择(rundate和plevel)和两个div按钮(varname和timestep)。该功能运行良好，但只有当我按下“显示完整路径”按钮时，即使我在其他按钮上包含了相同的onclick操作。为什么会发生这种情况？我该如何解决这个问题呢？我想要的是当我选择另一个变量时，也就是降雨量，它会自动刷新，而不需要按下“显示完整路径”按钮。
我没有按钮的默认值，因为我还不知道怎么做。因此，为了进行测试，您必须单击任意变量和任意时间步两次。在此之后，您可以更改所需的每个变量，或者只更改其中一个变量，然后按“显示完整路径”按钮。您会注意到，即使您只更改了一个选项，该函数似乎也会记住上次选择的选项。不需要使用“显示完整路径”按钮手动刷新的原因是，在现实中可能有几个变量和时间步长组合。
模拟日期选择：
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>
我希望在更改按钮和选择列表中的任何选项后，输出会自动更新/显示。
回答 2
Stack Overflow用户
回答已采纳
发布于 2019-07-18 08:11:32
如果我理解正确的话，您希望任何按钮单击或下拉更改都可以刷新显示的完整路径。下面是我如何做到这一点。
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>
Stack Overflow用户
发布于 2019-07-18 07:48:37
我认为这就是你真正想要做的，只是使用了错误的控件和脚本。将您的选项更改为单选按钮。现在，行为更自然了。
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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57085217
复制相关文章
相似问题
腾讯云开发者
