Question

实际上我不知道为什么 lengthselector1 和 lengthselector2 不调用我的 length() 函数此外，反转按钮不调用我的函数 length() 仅 invert() 函数我不知道，因为只有 lengthinput 调用 length() 函数

有人可以帮我处理这个代码吗？在我看来，这一切都是正确的。

function length() {
  var lengthinput = parseFloat(document.getElementById('lengthinput').value);
  var oper = document.getElementById('lengthselector1').value;
  var oper2 = document.getElementById('lengthselector2').value;

  if (oper === 'k' && oper2 === 'm') {
    document.getElementById('lengthresult').value = lengthinput * 1000 || 0;
  }
  if (oper === 'k' && oper2 === 'd') {
    document.getElementById('lengthresult').value = lengthinput * 10000 || 0;
  }
  if (oper === 'k' && oper2 === 'c') {
    document.getElementById('lengthresult').value = lengthinput * 100000 || 0;
  }
  if (oper === 'k' && oper2 === 'mi') {
    document.getElementById('lengthresult').value = lengthinput * 1000000 || 0;
  }
  if (oper === 'k' && oper2 === 'mic') {
    document.getElementById('lengthresult').value = lengthinput * 1.0000E+9 || 0;
  }
  if (oper === 'k' && oper2 === 'de') {
    document.getElementById('lengthresult').value = lengthinput * 100 || 0;
  }
  if (oper === 'k' && oper2 === 'h') {
    document.getElementById('lengthresult').value = lengthinput * 10 || 0;
  }
  if (oper === 'k' && oper2 === 'me') {
    document.getElementById('lengthresult').value = lengthinput / 1000 || 0;
  }
  if (oper === 'k' && oper2 === 'g') {
    document.getElementById('lengthresult').value = lengthinput / 1000000 || 0;
  }
  if (oper === 'k' && oper2 === 'z') {
    document.getElementById('lengthresult').value = lengthinput / 1.0000E+18 || 0;
  }
  if (oper === 'k' && oper2 === 'i') {
    document.getElementById('lengthresult').value = lengthinput * 39370.0787 || 0;
  }
  if (oper === 'k' && oper2 === 'a') {
    document.getElementById('lengthresult').value = lengthinput * 1.0000E+13 || 0;
  }
}

<table id="tbn2">
  <tr>
    <td> <input type="number" value=0 id="lengthinput" oninput="length()" /> <br/><br/> </td>
    <td> </td>
    <td> <input type="text" value=0 id="lengthresult" readonly /><br><br> </td>
  </tr>
  <tr>
    <td>
      <select id="lengthselector1" onchange="length()">
        <option selected value="k">Kilometre</option>
        <option value="m">Metre</option>
        <option value="d">Decimetre</option>
        <option value="c">Centimetre</option>
        <option value="mi">Millimetre</option>
        <option value="mic">Micron</option>
        <option value="de">Dekametre</option>
        <option value="h">Hectometre</option>
        <option value="me">Megametre</option>
        <option value="g">Gigametre</option>
        <option value="z">Zettametre</option>
        <option value="i">Inch</option>
        <option value="a">Angstrom</option>
      </select>
    </td>
    <td> <button onclick="invert(); length()">Invert</button> </td>
    <td>
      <select id="lengthselector2" onchange="length()">
        <option value="k">Kilometre</option>
        <option selected value="m">Metre</option>
        <option value="d">Decimetre</option>
        <option value="c">Centimetre</option>
        <option value="mi">Millimetre</option>
        <option value="mic">Micron</option>
        <option value="de">Dekametre</option>
        <option value="h">Hectometre</option>
        <option value="me">Megametre</option>
        <option value="g">Gigametre</option>
        <option value="z">Zettametre</option>
        <option value="i">Inch</option>
        <option value="a">Angstrom</option>
      </select>
    </td>

  </tr>
</table>

Answer 1

如果您将函数调用为 length 以外的其他内容，则看起来您的代码有效。这肯定是某种保留字，它非常通用。它可能被某些东西覆盖了。如果您调用您的函数，例如 calculateLength()，它会起作用。

但是，您必须注意到这种编码风格极其繁琐且效率低下（手动逐个检查每个组合）。由于您有 12 个单位乘以 12 个单位，因此您必须将代码复制 144 次 (!!)，这是编码中的一个危险信号。

更有效的方法是拥有一个映射对象，然后是 4 行代码：

const $oper1 = document.getElementById('lengthselector1'); // cache your elements
const $oper2 = document.getElementById('lengthselector2');
const $result = document.getElementById('lengthresult');
const $lengthInput = document.getElementById('lengthinput');

const unitsMappings = {
  k: {
    k: 1,
    m: 1000,
    d: 10000,
    c: 100000,
    mi: 1000000,
    mic: 1.0000E+9,
    de: 100,
    h: 10,
    me: 1/1000,
    g: 1/1000000,
    z: 1/1.0000E+18,
    i: 39370.0787,
    a: 1.0000E+13
  }
}

function calculateLength() {
  const lengthinput = parseFloat($lengthInput.value),
        oper1 = $oper1.value,
        oper2 = $oper2.value;
  $result.value = lengthinput * unitsMappings[oper1][oper2] || 0;
}

<table id="tbn2">
  <tr>
    <td> <input type="number" value=0 id="lengthinput" oninput="calculateLength()" /> <br/><br/> </td>
    <td> </td>
    <td> <input type="text" value=0 id="lengthresult" readonly /><br><br> </td>
  </tr>
  <tr>
    <td>
      <select id="lengthselector1" onchange="calculateLength()">
        <option selected value="k">Kilometre</option>
        <option value="m">Metre</option>
        <option value="d">Decimetre</option>
        <option value="c">Centimetre</option>
        <option value="mi">Millimetre</option>
        <option value="mic">Micron</option>
        <option value="de">Dekametre</option>
        <option value="h">Hectometre</option>
        <option value="me">Megametre</option>
        <option value="g">Gigametre</option>
        <option value="z">Zettametre</option>
        <option value="i">Inch</option>
        <option value="a">Angstrom</option>
      </select>
    </td>
    <td> <button onclick="invert(); calculateLength()">Invert</button> </td>
    <td>
      <select id="lengthselector2" onchange="calculateLength()">
        <option value="k">Kilometre</option>
        <option selected value="m">Metre</option>
        <option value="d">Decimetre</option>
        <option value="c">Centimetre</option>
        <option value="mi">Millimetre</option>
        <option value="mic">Micron</option>
        <option value="de">Dekametre</option>
        <option value="h">Hectometre</option>
        <option value="me">Megametre</option>
        <option value="g">Gigametre</option>
        <option value="z">Zettametre</option>
        <option value="i">Inch</option>
        <option value="a">Angstrom</option>
      </select>
    </td>

  </tr>
</table>

有人能告诉我为什么这段代码不叫我那个函数吗？

1 个答案: