如何在 javaScript 中编写我的 onclick 函数并将其绑定到 innerHTML

Question

 var x = 10      var y = 15      document.getElementById("text").innerHTML = '<div       onclick=\'test("'x + '","' + y + '") > text  </div>';你好，我是新来的，抱歉解释不好，但是当我想给函数提供参数时，js 和 html 之间的函数语法是什么？我应该得到这个function : onclick='test(x,y)'

Answer 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

希望这涵盖了所有基础，但如果我能做得更好，请告诉我

Answer 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>

PS：功能测试将显示一个警报，以向您展示它是否有效