Как передать id и name button-а из html в js объект?

Question

[Alisa94]

Помогите пожалуста. Имею такую ситуацию, есть две кнопки с разными name-ами и id в html файлe, мне нужно передать id и name этих двух кнопок в js и добавить их в объект(желательно реализовать это сразу в виде предачи в объект). Любая помощь будет полезна, заранее спасибо.

<ul>
  <li><button name="button1" id="1">ButtonOne</button></li>
  <li><button name="button2" id="2">ButtonTwo</button></li>
</ul>

Answer 1

[Владимир Проскурин]

1) У вас неправильное значение у id, оно не должно начинаться с цифры или других символов. Лучше допишите but1, but2 и.т.д.
2) Обращаться к элементам DOM можно по селекторам, определите общий селектор к этим элементам или к родителю, и вызовете document.querySelectorAll с данным селектором, этот метод вернет список элементов, в данном случае кнопки.

Из вопроса не очень понятно, в чем именно у вас трудности.

Comments

[Alisa94]

Огромнейшее спасибо.

[Владимир Проскурин]

Alisa94, не используйте код из выбранного вами ответа от Дмитрия. Код нормальный, если вы его понимаете, но если у вас нет опыта работы с reduce, лучше используйте классический цикл, т.к. необдуманный копипаст приводит к ошибкам и не ожидаемому поведению. А также, не пишите document.querySelectorAll('button'), т.к. этот код будет искать все кнопки на странице, лучше ищите в определенном элементе.
Вот более подходящий для вас код
jsfiddle.net/nLerjz5t

[Alisa94]

Владимир Проскурин, Огромнейшее спасибо.

Answer 2

[dmitriyivvvv]

Так?

const buttons = [...document.querySelectorAll('button')].reduce((a, c, i) =>
(a['button' + i] = {name: c.name, id: c.id}, a), {});

Comments

[Alisa94]

Огромнейшее спасибо, очень помогло.

Answer 3

[sriver]

не до конца понял что вы хотите сделать, но например с помощью jQuery можно получить айди и нэйм примерно так:

$("button").each(function(){
    alert("id " + $(this).attr("id") + ' is ' + $(this).attr("name"));
})

Comments

[Alisa94]

Огромнейшее спасибо.