Skip to main content
incluso se puede quitar el parámetro name del objeto y usar la key ya que se llaman iguales
Origen Enlace

Aquí tienes un ejemplo de código mas simplificado

const modals = document.querySelectorAll('.Modal-Container')
const buttons = {
  accept: {
    numbertext: 'Button1'
  },
  cancel: {
    numbertext: 'Button2'
  },
  custom: {
    numbertext: 'Button3'
  },
  action: function (params) {
    alert(params)
  }
}

modals.forEach(e => {
  Object.keys(buttons).forEach(key => {
 
    let btn_node
    let numbertext = buttons[key].number
text
    if (key !== 'action') {
      let btn = document.createElement('BUTTON')
      btn.classList.add('Btn')
      btn.classList.add(key)
 
      btn_node = document.createTextNode(`${e.id} ${numbertext}`)
      btn.onclick = function () {
        buttons.action(`${e.id} ${numbertext}`)
      }
 
      btn.appendChild(btn_node)
 
      e.querySelector('.Modal-Footer').appendChild(btn)
    }
 
  })
})

Aquí tienes un ejemplo de código mas simplificado

const modals = document.querySelectorAll('.Modal-Container')
const buttons = {
  accept: {
    number: 'Button1'
  },
  cancel: {
    number: 'Button2'
  },
  custom: {
    number: 'Button3'
  },
  action: function (params) {
    alert(params)
  }
}

modals.forEach(e => {
  Object.keys(buttons).forEach(key => {
 
    let btn_node
    let number = buttons[key].number

    if (key !== 'action') {
      let btn = document.createElement('BUTTON')
      btn.classList.add('Btn')
      btn.classList.add(key)
 
      btn_node = document.createTextNode(`${e.id} ${number}`)
      btn.onclick = function () {
        buttons.action(`${e.id} ${number}`)
      }
 
      btn.appendChild(btn_node)
 
      e.querySelector('.Modal-Footer').appendChild(btn)
    }
 
  })
})

Aquí tienes un ejemplo de código mas simplificado

const modals = document.querySelectorAll('.Modal-Container')
const buttons = {
  accept: {
    text: 'Button1'
  },
  cancel: {
    text: 'Button2'
  },
  custom: {
    text: 'Button3'
  },
  action: function (params) {
    alert(params)
  }
}

modals.forEach(e => {
  Object.keys(buttons).forEach(key => {
    let btn_node
    let text = buttons[key].text
    if (key !== 'action') {
      let btn = document.createElement('BUTTON')
      btn.classList.add('Btn')
      btn.classList.add(key)
      btn_node = document.createTextNode(`${e.id} ${text}`)
      btn.onclick = function () {
        buttons.action(`${e.id} ${text}`)
      }
      btn.appendChild(btn_node)
      e.querySelector('.Modal-Footer').appendChild(btn)
    }
  })
})
incluso se puede quitar el parámetro name del objeto y usar la key ya que se llaman iguales
Origen Enlace

Aquí tienes un ejemplo de código mas simplificado

const modals = document.querySelectorAll('.Modal-Container')
const buttons = {
  accept: {
    name: 'accept',
    number: 'Button1'
  },
  cancel: {
    name: 'cancel',
    number: 'Button2'
  },
  custom: {
    name: 'custom',
    number: 'Button3'
  },
  action: function (params) {
    alert(params)
  }
}

modals.forEach(e => {
  Object.keys(buttons).forEach(key => {

    let btn_node
    let name = buttons[key].name
    let number = buttons[key].number

    if (namekey !== 'action') {
      let btn = document.createElement('BUTTON')
      btn.classList.add('Btn')
      btn.classList.add(namekey)

      btn_node = document.createTextNode(`${e.id} ${number}`)
      btn.onclick = function () {
        buttons.action(`${e.id} ${number}`)
      }

      btn.appendChild(btn_node)

      e.querySelector('.Modal-Footer').appendChild(btn)
    }

  })
})

Aquí tienes un ejemplo de código mas simplificado

const modals = document.querySelectorAll('.Modal-Container')
const buttons = {
  accept: {
    name: 'accept',
    number: 'Button1'
  },
  cancel: {
    name: 'cancel',
    number: 'Button2'
  },
  custom: {
    name: 'custom',
    number: 'Button3'
  },
  action: function (params) {
    alert(params)
  }
}

modals.forEach(e => {
  Object.keys(buttons).forEach(key => {

    let btn_node
    let name = buttons[key].name
    let number = buttons[key].number

    if (name !== 'action') {
      let btn = document.createElement('BUTTON')
      btn.classList.add('Btn')
      btn.classList.add(name)

      btn_node = document.createTextNode(`${e.id} ${number}`)
      btn.onclick = function () {
        buttons.action(`${e.id} ${number}`)
      }

      btn.appendChild(btn_node)

      e.querySelector('.Modal-Footer').appendChild(btn)
    }

  })
})

Aquí tienes un ejemplo de código mas simplificado

const modals = document.querySelectorAll('.Modal-Container')
const buttons = {
  accept: {
    number: 'Button1'
  },
  cancel: {
    number: 'Button2'
  },
  custom: {
    number: 'Button3'
  },
  action: function (params) {
    alert(params)
  }
}

modals.forEach(e => {
  Object.keys(buttons).forEach(key => {

    let btn_node
    let number = buttons[key].number

    if (key !== 'action') {
      let btn = document.createElement('BUTTON')
      btn.classList.add('Btn')
      btn.classList.add(key)

      btn_node = document.createTextNode(`${e.id} ${number}`)
      btn.onclick = function () {
        buttons.action(`${e.id} ${number}`)
      }

      btn.appendChild(btn_node)

      e.querySelector('.Modal-Footer').appendChild(btn)
    }

  })
})
Origen Enlace

Aquí tienes un ejemplo de código mas simplificado

const modals = document.querySelectorAll('.Modal-Container')
const buttons = {
  accept: {
    name: 'accept',
    number: 'Button1'
  },
  cancel: {
    name: 'cancel',
    number: 'Button2'
  },
  custom: {
    name: 'custom',
    number: 'Button3'
  },
  action: function (params) {
    alert(params)
  }
}

modals.forEach(e => {
  Object.keys(buttons).forEach(key => {

    let btn_node
    let name = buttons[key].name
    let number = buttons[key].number

    if (name !== 'action') {
      let btn = document.createElement('BUTTON')
      btn.classList.add('Btn')
      btn.classList.add(name)

      btn_node = document.createTextNode(`${e.id} ${number}`)
      btn.onclick = function () {
        buttons.action(`${e.id} ${number}`)
      }

      btn.appendChild(btn_node)

      e.querySelector('.Modal-Footer').appendChild(btn)
    }

  })
})