змінити функцію кнопки на кнопці, динамічно використовуючи javascript

Як я можу змінити onclick поведінки кнопки динамічно, використовуючи JavaScript?

Ось що я мав на увазі:

У мене є наступні кнопки:

<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(){

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

}

Як я можу зробити кнопки для переходу від getval() до getvalNew() і скинути його знову?

3
див. коментарі @ FelixKling про те, чому б не використовувати вбудовані обробники подій, але якщо вам потрібно, ви можете спробувати використовувати JS, щоб змінити атрибут onclick елемента. Я трохи іржавий з чистими JS, але ви можете спробувати щось подібне до jQuery ('button.num'). Attr ('onclick', 'myFunc (1)'); , якщо б ви мали використовувати jQuery
додано Автор totallyNotLizards, джерело
див. коментарі @ FelixKling про те, чому б не використовувати вбудовані обробники подій, але якщо вам потрібно, ви можете спробувати використовувати JS, щоб змінити атрибут onclick елемента. Я трохи іржавий з чистими JS, але ви можете спробувати щось подібне до jQuery ('button.num'). Attr ('onclick', 'myFunc (1)'); , якщо б ви мали використовувати jQuery
додано Автор totallyNotLizards, джерело
Це легше, якщо ви не використовуєте вбудовані обробники подій. Додаткову інформацію про обробку подій див quirksmode.org/js/introevents.html .
додано Автор Felix Kling, джерело
Буде працювати просте операція перемикання з іншою змінною або масивом чи глобальними істинними фальсинами. Ви також можете просто натискати це зробити. і змінити onclick attr, щоб бути протилежною функцією.
додано Автор abc123, джерело
Буде працювати просте операція перемикання з іншою змінною або масивом чи глобальними істинними фальсинами. Ви також можете просто натискати це зробити. і змінити onclick attr, щоб бути протилежною функцією.
додано Автор abc123, джерело

10 Відповіді

ви можете зробити щось на зразок цього:

код

$(".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");
    }
});

FIDDLE

http://jsfiddle.net/ygqrU/

2
додано
function getval() {
    ........
    var buttons = document.getElementsByClassName("num");
    for (i=0;i<buttons.length;i++){
        buttons[i].onclick = function(){
            getvalNew();
        }
    }
}

І навпаки для іншої функції. Принаймні, це має працювати ....

2
додано
function getval() {
    ........
    var buttons = document.getElementsByClassName("num");
    for (i=0;i<buttons.length;i++){
        buttons[i].onclick = function(){
            getvalNew();
        }
    }
}

І навпаки для іншої функції. Принаймні, це має працювати ....

2
додано

Ось підхід, який базується на моєму шаблоні blank.html .

Примітка. У setAllFunc3 ви можете додати кілька обробників до одного елемента. Ви також можете їх видалити вибірково. Дивіться запис іншого члена про getAllByClassName.

Також зауважте: приєднавши обробник, ми отримуємо доступ до this var. Це означає, що ми знаємо, який елемент викликав дзвінок. Я просто витягнув текст з кнопки. Замість цього ви можете отримати значення для атрибута, який ви потім використовуєте в обробнику. Напевно щось для вас, щоб відкрити трохи пізніше. :)

<!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
</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>
    

    Simple method - using attributes
    <input type='button' onclick='setAllFunc1()' value='set all to "getval()"'/>
    <input type='button' onclick='setAllFunc2()' value='set all to "getvalNew()"'/>
    

    Better method - using addEventListener
    <input type='button' onclick='setAllFunc3()' value='set all to "myFunc3()"'/>
</body>
</html>
2
додано

Ось підхід, який базується на моєму шаблоні blank.html .

Примітка. У setAllFunc3 ви можете додати кілька обробників до одного елемента. Ви також можете їх видалити вибірково. Дивіться запис іншого члена про getAllByClassName.

Також зауважте: приєднавши обробник, ми отримуємо доступ до this var. Це означає, що ми знаємо, який елемент викликав дзвінок. Я просто витягнув текст з кнопки. Замість цього ви можете отримати значення для атрибута, який ви потім використовуєте в обробнику. Напевно щось для вас, щоб відкрити трохи пізніше. :)

<!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
</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>
    

    Simple method - using attributes
    <input type='button' onclick='setAllFunc1()' value='set all to "getval()"'/>
    <input type='button' onclick='setAllFunc2()' value='set all to "getvalNew()"'/>
    

    Better method - using addEventListener
    <input type='button' onclick='setAllFunc3()' value='set all to "myFunc3()"'/>
</body>
</html>
2
додано

Ви можете зробити це за допомогою синтаксису jQuery з одним рядком з вашими умовними виразами, коли ви хочете змінити функцію відображення.

//bind all
$('.num').bind('click', getValNew());

//Unbind all
$('.num').unbind('click');
2
додано

Якщо браузер не підтримує getElementsByClassName, це альтернатива:

var elems = document.getElementsByTagName('button');
for (i=0;i
1
додано

Якщо браузер не підтримує getElementsByClassName, це альтернатива:

var elems = document.getElementsByTagName('button');
for (i=0;i
1
додано

Може бути, приблизно так:

.

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)
        }
    }
}
0
додано

Може бути, приблизно так:

.

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)
        }
    }
}
0
додано
ІТ КПІ - JavaScript
ІТ КПІ - JavaScript
504 учасників

співтовариство javascript розробників в Telegram