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

131

09 августа 2019, 03:10

Помогите пожалуста. Имею такую ситуацию, есть две кнопки с разными id в HTML файлe, мне нужно взять все id всех кнопок с классом .btn и передать их в внешний объект в js, к которому я могу получить доступ, но как всё это реализовать не понимаю. Мне потом этот объект нужен, чтобы из него извлекать id для поиска. Любая помощь будет полезна, заранее спасибо.

HTML файл

<ul>
   <li><button id="but1">ButtonOne</button></li>
   <li><button id="but2">ButtonTwo</button></li> 
</ul>

JS конечный файл

objData = {
  id: but1,
  id: but2
}

Answer 1

var buttons = []; 
 
/*$("button.btn").each(function(){ 
  buttons.push({ id: this.id }); 
});*/ 
 
document.querySelectorAll("button.btn").forEach( 
  btn => buttons.push({ id: btn.id }) 
); 
 
console.log(JSON.stringify(buttons));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<ul> 
   <li><button id="but1" class="btn">ButtonOne</button></li> 
   <li><button id="but2" class="btn">ButtonTwo</button></li>  
</ul>

Answer 2

MDN

HTMLButtonElement Наследует свойства от его родителя, HTMLElement

getElementsByClassName - используется для получения всех элементов с классом .btn в виде NodeList

Конвертирование_NodeList_в_Array

let obj = {} 
 
let btnList = Array.from(document.getElementsByClassName('btn')) 
 
btnList.forEach(button => { 
    let { id, innerText } = button 
    obj[id] = innerText 
}) 
 
console.log(obj) 
 
for (let key in obj) { 
    let val = obj[key] 
    console.log(`id: ${key} innerText: ${val}`) 
}

<ul> 
   <li><button id="but1" class="btn">ButtonOne</button></li> 
   <li><button id="but2" class="btn">ButtonTwo</button></li>  
</ul>

Answer 3

Mне удалось найти решение, вот как оно выглядит

[...document.getElementsByClassName('btn-view')].reduce((a, c, i ) => (a['H' + i + ' - h ' + i] = {name: c.name, id: c.id}, a), {}); console.log(objData);

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Убрать двойной клик по превью видео

Есть такой html:

134

javascript

Сумма в зависимости от значения

есть 2 слайдера(input range) подскажите, как в зависимости от значений month и cash менять значение формулыДумал функцию создать и передавать параметры,...

javascript

Выводить данные с БД mysql на график (библиотека D3)

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

109

javascript

Webpack, Typescript, запуск кода после загрузки DOM

Вопрос заключается в следующем: Есть класс ts, например меню, элементы которого являются приватным свойством, в конструкторе они берутся через...