3

Tenho o seguinte código:

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 );
    }
}

Notem que há um createElement criando um button. Eu preciso que algum código seja executado no evento quando clico desse elemento que foi criado, o que devo fazer ?

Aqui tem uma demo do exemplo que estou utilizando.

5 Respostas 5

6

O método createElement (Documentação do MDN) retorna um objeto, que você já está armazenando em ctrlContinue. Para adicionar um evento a esse objeto, basta fazer o seguinte:

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

E trocar function() { ... } pela função que contém o código que você deseja executar. Recomendo também olhar a documentação do método addEventListener

0
4

Você deve utilizar o codigo a seguir;

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

//ADICIONA O ONCLICK
botao.onclick = function () {
    alert('HUE BR');
};
1
  • Solução simples e boa, obrigadoo!
    – Jota
    3/03/2018 às 1:51
3

Você poderia fazer assim:

   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);
   }
1
  • 1
    Só cuidado para não usar i dentro dessa função do onclick, pois vai dar errado.
    – bfavaretto
    1/10/2014 às 18:07
2

Que framework javascript está usando? A sintaxe correta é

document.createElement(tagName)

e a sua sintaxe é :

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

ou seja é uma chamada de função e não um método de uma objeto.

Para dar uma resposta correta é preciso saber como essa função funciona, mas partindo do principio que retorna um objeto button então pode adicionar um evento da seguinte forma:

Essa é a função

/**
     * 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;
    }

e como eu previa, essa função retorna o elemento.

Pode, em principio, usar o código em baixo para ligar um evento "click"

try{

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

} cath(e){

//compatibilidade com IE
this.ctrlContinue..attachEvent("onclick", function() { alert("ok) })
}
3
0

Obrigado Pessoal, deu certo. Estou utilizando esse framework aqui para peguntas, achei muito interessante, segue o link

http://tympanus.net/codrops/2014/07/30/fullscreen-form-interface/

Abraços,

Hulkb

0

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .