cambio de la función onclick del botón dinámicamente mediante javascript

¿Cómo puedo cambiar onclick comportamiento de botón dinámicamente con javascript?

Aquí es a lo que me refería:

Que dispone de los siguientes botones:

<button class="num" onclick="getval(0)">0</button>
<button class="num" onclick="getval(1)">1</button>
<button class="num" onclick="getval(2)" >2</button>
<button class="num" onclick="getval(3)" >3</button>

function getval(){

...............

}

function getvalNew(){

..............

}

¿Cómo puedo hacer que los botones para cambiar de getval() para getvalNew() y reset de nuevo?

  • Es más fácil si no lo uso en línea de controladores de eventos. Para obtener más información sobre la gestión de eventos, consulte quirksmode.org/js/introevents.html.
  • ver a @FelixKling del comentario de por qué no utilizar en línea de controladores de eventos, pero si usted tiene, usted podría tratar de usar js para cambiar el atributo onclick del elemento. Estoy un poco oxidado con puro js pero podría intentar algo como jQuery('button.num').attr('onclick', 'myFunc(1)'); si usted fuera a utilizar jQuery.
  • Un simple cambio de declaración de una variable diferente o de conjunto o global cierto falses iba a funcionar. También puede onclick hacer esto. y cambiar el onclick attr a ser la función opuesta.

6 Kommentare

  1. 3

    Aquí un enfoque, basado en mi blank.html plantilla.

    Nota: en setAllFunc3, usted puede conectar varios controladores para el elemento. También puede eliminarlos de forma selectiva.
    Vea otro miembro de la nota sobre getAllByClassName.

    También nota: conectando el controlador, podemos tener acceso a la this var. Esto significa que sabemos que el elemento que desencadenó la llamada. Simplemente he extraído el texto del botón. En su lugar podría obtener el valor de un atributo, que luego podrá utilizar en el controlador.
    Probablemente algo que usted descubra un poco más tarde. 🙂

    <!DOCTYPE html>
    <html>
    <head>
    <script>
    function byId(e){return document.getElementById(e);}
    function newEl(tag){return document.createElement(tag);}
    function newTxt(txt){return document.createTextNode(txt);}
    function toggleClass(element, newStr)
    {
        index=element.className.indexOf(newStr);
        if ( index == -1)
            element.className += ' '+newStr;
        else
        {
            if (index != 0)
                newStr = ' '+newStr;
            element.className = element.className.replace(newStr, '');
        }
    }
    function forEachNode(nodeList, func)
    {
        var i, n = nodeList.length;
        for (i=0; i<n; i++)
        {
            func(nodeList[i], i, nodeList);
        }
    }
    
    window.addEventListener('load', mInit, false);
    
    function mInit()
    {
    }
    
    function getval(inputVar)
    {
        alert(inputVar + " was passed to getval");
    }
    
    function getvalNew(inputVar)
    {
        alert("getvalNew(" + inputVar + ")");
    }
    
    function setAllFunc1()
    {
        var tgtButtons = document.getElementsByClassName('num');
        var i, n = tgtButtons.length;
        for (i=0; i<n; i++)
            tgtButtons[i].setAttribute('onclick', 'getval(' + i + ')' );
    }
    
    function setAllFunc2()
    {
        var tgtButtons = document.getElementsByClassName('num');
        var i, n = tgtButtons.length;
        for (i=0; i<n; i++)
            tgtButtons[i].setAttribute('onclick', 'getvalNew(' + i + ')' );
    }
    
    function myFunc3()
    {
        var clickedBtn = this;
        var btnText = clickedBtn.innerHTML;
        alert("You clicked the button labelled: " + btnText);
    }
    
    function setAllFunc3()
    {
        var tgtButtons = document.getElementsByClassName('num');
        var i, n = tgtButtons.length;
        for (i=0; i<n; i++)
        {
            tgtButtons[i].removeAttribute('onclick');
            tgtButtons[i].addEventListener('click', myFunc3);
        }
    }
    
    </script>
    <style>
    </style>
    </head>
    <body>
        <button class="num" onclick="getval(0)">0</button>
        <button class="num" onclick="getval(1)">1</button>
        <button class="num" onclick="getval(2)">2</button>
        <button class="num" onclick="getval(3)">3</button>
        <hr>
        Simple method - using attributes
        <input type='button' onclick='setAllFunc1()' value='set all to "getval()"'/>
        <input type='button' onclick='setAllFunc2()' value='set all to "getvalNew()"'/>
        <hr>
        Better method - using addEventListener
        <input type='button' onclick='setAllFunc3()' value='set all to "myFunc3()"'/>
    </body>
    </html>
  2. 2
    function getval() {
        ........
        var buttons = document.getElementsByClassName("num");
        for (i=0;i<buttons.length;i++){
            buttons[i].onclick = function(){
                getvalNew();
            }
        }
    }

    Y viceversa para la otra función. Al menos, esto debería funcionar….

  3. 2

    puede hacer algo como esto:

    código

    $(".num").on("click", function () {
        if ($(this).hasClass("getval")) {
            $(this).removeClass("getval").addClass("getvalnew");
            //do what you need here 
            alert("getVal");
        } else {
            $(this).removeClass("getvalnew").addClass("getval");
            //do what you need here 
            alert("getValNew");
        }
    });

    VIOLÍN

    http://jsfiddle.net/ygqrU/

  4. 2

    Usted puede hacer esto con un solo forro sintaxis de JQuery con las instrucciones condicionales cuando se desea cambiar la asignación de la función.

    //bind all
    $('.num').bind('click', getValNew());
    
    //Unbind all
    $('.num').unbind('click');
  5. 1

    En caso de que el navegador no soporte getElementsByClassName, esta es una alternativa:

    var elems = document.getElementsByTagName('button');
    for (i=0;i<elems.length;i++) {
        if(elems[i].className == "num") {
            elems[i].onclick = function(){
            getvalNew();
        }
    }
  6. 0

    Tal vez algo como esto:

    .

    var button = document.getElementsByClassName("num")
    //You could also do: var button = document.getElementsByTagName("button")
    
    function set() { //Change all the buttons onclick event to getvalNew
        for (i = 0; i < button.length; i++) {
            button[i].onclick = function() {
                getvalNew(i)
            }
        }
    }
    
    function reset() { //Change all the buttons onclick event back to getval
        for (i = 0; i < button.length; i++) {
            button[i].onclick = function() {
                getval(i)
            }
        }
    }

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea