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

我有一个包含以下代码的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;
        }
    }
}

函数getPatroller（patroller）{
var元素=document.getElementById（patroller）；
/**@type{Date}*/
变量日期=新日期（）；
/**@const*/
变量ID=2，
LAST=0，
第一个=1，
级别=3；
/**@type{number}*/
var=0；
/**@type{string}*/
var水平；
/**@type{Array.}*/
var elementId=patroller.split（'.'）；
对于（var j=0；j

您可以在旧版IE（IE8及之前版本）上使用

addEventListener

，或

attachEvent

在这种情况下：

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

有一个

hookEvent

函数，如果您需要支持较旧的IE并且不想使用像jQuery这样的DOM库，可以使用它

---

请回复您的评论：

---

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

我想你的意思是，有多个元素具有不同的

id

s，而不是

id

的变化。：-）

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

使用

querySelectorAll

（它返回一个列表）和一个有效的CSS选择器，该选择器将选择元素（

[id^=patroller]

，例如，或者一些结构化的东西，或者给它们一个类），并在每个条目上使用

addEventListener

循环生成的列表，如上所述

或者，将

change

事件挂接到包含所有这些输入的元素上，接受处理程序函数中的事件参数，并查看其上的

target

属性，这将是发生更改的输入。这称为“事件委派”

下面是一个

addEventListener

——2的唯一示例：

//在容器上钩住'change'：
document.getElementById（“容器”）.addEventListener（“更改”，函数（e）{
//是巡警吗？
if（e.target&&e.target.id&&e.target.id.substring（0,9）==“巡逻者”）{
//对
警报（“巡逻者”+e.target.id+”更改为“+e.target.value”）；
}
}，假）

我们关心这些输入，因此当您更改它们时，您将看到一个警报：


我们不在乎这些，改变它们没有任何作用：


到目前为止你有什么？@Scarlemerlin:呃，至少。@Scarlemerlin，请不要在这里侮辱我。我知道如何做静态id，而不是动态id…。我不知道我是否清楚：每个更改事件的id都会更改，即patrollerID.1.1更改为patrollerID.1.2，等等。@BackPacker777:啊，好的。我已经更新了上面的内容。