单击时从数组javascript获取按钮值？

如何解决单击时从数组javascript获取按钮值？

我有一个函数，可以为数组中的每个值创建一个按钮。我想获取被单击的按钮的值并将其存储在变量中。

filtered1.asfreq('M').plot()

解决方法

您可以添加一个事件处理程序，该事件处理程序从按钮中读取textContent；那么您可以在事件处理程序中使用它来做您想做的事情。例如：

dates_button = ['8/21/2020','8/28/2020','9/4/2020','9/11/2020','9/18/2020','9/25/2020','10/16/2020','11/19/2020','1/14/2021','3/19/2021','6/18/2021','9/17/2021','1/20/2022']

function btnClick(e) {
  let date = e.target.textContent;
  // do something with it
  console.log(date);
}

function printBtn() {
  for (var i = 0; i < dates_button.length; i++) {
    var btn = document.createElement("button");
    var t = document.createTextNode(dates_button[i]);
    btn.appendChild(t);
    btn.onclick = btnClick;
    document.body.appendChild(btn);
  }
}

printBtn();

,

const dates_button = ['8/21/2020','1/20/2022']

function printBtn() {
  for (let i = 0; i < dates_button.length; i++) {
    let btn = document.createElement("button");
    let t = document.createTextNode(dates_button[i]);
    btn.appendChild(t);
    document.body.appendChild(btn);
    btn.addEventListener('click',() => {
      alert(dates_button[i]);
    });
  }
}

printBtn();

如果您只是在其中的循环中添加事件侦听器，甚至不需要从DOM中读取文本。

或者，如果您愿意，这可能会更有效率，因为它只需要一个事件侦听器。

const dates_button = ['8/21/2020','1/20/2022']

function printBtn() {
  for (let i = 0; i < dates_button.length; i++) {
    let btn = document.createElement("button");
    let t = document.createTextNode(dates_button[i]);
    btn.appendChild(t);
    document.body.appendChild(btn);
  }
}

document.addEventListener('click',(ev) => {
  if (ev.target.matches('button')) {
    console.log(ev.target.innerText);
  }
});

printBtn();

,

在value上添加button属性，并附加一个事件侦听器。然后，onClick的事件中，您可以以value的身份访问event.target.value。

dates_button = [
  "8/21/2020","8/28/2020","9/4/2020","9/11/2020","9/18/2020","9/25/2020","10/16/2020","11/19/2020","1/14/2021","3/19/2021","6/18/2021","9/17/2021","1/20/2022"
];

function printBtn() {
  for (var i = 0; i < dates_button.length; i++) {
    var btn = document.createElement("button");
    var t = document.createTextNode(dates_button[i]);
    btn.appendChild(t);
    document.body.appendChild(btn);

    btn.addEventListener("click",handleClick);
    btn.value = dates_button[i];
  }
}

function handleClick(event) {
  console.log(event.target.value);
}

printBtn();

,

您只需使用forEach函数并使用onClick函数即可获取点击日期的值。

实时演示：

let dates_button = ['8/21/2020','1/20/2022']

function printBtn() {
  dates_button.forEach(function(date) {
    var btn = document.createElement("button");
    var text = document.createTextNode(date);
    btn.appendChild(text);
    btn.value = date;
    btn.onclick = function() {
      console.log(this.value)
    }
    document.querySelector('#el').appendChild(btn); //append all buttons
  })
}

printBtn();

<div id="el"></div>