Функция вызова Js с аргументами

ProgramBox

Функция вызова Js с аргументами

Post author:admin
Запись опубликована:9 ноября, 2022
Post category:Вопросы по программированию

#javascript #html

#javascript #HTML

Вопрос:

Я создал 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>

Развернуть фрагмент

1. Я думаю, было бы лучше использовать class вместо id.

2. будет ли это по-другому?

3. Вы , наверное , имели в виду i!=document.getElementsByTagName('button').length . В нынешнем виде вы сравниваете число с HTMLCollection, потенциально создавая бесконечный цикл, который останавливается только из-за ошибки, которую он создает внутри цикла.

4. я изменил его, теперь все они предупреждают о последнем идентификаторе кнопки!

5. подождите, так вы хотели бы, чтобы кнопка, которая была нажата, делала оповещение?

Ответ №1:

Сделайте это, как показано ниже —

 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.log(element.id);
  console.log(value);
}

 <button id='b1' onclick='show(this, "a")'>Click</button>

Развернуть фрагмент

Использование JS —

 function show(value, event) {
 console.log(value);
 console.log(event.target.id);
}

var button = document.getElementById("b1");

button.onclick = show.bind(this, "a");

 <button id='b1'>Click</button>

Развернуть фрагмент

Но, как упоминалось @connexo, используется addEventListener для привязки событий DOM.

1. необходимо ли писать (элемент) после функции?

2. @badr, Нет, не требуется. Я удалил его.

3. я хочу знать, как использовать функцию с аргументами в атрибуте «onclick»

4. Я действительно рекомендую вам прекратить использовать циклы на основе индекса, var ключевое слово (если вы точно не знаете, почему вы используете его вместо const или let ), а также element.onevent -свойства. Используйте DOM API, который предлагает element.addEventListener(eventName, handlerFunction) .

5. @connexo, согласен! Я пытался придерживаться исходного кода, размещенного на постере, ради решения возникшей проблемы.

Ответ №2:

Вот как вы могли бы сделать это в современном JS:

 for (const button of document.querySelectorAll('button'))
  button.addEventListener('click', function() { console.log(this.id) })

 <button id='b1'>Click</button>
<button id='b2'>Click</button>
<button id='b3'>Click</button>
<button id='b4'>Click</button>

Развернуть фрагмент

Объяснение:

Когда вы регистрируете regular function() в качестве прослушивателя событий, и он выполняется, потому что происходит событие, this ключевое слово внутри функции будет указывать на элемент, на котором был зарегистрирован прослушиватель.

1. Кстати, за последние 3 года я не использовал ни одного цикла for на основе индекса, и я ежедневно занимаюсь веб-разработкой как профессионал. Я рекомендую вам углубиться в forEach for...of циклы и.

2. я сделаю это, спасибо за помощь

Ответ №3:

Хорошо, обновите код для использования с querySelectorAll и forEach , возможно, это поможет вам понять.

 document.querySelectorAll('button').forEach((button)=>{
  button.addEventListener('click', function(){
   console.log(this.id);
  });
});

 <button id='b1'>Click</button>
<button id='b2'>Click</button>
<button id='b3'>Click</button>
<button id='b4'>Click</button>

Развернуть фрагмент

1. Использование встроенных прослушивателей событий — действительно плохая практика кодирования, пожалуйста, не предлагайте это кому-то, кто уже прошел этот этап кодирования noob.

2. я хочу использовать функцию с аргументами в «onclick», вот что я хочу знать, как

Ответ №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>

Развернуть фрагмент

1. когда я запускаю ее, она предупреждает все классы, но ничего не отображается, когда я нажимаю на них

2. Извините за аргументацию, которая будет применена ко всем 4 кнопкам, которые я немного пропустил. Теперь я обновил свой ответ

3. кто-то уже написал тот же ответ, но в любом случае спасибо.

4. и нет необходимости в классе, я думаю, вы можете просто querySelectorAll('button') или getElementByTagName('button')

5. Вероятно, вы не хотите вызывать эту функцию для каждой кнопки на вашем сайте только для определенного количества кнопок. Вот почему я бы рекомендовал использовать классы.