나는 다음과 같다 클릭 이벤트에 인라인을

Question

JS 파일 내에서이를 사용하기 위해, 자바 스크립트와 인라인 온 클릭 이벤트에서 매개 변수를받는 방법 :

<a href="#" class="nextStep" onclick="formHandler.changeStep(2, 'nameYourReport'); return false;"> 

이것은 기본적으로 양식을 밀어 온 클릭 다음 단계는 훌륭하게 작동합니다. 내 문제는 또한 사용자가 Enter 키를 클릭하고 실제 JS 구성 요소 파일 내에서 내 changeStep 함수에 대한 적절한 매개 변수를 가져 오는 데 문제가있는 경우 양식을 슬라이드하려는 것입니다. 일반적으로 실제 HTML의 하드 코드 된 값을 기준으로 가져 왔기 때문입니다. .

내 질문에, 거기에 그냥 또는 정확한 기능을 실행하고 외부 js 파일에서 keydown 입력 할 수있는 방법이 있습니다.

내 생각은 classset이 active 인 fieldset (parent)을 가져 오는 것입니다. 그런 다음 'nextStep'클래스로 태그를 가져옵니다. 그 요소에 첨부 된 기능을 실행하십시오.

그래서 나는 HTML에서 함수를 입수했습니다 이제이있는 varible 같다 있습니다

var parent = document.querySelectorAll('.fieldsetParent.active')[0], 
    clickable = parent.getElementsByClassName("nextStep")[0], 
    changeStep = clickable.getAttribute('onClick') 
     .replace('formHandler.', '') 
     .replace(' return false;', ''); 

하지만 출력 기능과 이론적으로는가 동일 기능을 실행해야 변수를 호출 할 때, 그것은 실행되지 않습니다.

Answer 1

JavaScript에서 addEventListener을 사용하고 HTML의 인라인 onclick 인을 사용해야합니다. 예 : 필요한 경우

clickable.addEventListener('click', function() { 
    event.preventDefault() 
    formHandler.changeStep(2, 'nameYourReport') 
}) 

이 방법, 당신은 다른 곳에서 formHandler.changeStep()를 호출 할 수 있습니다.

document.addEventListener('keypress', function (ev) { 
    if (ev.key === "Enter") { 
    event.preventDefault() 
    formHandler.changeStep(2, 'nameYourReport') 
    } 
}) 

속성이 문자열이 라이브 코드가 아니기 때문에 HTML에서 함수를 가져올 수 없습니다.