Функция вызова Js с аргументами
Я создал 4 кнопки и каждую кнопку со своим идентификатором, и у меня есть функция, которая отображает идентификатор данного элемента. поэтому я хочу применить его ко всем этим 4 кнопкам. что я сделал не так?
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<button id='b1'>Click</button>
<button id='b2'>Click</button>
<button id='b3'>Click</button>
<button id='b4'>Click</button>
<script type = "text/javascript">
function show_id(element){
alert(element.id)
}
for(i=0; i!=document.getElementsByTagName('button');i++){
target = document.getElementsByTagName('button')[i]
target.onclick = show_id(target)
}
</script>
</body>
</html>будет ли это отличаться?
Вы, вероятно, имели в виду i!=document.getElementsByTagName('button').length. В нынешнем виде вы сравниваете число с HTMLCollection, потенциально создавая бесконечный цикл, который останавливается только из-за ошибки, которую он создает внутри цикла.
Я изменил его, теперь все они предупреждают о последнем идентификаторе кнопки!
Иди с for(let i=0
все те же результаты
подождите, так вы хотели бы, чтобы кнопка, которая была нажата, делала предупреждение?
да, каждая кнопка, на которую нажимают, показывает свой идентификатор
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 4
Вы можете получить длину элементов кнопки и перебирать кнопки.
Я бы порекомендовал создать класс для чего-то подобного, поэтому вместо того, чтобы просто брать все кнопки, дайте кнопки, которые вы хотели бы задействовать в этом же классе.
Вот как вы можете это сделать.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<button id='b1' class = "btnWithID">Click</button>
<button id='b2' class = "btnWithID">Click</button>
<button id='b3' class = "btnWithID">Click</button>
<button id='b4' class = "btnWithID">Click</button>
<script type = "text/javascript">
function show_id(){
alert(this.id)
}
let btns = document.querySelectorAll('.btnWithID');
for(i=0; i < btns.length ;i++){
btns[i].onclick = show_id;
}
</script>
</body>
</html>когда я запускаю его, он предупреждает все классы, но ничего не показывает, когда я нажимаю на них
Извините за аргументацию, которая будет применяться ко всем 4 кнопкам, я немного запутался. Я обновил свой ответ сейчас
кто-то уже написал тот же ответ, но все равно спасибо.
и я думаю, что нет необходимости в классе, вы можете просто querySelectorAll('button') или getElementByTagName('button')
Вероятно, вы не хотите вызывать эту функцию для каждой кнопки на вашем сайте только для определенного количества кнопок. Вот почему я бы рекомендовал использовать классы.
Сделайте это, как показано ниже -
function show_id() {
alert(this.id)
}
var buttons = document.querySelectorAll("button");
for (var i = 0; i < buttons.length; i++) {
buttons[i].onclick = show_id;
}<button id='b1'>Click</button>
<button id='b2'>Click</button>
<button id='b3'>Click</button>
<button id='b4'>Click</button>Передача аргументов в событие onclick -
Использование HTML -
function show(element, value) {
console.info(element.id);
console.info(value);
}<button id='b1' onclick='show(this, "a")'>Click</button>Использование JS -
function show(value, event) {
console.info(value);
console.info(event.target.id);
}
var button = document.getElementById("b1");
button.onclick = show.bind(this, "a");<button id='b1'>Click</button>Но, как упоминал @connexo, используйте addEventListener для привязки событий DOM.
нужно ли писать (элемент) после функции?
@badr, нет, не требуется. Я удалил его.
я хочу знать, как использовать функцию с аргументами в атрибуте onclick
@badr Ответ: нет. Это почти 100% доказательство действительно плохого подхода к дизайну, если вам это нужно.
так что я просто использую this.something?
Я настоятельно рекомендую вам прекратить использовать циклы на основе индексов, ключевое слово var (если вы точно не знаете, почему вы используете его вместо const или let), а также element.onevent-свойства. Используйте DOM API, который предлагает element.addEventListener(eventName, handlerFunction).
@connexo, согласен! Я попытался придерживаться исходного кода, опубликованного автором, ради проблемы, с которой столкнулся.
Вот как вы могли бы сделать это в современном JS:
for (const button of document.querySelectorAll('button'))
button.addEventListener('click', function() { console.info(this.id) })<button id='b1'>Click</button>
<button id='b2'>Click</button>
<button id='b3'>Click</button>
<button id='b4'>Click</button>Объяснение:
Когда вы регистрируете обычный function() в качестве прослушивателя событий и он выполняется, потому что событие происходит, ключевое слово this внутри функции будет указывать на элемент, на котором был зарегистрирован прослушиватель.
Кстати, за последние 3 года я не использовал ни одного цикла for на основе индекса, и я ежедневно занимаюсь веб-разработкой как профессионал. Я рекомендую вам углубиться в петли forEach и for...of.
я так и сделаю, спасибо за помощь
Хорошо, обновите код для использования с querySelectorAll и forEach, это может помочь вам понять.
document.querySelectorAll('button').forEach((button)=>{
button.addEventListener('click', function(){
console.info(this.id);
});
});<button id='b1'>Click</button>
<button id='b2'>Click</button>
<button id='b3'>Click</button>
<button id='b4'>Click</button>Использование встроенных слушателей событий - действительно плохая практика кодирования, пожалуйста, не предлагайте это тому, кто уже прошел этот этап нуб-кодирования.
я хочу использовать функцию с аргументами в «onclick», вот что я хочу знать, как
Я думаю, что было бы лучше использовать class вместо id.