使用JavaScript实时转换单位的简单表格

Question

对于我的JavaScript作业，我想创建一个转换长度单位的简单表。我尝试使用函数＆＃34; onchange＆＃34;但似乎没有任何事情发生。这个想法是当用户编辑＆＃34; Meters＆＃34;元素，脚本将使用＆＃34; changem＆＃34;更改所有其他可编辑元素。功能。任何提示都会对你有所帮助。谢谢

<table>

    <tr>

        <td>Meters</td>
        <td contenteditable="true" id="m" onchange="changem()">Enter value</td>

    </tr>

    <tr>

        <td>Centimeters</td>
        <td contenteditable="true" id="cm">Enter value</td>

    </tr>

    <tr>

        <td>Feet</td>
        <td contenteditable="true" id="feet">Enter value</td>

    </tr>

    <tr>

        <td>Yards</td>
        <td contenteditable="true" id="yards">Enter value</td>

    </tr>

    <tr>

        <td>Bananas</td>
        <td contenteditable = "true" id="bananas">Enter value</td>

    </tr>

</table>

<script type="text/javascript">

    function changem() {

        var x = parseInt(document.getElementById('m').innerHTML);

        document.getElementById('cm').innerHTML = x * 100;
        document.getElementById('feet').innerHTML = x * 3.28;
        document.getElementById('yards').innerHTML = x * 1.09;
        document.getElementById('bananas').innerHTML = x * 4.5;


    }

</script>

Answer 1

尝试将其附加到<td contenteditable="true" id="m" onkeyup="changem()">Enter value</td> 事件

<select>

来自w3schools（onchange）：

  

当用户更改// Assuming keys are KEY and values are VAL class MyMap { public: std::set<KEY> keyset; std::set<VAL> valset; std::map<KEY,VAL> theRealMap; // assuming existence of function HAS(S,V) // which returns true if v is in set S bool MyInsert(KEY ky, VAL val) { if (HAS(keyset, ky) return false; if (HAS(valset, val) return false; keyset.insert(ky); valset.insert(vl); return theRealMap.insert(std::pair<KEY,VAL>(ky, val)); } : : 元素的选定选项

时执行JavaScript

这就是为什么你的代码没有工作 - 没有选择元素。

Answer 2

contenteditable个元素不支持onchange()事件，但它们确实支持某些浏览器中的oninput()事件：

<td contenteditable="true" id="m" oninput="changem()">Enter value</td>

示例：

function changem() {
  var x = parseInt(document.getElementById('m').innerHTML);

  document.getElementById('cm').innerHTML = x * 100;
  document.getElementById('feet').innerHTML = x * 3.28;
  document.getElementById('yards').innerHTML = x * 1.09;
  document.getElementById('bananas').innerHTML = x * 4.5;
}

<table>

  <tr>

    <td>Meters</td>
    <td contenteditable="true" id="m" oninput="changem()">Enter value</td>

  </tr>

  <tr>

    <td>Centimeters</td>
    <td contenteditable="true" id="cm">Enter value</td>

  </tr>

  <tr>

    <td>Feet</td>
    <td contenteditable="true" id="feet">Enter value</td>

  </tr>

  <tr>

    <td>Yards</td>
    <td contenteditable="true" id="yards">Enter value</td>

  </tr>

  <tr>

    <td>Bananas</td>
    <td contenteditable="true" id="bananas">Enter value</td>

  </tr>

</table>

但理想情况下，您应该使用input元素来执行此操作。

示例：

function changem() {
  var x = parseInt(document.getElementById('m').value);

  document.getElementById('cm').innerHTML = x * 100;
  document.getElementById('feet').innerHTML = x * 3.28;
  document.getElementById('yards').innerHTML = x * 1.09;
  document.getElementById('bananas').innerHTML = x * 4.5;
}

<table>

  <tr>

    <td>Meters</td>
    <td><input id="m" oninput="changem()" placeholder="Enter value"></td>

  </tr>

  <tr>

    <td>Centimeters</td>
    <td contenteditable="true" id="cm">Enter value</td>

  </tr>

  <tr>

    <td>Feet</td>
    <td contenteditable="true" id="feet">Enter value</td>

  </tr>

  <tr>

    <td>Yards</td>
    <td contenteditable="true" id="yards">Enter value</td>

  </tr>

  <tr>

    <td>Bananas</td>
    <td contenteditable="true" id="bananas">Enter value</td>

  </tr>

</table>

Answer 3

Onchage事件仅适用于表单元素。

更改您的代码，例如：

<td>
  <input id="cm" value="" placeholder="Enter value">
</td>