Как сгенерировать текст кнопки из name кнопки?

Question

[Alisa94]

Здравствуйте. Имею такую ситуацию: нужно создать js файл, который содержал бы список объектов {name: string, viewtype: string, id: string} с именем на кнопках html файла и случайной строкой для id. Он также должен содержать ряд дополнительных объектов с именами, которые начинаются с буквы «H», за которой следует число. Например. ‘H304’. Текст на кнопке должен быть сгенерирован из имени и строки. При нажатии на кнопку функция javascript должна отображать object.name и object.id объекта, представленного этой кнопкой.
Срочно нужна помощь, любая помощь будет оценена.

Comments

[Виталий Киренков]

Вы хотите, чтобы за вас весь код написали? Напишите на codepen хотя бы массив объектов, цикл по этому массиву и разметку, и скажите, что не получается.

[dmitriyivvvv]

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

Answer 1

[dmitriyivvvv]

Что-то вроде этого?

class Button {
  constructor(name) {
    this.name = name;
    this.elem = document.createElement('button'), this.elem.textContent = this.name;
    this.id = String.fromCharCode(Math.random() * (91 - 65) + 65) + Date.now();
  }
  onClick() {
    console.log(this.name, this.id);
  }
  render(parent) {
    parent.appendChild(this.elem);
    this.elem.addEventListener('click', this.onClick.bind(this));
  }
}

const b = new Button('Click me');
b.render(document.body);
b.elem.click();

UPD:

const buttons = document.querySelectorAll('button');
buttons.forEach(el => el.textContent = el.name);

Comments

[Alisa94]

Смотри, у меня в html уже созданы эти кнопки, у них есть свой id и name, мне нужно сделать так, чтобы они получали свой текст из name button-а, я думаю, что для этого я должен передать id и name button-a из html в js и из js сгенерировать текст кнопки в html файл, но как это сделать не знаю. В любом случае очень благодарен за помощь.

[dmitriyivvvv]

Тогда вот то, что вам нужно.

const buttons = document.querySelectorAll('button');
buttons.forEach(el => el.textContent = el.name);

[Alisa94]

dmitriyivvvv, да точно, опубликуй это чтобы отметил решённым. Огромнейшее спасибо.

[dmitriyivvvv]

Alisa94, Обновил свой ответ;)