There will be no returns from a function that includes getAttribute operations

Question

There will be no returns from a function that includes getAttribute operations

I've been trying to display the value of each button, but unfortunately, nothing appears in the console when I click on them.

It seems like I'm overlooking something here and I just can't seem to figure it out.

 const allButtons = document.querySelector("[data-buttons]");

Array.from(allButtons).forEach(button => {
    button.addEventListener("click", () => {
        let userPick = button.getAttribute("[data-pick]");
        console.log(userPick);
    });
});

Your help is greatly appreciated! :)

javascript getattribute

Answer 1

Answer №1

If you want to iterate directly through the Nodelist retrieved using querySelectorAll

document.querySelectorAll("[data-buttons]").forEach(button => {
  button.addEventListener("click", () => {
    let userSelection = button.getAttribute("data-selection");
    console.log(userSelection);
  });
});

<button data-buttons="1" data-selection="1"> 1</button>
<button data-buttons="2" data-selection="2"> 2</button>
<button data-buttons="3" data-selection="3"> 3</button>

Answer 2

If you want to iterate directly through the Nodelist retrieved using querySelectorAll

document.querySelectorAll("[data-buttons]").forEach(button => {
  button.addEventListener("click", () => {
    let userSelection = button.getAttribute("data-selection");
    console.log(userSelection);
  });
});

<button data-buttons="1" data-selection="1"> 1</button>
<button data-buttons="2" data-selection="2"> 2</button>
<button data-buttons="3" data-selection="3"> 3</button>

Answer 3

Answer №2

If you have multiple buttons, it is recommended to use querySelectorAll

 const allButtons = document.querySelectorAll("[data-buttons]");

    Array.from(allButtons).forEach(button => {
        button.addEventListener("click", () => {
            let userPick = button.getAttribute("data-pick");
            console.log(userPick);
        });
    });

<button data-buttons="1" data-pick="1"> 1</button>
<button data-buttons="2" data-pick="2"> 2</button>
<button data-buttons="3" data-pick="3"> 3</button>

Answer 4

If you have multiple buttons, it is recommended to use querySelectorAll

 const allButtons = document.querySelectorAll("[data-buttons]");

    Array.from(allButtons).forEach(button => {
        button.addEventListener("click", () => {
            let userPick = button.getAttribute("data-pick");
            console.log(userPick);
        });
    });

<button data-buttons="1" data-pick="1"> 1</button>
<button data-buttons="2" data-pick="2"> 2</button>
<button data-buttons="3" data-pick="3"> 3</button>

Answer 5

Answer №3

To access attributes with the prefix data-, you must utilize the dataset object as shown below:

const allButtons = document.querySelectorAll("[data-buttons]");

Array.from(allButtons).forEach(button => {
    button.addEventListener("click", () => {
        let userPick = button.dataset.pick;
        console.log(userPick);
    });
});

Answer 6

To access attributes with the prefix data-, you must utilize the dataset object as shown below:

const allButtons = document.querySelectorAll("[data-buttons]");

Array.from(allButtons).forEach(button => {
    button.addEventListener("click", () => {
        let userPick = button.dataset.pick;
        console.log(userPick);
    });
});

Answer 7

Answer №4

Kindly review the code provided below with comments:

// Instead of using "querySelector", opt for "querySelectorAll" to get a NodeList result.
const allButtons = document.querySelectorAll("[data-buttons]");

// You can directly apply "forEach" on a NodeList instance.
allButtons.forEach(button => {
  button.addEventListener("click", ({target}) => {
    // Ensure to provide attribute name without "[]" when using "getAttribute".
    // Here, you can utilize "e.target" instead of "button".
    const userPick = target.getAttribute("data-pick");
    console.log(userPick);
  });
});

<button data-buttons data-pick="A">Button A</button>
<button data-buttons data-pick="B">Button B</button>
<button data-buttons data-pick="C">Button C</button>
<button data-buttons data-pick="D">Button D</button>
<button data-buttons data-pick="E">Button E</button>

Answer 8

Kindly review the code provided below with comments:

// Instead of using "querySelector", opt for "querySelectorAll" to get a NodeList result.
const allButtons = document.querySelectorAll("[data-buttons]");

// You can directly apply "forEach" on a NodeList instance.
allButtons.forEach(button => {
  button.addEventListener("click", ({target}) => {
    // Ensure to provide attribute name without "[]" when using "getAttribute".
    // Here, you can utilize "e.target" instead of "button".
    const userPick = target.getAttribute("data-pick");
    console.log(userPick);
  });
});

<button data-buttons data-pick="A">Button A</button>
<button data-buttons data-pick="B">Button B</button>
<button data-buttons data-pick="C">Button C</button>
<button data-buttons data-pick="D">Button D</button>
<button data-buttons data-pick="E">Button E</button>

There will be no returns from a function that includes getAttribute operations

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Having trouble with React Testing Library throwing an error every time I try to use fireEvent on an input text?

Modify the property each time I make changes to its value

Populate the ListBox based on the value of the input control in the onKeyUp event

What could be causing this error with creating an order on Paypal?

Utilizing async/await as a module function: A comprehensive guide

Substitute Symbolic Codes in an Object with Written Text

The step-by-step guide to implementing header filters in autoColumns

Manipulating arrays in a JSON file with JavaScript

Is there a way to switch the sorting order on a Bootstrap page using a button without having to refresh the page?

Navigate to Angular Link using Scope Data

Having trouble with a basic if-then condition

What steps should be taken to handle files in the Next JS api?

Is there a reason why this MD Bootstrap Snippet isn't functioning properly?

What is causing the addListener function in the events class to malfunction?

What are some strategies for establishing communication between sibling components in Vue?

"Create a HTML Form with a Submit Button that Does Not Refresh the Page

Establish a Connection Between Local Mongo Database and Your Application

Facing Hurdles in Starting my Debut Titanium Mobile Project

Learn how to leverage dynamic imports for a single use case in NextJS

Rotating around the midpoint of a manipulator in Three.js