更改下拉列表值后,Javascript更改变量

时间:2017-11-24 09:31:00

标签: javascript

我尝试在javascript中做一些初学者的事情。我制作了一个简单的下拉列表,但我无法让它发挥作用。变量保持不确定'。我做错了什么?

v.pow(2)

我试图调用函数' crewclassFunction'当值发生变化时。

<span class="textmenu">I’m coaching <div class="list"><select onchange="crewclassFunction(this.value)">
  <option value="heavywomen">heavyweight women</option>
  <option value="heavywomen">heavyweight men</option>
  <option value="lightwomen">lightweight women</option>
  <option value="lightmen">lightweight men</option>

然后调用函数&#39; setResult&#39;更改HTML中的变量。

function crewclassFunction(crewclass) {

  if(crewclass.value == "heavywomen") {
  var span = 432;
  var innerHandle = 234;
  var bladeAngle = 435;
  var oarLength = 234;
  var overlay = 24;
  var height = 34;
  }

  setResult();

  };

希望有人可以帮助我!感谢。

3 个答案:

答案 0 :(得分:1)

您在crewclassFunction上本地声明了变量,而您无法在setResult上使用该变量。您必须将其作为参数传递。

function crewclassFunction(crewclass) {

  if(crewclass== "heavywomen") {
     var span = 432;
     var innerHandle = 234;
     var bladeAngle = 435;
     var oarLength = 234;
     var overlay = 24;
     var height = 34;
  }

  setResult(span, innerHandle, bladeAngle, oarLength, overlay, height);

};


function setResult(span, innerHandle, bladeAngle, oarLength, overlay, height) {
    document.getElementById("spanresult").innerHTML= span;
    document.getElementById("handleresult").innerHTML = innerHandle;
    document.getElementById("angleresult").innerHTML = bladeAngle;
    document.getElementById("lengthresult").innerHTML = oarLength;
    document.getElementById("heightresult").innerHTML = height;
    document.getElementById("overlayresult").innerHTML = overlay;
};

答案 1 :(得分:0)

你的问题就在这一行

if(crewclass.value == "heavywomen") {

您已经通过

传递了一个值
<select onchange="crewclassFunction(this.value)">

所以,你不需要再次检查它的价值属性,只需要它

if(crewclass == "heavywomen") {

此外,您需要将其他局部变量传递给crewclassFunction到另一个函数,否则它们在setResult的范围内不可用。

更好 - 只在setResult中重构这些变量,因为你只在这个方法中使用它们

function setResult() {
  var span = 432;
  var innerHandle = 234;
  var bladeAngle = 435;
  var oarLength = 234;
  var overlay = 24;
  var height = 34;
  document.getElementById("spanresult").innerHTML= span;
  document.getElementById("handleresult").innerHTML = innerHandle;
  document.getElementById("angleresult").innerHTML = bladeAngle;
  document.getElementById("lengthresult").innerHTML = oarLength;
  document.getElementById("heightresult").innerHTML = height;
  document.getElementById("overlayresult").innerHTML = overlay;
}

然后将该方法称为

function crewclassFunction(crewclass) {
  if(crewclass == "heavywomen") {
    setResult();
  }
}

答案 2 :(得分:0)

&#13;
&#13;
function crewclassFunction(crewclass) {
  if(crewclass == "heavywomen") {
    var span = 432;
    var innerHandle = 234;
    var bladeAngle = 435;
    var oarLength = 234;
    var overlay = 24;
    var height = 34;
  }

  setResult(span, innerHandle, bladeAngle, oarLength, overlay, height);
};

function setResult(span, innerHandle, bladeAngle, oarLength, overlay, height) {
  document.getElementById("spanresult").innerHTML= span;
  document.getElementById("handleresult").innerHTML = innerHandle;
  document.getElementById("angleresult").innerHTML = bladeAngle;
  document.getElementById("lengthresult").innerHTML = oarLength;
  document.getElementById("heightresult").innerHTML = height;
  document.getElementById("overlayresult").innerHTML = overlay;
};
&#13;
<span class="textmenu">I’m coachin</span>
<div class="list">
  <select onchange="crewclassFunction(this.value)">
    <option value="heavymen">heavyweight men</option>
    <option value="heavywomen">heavyweight women</option>
    <option value="lightwomen">lightweight women</option>
    <option value="lightmen">lightweight men</option>
  </select>
</div>


<!-- mock -->
<br />
<div id="spanresult">spanresult</div>
<div id="handleresult">handleresult</div>
<div id="angleresult">angleresult</div>
<div id="lengthresult">lengthresult</div>
<div id="heightresult">heightresult</div>
<div id="overlayresult">overlayresult</div>
&#13;
&#13;
&#13;