자바 스크립트 기능으로 onclick 액션 변경

자바 스크립트 기능으로 onclick 액션 변경

---

버튼이 있습니다.

<button id="a" onclick="Foo()">Button A</button>

이 버튼을 처음 클릭하면 Foo가 실행되기를 원합니다 (올바르게 수행됨).

function Foo() {
  document.getElementById("a").onclick = Bar();
}

버튼을 처음 클릭 할 때 발생하고 싶은 것은 onclick 기능을에서 Foo()로 변경하는 것 Bar()입니다. 지금까지 무한 루프를 달성하거나 전혀 변경하지 못했습니다. Bar()다음과 같이 보일 것입니다.

function Bar() {
  document.getElementById("a").onclick = Foo();
}

따라서이 버튼을 클릭하면 호출되는 함수가 번갈아 나타납니다. 이 작업을 수행하려면 어떻게해야합니까? 또는 게시물의 전체 텍스트를 표시하거나 숨기는 더 좋은 방법은 무엇입니까? 원래는 짧게 시작되어 "전체 텍스트보기"버튼을 제공합니다. 하지만이 버튼을 클릭하면 사용자가 버튼을 다시 클릭하여 긴 버전의 텍스트를 없앨 수 있기를 바랍니다.

도움이되는 경우 전체 코드는 다음과 같습니다.

function ShowError(id) {
    document.getElementById(id).className = document.getElementById(id).className.replace(/\bheight_limited\b/, '');
    document.getElementById(id+"Text").className = document.getElementById(id+"Text").className.replace(/\bheight_limited\b/, '');
    document.getElementById(id+"Button").innerHTML = "HIDE FULL ERROR";
    document.getElementById(id+"Button").onclick = HideError(id);
}

function HideError(id) {
    document.getElementById(id).className += " height_limited";
    document.getElementById(id+"Text").className += " height_limited";
    document.getElementById(id+"Button").innerHTML = "SHOW FULL ERROR";
    document.getElementById(id+"Button").onclick = "ShowError(id)";
}

---

코드는 함수를 호출하고 반환 값을 onClick에 할당하고 있으며 'onclick'이어야합니다. 이것이 어떻게 보일 것입니다.

document.getElementById("a").onclick = Bar;

다른 코드를 보면 다음과 같이 할 수 있습니다.

document.getElementById(id+"Button").onclick = function() { HideError(id); }

---

var Foo = function(){
    document.getElementById( "a" ).setAttribute( "onClick", "javascript: Boo();" );
}

var Boo = function(){
    alert("test");
}

---

새 onclick처리기를 할당 할 때 메서드를 호출하지 마십시오 .

괄호를 제거하기 만하면됩니다.

document.getElementById("a").onclick = Foo;

업데이트 ( 새로운 정보 로 인해 ) :

document.getElementById("a").onclick = function () { Foo(param); };

---

이 방법을 권장합니다.

두 개의 클릭 핸들러가있는 대신 if-else 문이있는 함수는 하나만 있습니다. BUTTON 요소의 상태가 if-else 문의 어떤 분기가 실행되는지 결정하도록합니다.

HTML :

<button id="a" onclick="toggleError(this)">Button A</button>

자바 스크립트 :

function toggleError(button) { 
    if ( button.className === 'visible' ) {
        // HIDE ERROR
        button.className = '';
    } else {
        // SHOW ERROR
        button.className = 'visible';
    }
}

라이브 데모 : http://jsfiddle.net/simevidas/hPQP9/

---

João Paulo Oliveira 덕분에 이것은 변수를 포함하는 솔루션이었습니다 (제 목표였습니다).

document.getElementById( "myID" ).setAttribute( "onClick", "myFunction("+VALUE+");" );

---

다음과 같이 버튼 속성을 변경해 볼 수 있습니다.

element.setAttribute( "onClick", "javascript: Boo();" );

---

What might be easier, is to have two buttons and show/hide them in your functions. (ie. display:none|block;) Each button could then have it's own onclick with whatever code you need.

So, at first button1 would be display:block and button2 would be display:none. Then when you click button1 it would switch button2 to be display:block and button1 to be display:none.

---

For anyone, like me, trying to set a query string on the action and wondering why it's not working-

You cannot set a query string for a GET form submission, but I have found you can for a POST.

For a GET submission you must set the values in hidden inputs e.g.

an action of: "/handleformsubmission?foo=bar" would have be added as the hidden field like: <input type="hidden" name="foo" value="bar" />

This can be done add dynamically in JavaScript as (where clickedButton is the submitted button that was clicked:

var form = clickedButton.form;
var hidden = document.createElement("input");
hidden.setAttribute("type", "hidden");
hidden.setAttribute("name", "foo");
hidden.setAttribute("value", "bar");
form.appendChild(hidden);

See this question for more info submitting a GET form with query string params and hidden params disappear

참고URL : https://stackoverflow.com/questions/5303899/change-onclick-action-with-a-javascript-function