Question

我有一个包含以下代码的HTML页面：

<input type="number" maxlength="5" id="patrollerID.1.1" placeholder="ID Num" onchange="getPatroller(this.id)" />

我想将JavaScript移出html。 id会根据更改事件而更改。如何将所有JavaScript保存在我的.js文件中而不是内联？

这就是我所拥有的：

function getPatroller(patroller) {
    var element = document.getElementById(patroller);
    /** @type {Date} */
    var date = new Date();
    /** @const */
    var ID = 2,
        LAST = 0,
        FIRST = 1,
        LEVEL = 3;
    /** @type {number} */
    var exists = 0;
    /** @type {string} */
    var level;
    /** @type {Array.<string>} */
    var elementId = patroller.split('.');
    for (var j = 0; j < patrollers.length; j++) {
        if (element.value == patrollers[j][ID]) {
            document.getElementById("patroller." + elementId[1] + "." + elementId[2]).innerHTML = "<h4>" + patrollers[j][FIRST] + " " + patrollers[j][LAST] + "</h4>";
            if (patrollers[j][LEVEL] == 1) {
                level = "Basic";
            } else if (patrollers[j][LEVEL] == 2) {
                level = "Senior";
            } else {
                level = "Certified";
            }
            document.getElementById("level." + elementId[1] + "." + elementId[2]).innerHTML = "<h4>" + level + "</h4>";
            var minutes = date.getMinutes();
            if (minutes < 10) {
                minutes = "0" + minutes;
            }
            document.getElementById("time." + elementId[1] + "." + elementId[2]).innerHTML = "<h4>" + date.getHours() + ":" + minutes + "</h4>";
            patrollers.splice(patrollers[j]--, 1); //remove array element
            elementId[2]++;
            /** @type {boolean} */
            var addTeam = setCounter(elementId[1]);
            if (addTeam === true) {
                addPatroller(elementId[1], elementId[2]);
            }
            exists = 1;
            break;
        }
    }
    if (exists == 0) {
        alert("PLEASE TRY AGAIN!");//Do something here if number already in use.
        element.value = '';
    }
}

function setCounter(teamNum) {
    /** @const */
    var MAX_TEAM = 4;
    if (teamNum == 1) {
        if (typeof t1Counter == 'undefined') {
            t1Counter = 1;
        }
        if (t1Counter < MAX_TEAM) {
            t1Counter++;
            return true;
        } else {
            return false;
        }
    } else if (teamNum == 2) {
        if (typeof t2Counter == 'undefined') {
            t2Counter = 1;
        }
        if (t2Counter < MAX_TEAM) {
            t2Counter++;
            return true;
        } else {
            return false;
        }
    } else if (teamNum == 3) {
        if (typeof t3Counter == 'undefined') {
            t3Counter = 1;
        }
        if (t3Counter < MAX_TEAM) {
            t3Counter++;
            return true;
        } else {
            return false;
        }
    } else if (teamNum == 4) {
        if (typeof t4Counter == 'undefined') {
            t4Counter = 1;
        }
        if (t4Counter < MAX_TEAM) {
            t4Counter++;
            return true;
        } else {
            return false;
        }
    }  else {
        if (typeof t5Counter == 'undefined') {
            t5Counter = 1;
        }
        if (t5Counter < MAX_TEAM) {
            t5Counter++;
            return true;
        } else {
            return false;
        }
    }
}

Answer 1

您在旧版IE（IE8及之前版本）上使用addEventListener或attachEvent。

在这种情况下：

document.getElementById("patrollerID.1.1").addEventListener("change", function() {
    // Here, `this` refers to the element, so:
    getPatroller(this.id);
}, false);

This other answer有一个hookEvent函数，如果你需要支持旧的IE并且不想使用像jQuery这样的DOM库，你可以使用它。

重新评论：

我不知道我是否清楚：每个更改事件的ID都会更改，即patrollerID.1.1更改为patrollerID.1.2等

我认为您的意思是，有多个元素具有不同的id s，而不是id更改。： - ）

在这种情况下，您有两种选择：

使用querySelectorAll（返回列表）和一个有效的CSS选择器，它将选择元素（例如[id^=patroller]，或者可能是结构的东西，或者给它们一个类）和如上所述，在每个条目上使用addEventListener循环遍历结果列表。
或者，将change事件挂钩到包含所有这些输入的元素上，接受处理函数中的event参数，然后查看{{1}它上面的属性 - 这将是发生更改的输入。这称为“事件委托”。

这是一个target - 只有＃2的例子：

addEventListener

// Hook `change` on the container:
document.getElementById("container").addEventListener("change", function(e) {
  // Is it a patroller?
  if (e.target && e.target.id && e.target.id.substring(0, 9) === "patroller") {
    // yes
    alert("Patroller " + e.target.id + " changed to " + e.target.value);
  }
}, false);

如何将id作为参数传递给函数？

1 个答案: