Связывание onclick в JavaScript без использования JS непосредственно в файле HTML

Question

Ранее у меня была эта строка в моем HTML-файле:

<input type="button" value="1" name="btn1" id="btn1" onclick="showNum(1)" />

Это прекрасно работает, но я не хочу включать имя метода в HTML-файл.Я хотел бы иметь что-то вроде этого в HTML:

<input type="button" value="1" name="btn1" id="btn1" />

И затем я хочу привязать эту кнопку к методу в файле JS.Я попробовал этот код, и он не работает:

window.onload = function() {
    document.getElementById("btn1").onclick = showNum(1);
};

Как мне связать btn1 для запуска showNum(1) с использованием JavaScript?

Answer 1

Также можно привязать ссылку к функции, например так:

var showNum = function(){
    alert(this.value);
}
window.onload = function() {
    document.getElementById("btn1").onclick = showNum;
};

<input type="button" value="1" id="btn1" />

Answer 2

Я не могу сказать вам точно , почему она работает так, но если вы используете анонимную функцию с showNum(1); внутри нее при назначении onclick, она прекрасно работает.

window.onload = function() {
    document.getElementById("btn1").onclick = function () {
        showNum(1);
    }
};

Также совет, window.onload можно использовать только один раз, поэтому, если у вас есть главная страница на вашем сайте, которая также должна запускать скрипт при запуске страницы, она может быть переопределена.Используйте функцию автозапуска, подобную этой, и тогда вам не придется об этом беспокоиться, и вы можете иметь столько, сколько захотите.Кроме того, он чище и выглядит лучше (по крайней мере, для меня).

(function () {
    document.getElementById("btn1").onclick = function () {
        showNum(1);
    }
})();

Просто убедитесь, что он соответствует остальной части кода JS и HTML, поскольку страницы загружаются сверху вниз.

Answer 3

Вам необходимо создать новую функцию, которая вызывает showNum() с нужным аргументом.

window.onload = function() {
    document.getElementById("btn1").onclick = function() {showNum(1);};
};

Вы также можете использовать метод .bind() для привязки аргумента.

window.onload = function() {
    document.getElementById("btn1").onclick = showNum.bind(null, 1);
};

Answer 4

showNum вместо showNum(1)

showNum - это обработчик, но showNum(1) - это результат выполнения.

, если требуется параметр: showNum.bind(this, 1);

Или даже лучше - addEventListener можно использовать: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

Answer 5

window.onload = function() {
    document.getElementById("btn1").addEventListener('click', ()=>showNum(1));
};