Question

在我的代码中，我需要在按下按钮1时将其设置为“1”，如果按下按钮2，则将数字设置为2.

<!DOCTYPE html>
<html>
<body>
  <table style="width:65%;height:100px">
    <tr><td align="center" id="blockOne">
    <p><button onclick="addGraph()" id="buttonOne">Create Graph/Chart</button></p>
    <tr><td align="center" id="blockTwo">
    <p><button onclick="addGraph()"id ="buttonTwo">Create Graph/Chart</button></p>
  </table>
</body>
<script>
    var button1 = document.getElementById('buttonOne');
    var button2 = document.getElementById('buttonTwo');
    var container = "0";

    // When the user clicks the button, open the modal
    function addGraph() {
    {
        if (button1.onclick === true)  {
            container = "1";
        }
        if (button2.onclick === true) {
            container = "2";
        }
    }
        console.log(container);
    }
</script>
</html>

Answer 1

您可以通过将this作为函数参数来检查按下了哪个按钮。

然后，只需检查您元素的ID并使用以下内容编辑container

container = elem.id == 'buttonOne' ? "1" : "2";

＆＃13;

var container = "0";

// When the user clicks the button, open the modal
function addGraph(elem) {
  container = elem.id == 'buttonOne' ? "1" : "2";
  console.log(container);
}

＆＃13;

<table style="width:65%;height:100px">
  <tr>
    <td align="center" id="blockOne">
      <p><button onclick="addGraph(this)" id="buttonOne">Create Graph/Chart</button></p>
      <tr>
        <td align="center" id="blockTwo">
          <p><button onclick="addGraph(this)" id="buttonTwo">Create Graph/Chart</button></p>
</table>

＆＃13;

Answer 2

您可以简单地在addGraph函数中传递一个参数，该参数可以分配给container，因为button1.onclick不是一种有效的方法，可以为您提供布尔结果。

var button1 = document.getElementById('buttonOne');
var button2 = document.getElementById('buttonTwo');
var container = "0";

function addGraph(value) {
  container = value;
  console.log(container);
}

<table border='1' style="width:65%;height:100px">
  <tr><td align="center" id="blockOne">
  <p><button onclick="addGraph(1)" id="buttonOne">Create Graph/Chart</button></p></tr>
  <tr><td align="center" id="blockTwo">
  <p><button onclick="addGraph(2)"id ="buttonTwo">Create Graph/Chart</button></p></tr>
</table>

Answer 3

您可以定义接受数字作为输入的函数，并使用专用数字填充名为onclick的函数。

<button onclick="addGraph(1)">Some text</button>

在这种情况下，如果您不需要操作按钮，则甚至不需要定义按钮ID。

Answer 4

请注意，在您的Html中，您应该打开并关闭所有html元素。

在您的JavaScript逻辑中，您可以id用document.querySelectorAll('#buttonOne, #buttonTwo')

选择多个元素

不只是用Array.prototype.forEach()迭代所有它们来动态附加click事件监听器并处理容器值，如container = (index + 1).toString();

代码：

＆＃13;

let container = '0';
document
  .querySelectorAll('#buttonOne, #buttonTwo')
  .forEach((el, index) => el.addEventListener('click', () => {
    container = (index + 1).toString();
    console.log(container);
  }));

＆＃13;

<table style="width:65%;height:100px">
  <tr>
    <td align="center">
      <p>
        <button id="buttonOne">Create Graph/Chart</button>   
      </p>
    </td>
  </tr>
  <tr>
    <td align="center">
      <p>
        <button id="buttonTwo">Create Graph/Chart</button>
      </p>
    </td>
  </tr>
</table>

＆＃13;

如何找出在处理函数

4 个答案: