javascript - 两个使用JavaScript链接的自动更新(根据其他输入)数字输入字段

我有HTML表单中的这两个数字输入字段。

<div class="orderinput">
    <label>
        Number of pages:
        <input type="number" id="pagecount" onchange="calculatecost();convertPages()" value="1" />
        or words:
        <input type="number" id="wordcount" onchange="convertWords"/>
    </label>
</div>

我需要做的是创建一个JavaScript函数，如果用户在pagecount中键入，则将pagecount转换为wordcount并更新wordcount字段onchange；如果用户在wordcount中键入，还将wordcount转换为pagecount并更新pagecount字段onchange。我的.js文件中的此代码段当前在键入pagecount时仅更新wordcount字段，而在键入wordcount时不更新pagecount。

function convertPages(){
    var pgs = document.forms["ordercalc"].elements["pagecount"].value;
    var wrds = pgs * 275;
    document.forms["ordercalc"].elements["wordcount"].value = wrds ;}
function convertWords(){
    var wrds = document.forms["ordercalc"].elements["wordcount"].value;
    var pgs = wrds * 0.0036;
    document.forms["ordercalc"].elements["pagecount"].value = pgs ;
}

我想在一个功能中执行此操作，但我不知道如何操作。请注意，页面计数字段中的1个单位==单词计数字段中的275个单位。

最佳答案

您可以在两个onchange中都调用一个函数，但是存在一个问题。以下4行来自您的2个函数。根据它们的顺序，您将获得不同的值恕我直言。因此，您需要知道页面或单词值是否已更改，然后进行其他调整。但是随后您将返回2个函数或if / else语句。

    //pgs = p.value;
    //wrds = pgs * 275;
    //
    //wrds = w.value;
    //pgs = wrds * 0.0036;

如果您想知道更改了哪个DOM元素，可以使用event.target。您可以通过查看例如event.target.id来区分它们。

    function convertBoth(el){
        var p = document.getElementById("pagecount"); // OK
        var w = document.getElementById("wordcount"); // OK
        var pgs, wrds;

        if (el.id == "pagecount") {
          pgs = p.value;
          wrds = pgs * 275;
        } else {
          wrds = w.value;
          pgs = wrds * 0.0036;
        }

        w.value = wrds; // OK
        p.value = pgs; // OK
    }

<div class="orderinput">
    <label>
        Number of pages:
        <input type="number" id="pagecount" onchange="convertBoth(this)" value="1" />
        or words:
        <input type="number" id="wordcount" onchange="convertBoth(this)"/>
    </label>
</div>

关于javascript - 两个使用JavaScript链接的自动更新(根据其他输入)数字输入字段，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/35143169/