On click get button values from array javascript?

user_14063604 0
Viewed 533

I have a function that creates a button for each value in an array. I want to get the value of the button that is clicked and store it in a variable.

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);
  }
}

printBtn();
button arrays javascript
4 Answers

You can add an event handler that reads back the textContent from the button; then you can do what you want with it in the event handler. For example:

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();

user_94737640 

const 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 (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();

You don't even need to read the text out of the DOM if you just add the event listener in your loop there.

Or, if you prefer, this might be a little more efficient because it only requires one event listener.

const 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 (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();

Mark_653870

Add a value property on your button and attach an event listener. Then onClick's event you can access the value as 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();

user_80626590

You could simply use forEach function and use onClick function to get the value of a clicked date.

Live Demo:

let 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() {
  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>

user_136690480
Related