Question

我有来自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转换为wordcount并更新wordcount字段onchange如果用户键入pagecount并将wordcount转换为pagecount并更新pagecount字段onchange如果用户键入字数。来自我的.js文件的这个片段我当前只有当keycount被键入时才更新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 ;
}

我想在一个功能中这样做，但我不知道如何。请注意，在pagecount字段中有1个单位=在wordcount字段中有= 275个单位。

Answer 1

你可以在两个onchanges中调用一个函数，但是有一个问题。以下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编号输入字段

1 个答案: