[javascript] 온 클릭 함수에서 문자열 매개 변수 전달

JAVASCRIPT / 글쓴이

Onclick 함수에 매개 변수 (예 : 문자열)를 전달하고 싶습니다. 현재로서는 이렇게합니다.

'<input type="button" onClick="gotoNode(' + result.name + ')" />'

예를 들어 문자열 “Add”와 같은 result.name을 사용하십시오. 이 버튼을 클릭하면 추가가 정의되지 않았다는 오류가 발생합니다. 이 함수 호출은 숫자 매개 변수와 완벽하게 작동하므로 문자열의 “”기호와 관련이 있다고 가정합니다. 아무도 전에이 문제가 있었습니까?

답변

문자열에서 DOM 요소를 작성하는 것처럼 보입니다. result.name 주위에 따옴표를 추가하면됩니다.

'<input type="button" onClick="gotoNode(\'' + result.name + '\')" />'

그래도 적절한 DOM 메소드를 사용 하여이 작업을 수행해야합니다.

var inputElement = document.createElement('input');
inputElement.type = "button"
inputElement.addEventListener('click', function(){
    gotoNode(result.name);
});

​document.body.appendChild(inputElement);​

이것이 루프 또는 무언가 인 result경우 이벤트가 발생하기 전에 변경되므로 변경되는 변수를 음영 처리하기 위해 추가 범위 버블을 만들어야합니다.

답변

onClick에서 문자열 이스케이프를 사용하는 것과 관련하여 몇 가지 우려 사항이 있으며 인수 수가 증가함에 따라 유지 관리가 번거로울 수 있습니다.

다음 접근 방식에는 클릭 한 번으로 한 번의 홉이 있습니다. 이벤트 객체를 기반으로 핸들러 메소드 및 핸들러 메소드로 제어를 수행하면 클릭 이벤트 및 해당 오브젝트를 공제 할 수 있습니다.

또한 더 많은 인수를 추가하고 더 유연하게 사용할 수있는 더 확실한 방법을 제공합니다.

<button type="button"
        className="btn btn-default"
        onClick="invoke"
        name='gotoNode'
        data-arg1='1234'>GotoNode</button>

자바 스크립트 레이어에서 :

  invoke = (event) => {
    let nameOfFunction = this[event.target.name];
    let arg1 = event.target.getAttribute('data-arg1');
    //We can add more args as needed...
    window[nameOfFunction](arg1)
    //hope function is in window. 
    //Else the respective object need to be used 
    })
  }

여기서 장점은 필요한만큼 인수 (위의 예에서 data-arg1, data-arg2 ….)를 가질 수 있다는 것입니다.

답변

HTML onclick처리기를 사용하지 말고 같은 일반적인 것을 사용하는 것이 좋습니다 document.getElementById.

HTML :

<input type="button" id="nodeGoto" />

자바 스크립트 :

document.getElementById("nodeGoto").addEventListener("click", function() {
    gotoNode(result.name);
}, false);

답변

나는 당신이 JavaScript 자체를 사용하여 버튼을 만들고 있다고 추측합니다. 따라서 코드 의 오류 는이 형식으로 렌더링된다는 것입니다.

<input type="button" onClick="gotoNode(add)" />'

이 현재 상태에서 add변수 또는 함수 호출과 같은 식별자로 간주됩니다. 당신은 이와 같은 가치를 피해야합니다

'<input type="button" onClick="gotoNode(\'' + result.name + '\')" />'

답변

이것은 값이나 객체를 보내는 좋은 깔끔한 방법입니다.

<!DOCTYPE html>
<html>
<body>
<h1  onclick="test('wow',this)">Click on this text!</h1>
<script>
var test =function(value,object){
object.innerHTML=value;
};
</script>
</body>
</html>

답변

이 시도..

HTML :

<button id="a1" type="button" onclick="return a1_onclick('a1')">a1</button>

자바 스크립트 :

<script language="javascript" type="text/javascript">
    function a1_onclick(id) {
        document.getElementById(id).style.backgroundColor = "#F00";
    }
</script>

참고 : HTML 코드에서 ”와 같은 ( ‘a1’) 기호 사이에 인수를 보내야합니다.

답변

또한 문자열에 억음 기호 (`)를 사용합니다

시도 :

`<input type="button" onClick="gotoNode('${result.name}')" />`

자세한 내용은 MDN 및 Stackoverflow를 방문하십시오.

Chrome에서는 Edge, Firefox (Gecko), Opera, Safari를 지원하지만 Internet Explorer는 지원하지 않습니다.