On click get button values from array javascript?

Question

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

Where's your event listener code? Show us what you have tried. The objective here is for you to do the basic research and show your attempts to solve your own issue and people help when those attempts don't work as expected. The objective is not for others to write all the code for you — charlietfl
– charlietfl, Commented Aug 15, 2020 at 2:19

Nick · Accepted Answer · 2020-08-15 02:23:28Z

2

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

answered Aug 15, 2020 at 2:23

Nick

147k23 gold badges67 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

mpen · Accepted Answer · 2020-08-15 02:20:22Z

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

bertdida · Accepted Answer · 2020-08-15 02:22:32Z

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

Always Helping · Accepted Answer · 2020-08-15 02:24:36Z

1

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>

answered Aug 15, 2020 at 2:24

Always Helping

14.6k4 gold badges16 silver badges30 bronze badges

Collectives™ on Stack Overflow

On click get button values from array javascript?

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related