Question 355827 in Html Question posted in
Some basic documentation can be found here.

Html – How can I make my javascript event fire in this scenario

I have this code for making a button programatically

function makeButton(text, classList, parent, onClick){
    let button = document.createElement('button')
    button.classList = classList
    button.innerHTML = text
    button.onclick = onClick
    parent.appendChild(button)
    return button
}

it has functioned fine so far in situations like this where I’m adding a button to a DOM element that has already been instantiated

let diag = new PopupModal()

makeButton('CANCEL', 'btn btn-sm btn-secondary', diag.footer, function() {
     diag.closeFunc()
})

however I’d like to use it in a new way where the button’s function is added during the constructor of the class for example

function makeElement(type, classList, parent){
    let el = document.createElement(type)
    el.classList = classList
    parent.appendChild(el)
    return el
}

class complexForm_newProductWithType{
    constructor(doc){
        this.container = document.createElement('div')
        this.container.classList = 'container'
        this.doc = doc

        this.identifiers = makeElement('div', 'row', this.container)
        this.descriptors = makeElement('div', 'row', this.container)
        this.options = makeElement('div', 'row', this.container)
        this.buttons = makeElement('div', 'row', this.container)
        ...
        this.button_save = makeButton('SAVE', 'btn btn-sm btn-success', this.buttons, function() {
            console.log('save')
        })
        this.button_cancel = makeButton('CANCEL', 'btn btn-sm btn-secondary', this.buttons, function() {
            console.log('cancel')
        })
    }
}
function addForm(doc){
    form = new complexForm_newProductWithType(doc)
    document.getElementById("doc-selection").innerHTML = form.container.outerHTML
}

in this scenario the button is created with the correct style and text but the event does not fire. I’ve tried changing the line onclick = onClick to button.addEventListener('click', onClick, false) with no effect

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Thanks to Xiahaolin I realized my issue. Since his writing of my code functioned I looked to see what was different. Which was that he used document.body.appendChild I had used innerHTML to insert my dom elements. changing it to appendChild(form.container) fixed my issue. Thank you for your help!


  2. 0

    I tested your basic code,the code is runnable, Can you provide console information?

      function makeButton(text, classList, parent, onClick) {
            let button = document.createElement('button');
            button.classList = classList;
            button.innerHTML = text;
            button.onclick = onClick;
            parent.appendChild(button);
            return button;
        };


        class FormWithLotsOfButtonsAndInput {
            constructor() {
                this.diag = document.createElement('div')
                document.body.appendChild(this.diag)
                this.button1 = makeButton('save', 'btn', this.diag, function () {
                    console.log('do something')
                });
            }
        }

        const _tools = new FormWithLotsOfButtonsAndInput;


        console.log(_tools)
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search