Add onClick event to element created with createElement

Navigation
3

I have the following code: 

FForm.prototype._addControls = function() {

    // main controls wrapper
    this.ctrls = createElement( 'div', { cName : 'fs-controls', appendTo : this.el } );

    // continue button (jump to next field)
    **this.ctrlContinue = createElement( 'button', { cName : 'fs-continue', inner : 'Proxima', appendTo : this.ctrls } );**

    this._showCtrl( this.ctrlContinue );

    // navigation dots
    if( this.options.ctrlNavDots ) {
        this.ctrlNav = createElement( 'nav', { cName : 'fs-nav-dots', appendTo : this.ctrls } );
        var dots = '';
        for( var i = 0; i < this.fieldsCount; ++i ) {
            dots += i === this.current ? '<button class="fs-dot-current" ></button>' : '<button disabled></button>';
        }
        this.ctrlNav.innerHTML = dots;
        this._showCtrl( this.ctrlNav );
        this.ctrlNavDots = [].slice.call( this.ctrlNav.children );
    }

    // field number status
    if( this.options.ctrlNavPosition ) {
        this.ctrlFldStatus = createElement( 'span', { cName : 'fs-numbers', appendTo : this.ctrls } );

        // current field placeholder
        this.ctrlFldStatusCurr = createElement( 'span', { cName : 'fs-number-current', inner : Number( this.current + 1 ) } );
        this.ctrlFldStatus.appendChild( this.ctrlFldStatusCurr );

        // total fields placeholder
        this.ctrlFldStatusTotal = createElement( 'span', { cName : 'fs-number-total', inner : this.fieldsCount } );
        this.ctrlFldStatus.appendChild( this.ctrlFldStatusTotal );
        this._showCtrl( this.ctrlFldStatus );
    }

    // progress bar
    if( this.options.ctrlProgress ) {
        this.ctrlProgress = createElement( 'div', { cName : 'fs-progress', appendTo : this.ctrls } );
        this._showCtrl( this.ctrlProgress );
    }
}

Note that there is createElement creating button . I need some code to run in the event when I click on this element that was created, what should I do?

Here has a demo of the example I'm using.

    
asked by anonymous 01.10.2014 / 18:21

5 answers

2

What javascript framework are you using? The correct syntax is 

document.createElement(tagName)

and its syntax is: 

createElement( 'button', { cName : 'fs-continue', inner : 'Proxima', appendTo : this.ctrls } );

ie it is a function call and not a method of an object.

To give a correct answer you need to know how this function works, but starting from the principle that returns a button object you can add an event like this:

This is the function 

/**
     * createElement function
     * creates an element with tag = tag, className = opt.cName, innerHTML = opt.inner and appends it to opt.appendTo
     */
    function createElement( tag, opt ) {
        var el = document.createElement( tag )
        if( opt ) {
            if( opt.cName ) {
                el.className = opt.cName;
            }
            if( opt.inner ) {
                el.innerHTML = opt.inner;
            }
            if( opt.appendTo ) {
                opt.appendTo.appendChild( el );
            }
        }   
        return el;
    }

And as I foresaw, this function returns the element.

You can, in principle, use the code below to link a click event 

try{

this.ctrlContinue.addEventListener('click', function() { alert("ok) });

} cath(e){

//compatibilidade com IE
this.ctrlContinue..attachEvent("onclick", function() { alert("ok) })
}
    
01.10.2014 / 21:58
6

The createElement ( MDN Documentation method) returns an object , which you are already storing in ctrlContinue . To add an event to this object, simply do the following: 

ctrlContinue.addEventListener('click', function() { ... })

And swap function() { ... } for the function that contains the code that you want to run. I also recommend looking at the method documentation addEventListener

    
01.10.2014 / 18:28
4

You should use the following code; 

//CRIA O ELEMENTO
var botao = document.createElement('button');

//ADICIONA O ONCLICK
botao.onclick = function () {
    alert('HUE BR');
};
    
01.10.2014 / 18:28
3

You could do this: 

   for( var i = 0; i < this.fieldsCount; ++i ) {
      var button = document.createElement('button');
      i === this.current ? button.addClass('fs-dot-current') : button.setAttr('disabled');
      //AddEventListener só funciona IE9+
      button.onclick = function (e) {}   
      this.ctrlNav.appendChild(button);
   }
    
01.10.2014 / 18:52
0

Thanks guys, it worked. I'm using this framework here for questions, I found it very interesting, follow the link

link

Hugs,

Hulkb

    
02.10.2014 / 16:08
What is the default value of the "cursor" attribute? How to return 2 variables from a function