Question

我是JavaScript的新手，并且使用它来创建用于显示图像的完整路径。每个图形路径都有四个变量，这些变量来自2个选择（运行日期和plevel）和2个div按钮（变量名和时间步长）。该功能运行良好，但仅当我按下“ SHOW FULL PATH”按钮时，即使我在其他按钮上包含了相同的onclick动作，也是如此。为什么会这样呢？我该如何解决？我想要的是，当我选择另一个变量（即RAINFALL）时，它会自动刷新，而无需按下“ SHOW FULL PATH”按钮。

我没有按钮的默认值，因为我还不知道该怎么做。因此，对于测试，您必须在任何时间步长上两次单击两次。之后，您可以更改所需的每个变量或仅更改其中一个，然后按“ SHOW FULL PATH”按钮。您会注意到，即使仅更改一个功能，该功能似乎也记住了最后选择的选项。无需使用“ SHOW FULL PATH”按钮进行手动刷新的原因是，实际上，可能存在多种变量和时间步长组合。

模拟日期选择：

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>

我希望更改按钮和选择列表中的任何选项后，输出会自动更新/显示。

Answer 1

我认为这是您实际尝试做的，只是使用了错误的控件和脚本。将选项更改为单选按钮。现在，行为变得更自然了。

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

如果我理解正确，则希望单击任何按钮或更改下拉菜单以刷新显示的完整路径。这就是我的方法。

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>

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

2 个答案: