Question

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

v.pow(2)

我试图调用函数＆＃39; crewclassFunction＆＃39;当值发生变化时。

<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();

  };

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

Answer 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;
};

Answer 2

你的问题就在这一行

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();
  }
}

Answer 3

＆＃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;

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

3 个答案: