>source

    var x = 10
     var y = 15
     document.getElementById("text").innerHTML = '<div 
     onclick=\'test("'x + '","' + y + '") > text  </div>';

안녕하세요, 저는 여기에 새로 왔으며 잘못된 설명으로 죄송하지만 함수에 매개 변수를 제공하고 싶을 때 js와 html 사이의 함수 구문은 무엇입니까? 나는 이것을 얻어야한다 function : onclick='test(x,y)'

  • 답변 # 1

    설정하려는 것 같습니다 innerHTML 당신의 #text 요소를 test (x, y)의 결과로 이를 수행하는 전통적인 방법은 다음과 같습니다.

    const answer = test(x,y)
    document.getElementById('idOfThingToBeChanged').innerHTML = answer;
    
    

    페이지에서 버튼을 클릭 할 때이 작업을 수행하려는 경우이 코드를 이벤트 리스너의 콘텐츠로 포함하는 것이 좋습니다.

    document.getElementById('idOfThingToBeClicked')
       .addEventListener('click' => {
          (the code from above)
       });
    
    

    X와 Y가 HTML 페이지에서 가져온 값인 경우 다음과 같이 가져오고 싶을 것입니다.

    const x = document.getElementById('idOfElement1').value;
    const y = document.getElementById('idOfElement2').value;
    const answer = test(x,y);
    
    

    최종 제품이 다음과 같이 보이도록

    document.getElementById('elementToBeClicked')
       .addEventListener('click', () => {
          const x = document.getElementById('idOfElement1').value;
          const y = document.getElementById('idOfElement2').value;
          document.getElementById('elementToBeChanged')
             .innerHTML = test(x, y);
    });
    //This assumes you're injecting this code at a point after the page has loaded
    
    

    이것이 모든 기반을 다루기를 바라지 만 더 잘할 수 있는지 알려주십시오.

  • 답변 # 2

    function test(x,y){
    alert(x, y);
    }
    var x = 10
         var y = 15
         document.getElementById("text").innerHTML = `<div onclick="test(${x},${y})"> text</div>`;
    
    

    <div id="text"></div>
    
    

    추신 : 기능 테스트가 작동하는지 보여주기 위해 경고를 표시합니다.

관련 자료

  • 이전 javascript - Cypress는 배열의 요소를 반복합니다
  • 다음 css - 플렉스 박스를 사용하여 모바일에서 가운데 ​​열을 맨 위로 이동