Get element by dataset

Admin 1
Viewed 322

I'm using dataset to get an element by adding an event handler on the parent element of the button, then assign the value of data from the 'clicked' element to a variable.

But it's not working, what do I did wrong? Below is the code:

const ct = document.querySelector('.main-01');
const ctt = document.querySelector('.main-02');

ct.addEventListener('click', function(e) {
  const check= ctt.querySelector('[data-test = e.target.dataset.test]');
  console.log(check)
});
.main-01,
.main-02 {
  display: flex;
  flex-direction: row;
  gap: 15px;
}

.main-01 {
  width: 570px;
  justify-content: center;
  margin-bottom: 15px;
}

.test {
  width: 180px;
  height: 90px;
  background-color: orange;
}
<div class="main-01">
  <button data-test="1">button-01</button>
  <button data-test="2">button-02</button>
  <button data-test="3">button-03</button>
</div>

<div class="main-02">
  <div data-test="1" class="test"></div>
  <div data-test="2" class="test"></div>
  <div data-test="3" class="test"></div>
</div>

javascript
3 Answers

Use syntax like : const check= ctt.querySelector('[data-test="'+e.target.dataset.test+'"]');

const ct = document.querySelector('.main-01');
const ctt = document.querySelector('.main-02');
const test = document.querySelector('.test');

ct.addEventListener('click', function(e) {
  const check= ctt.querySelector('[data-test="'+e.target.dataset.test+'"]');
  console.log(check)
});
.main-01,
.main-02 {
  display: flex;
  flex-direction: row;
  gap: 15px;
}

.main-01 {
  width: 570px;
  justify-content: center;
  margin-bottom: 15px;
}

.test {
  width: 180px;
  height: 90px;
  background-color: orange;
}
<div class="main-01">
  <button data-test="1">button-01</button>
  <button data-test="1">button-02</button>
  <button data-test="1">button-03</button>
</div>

<div class="main-02">
  <div data-test="1" class="test"></div>
  <div data-test="2" class="test"></div>
  <div data-test="3" class="test"></div>
</div>

user_109397010

But it's not working, what do I did wrong?

The Errormessage already give you the answer. You use a wrong selector to fetch the element in your dom:

"SyntaxError: Element.querySelector: '[data-test = e.target.dataset.test]' is not a valid selector",

In your case you pass already the click event to the handle function. Then you will have access to the clicked element by using e.target. Please take a look on follow example. 

const ct = document.querySelector('.main-01');
const ctt = document.querySelector('.main-02');

ct.addEventListener('click', function(e) {
  const item = parseInt(e.target.getAttribute('data-test'));
  console.log("=>", item);
  ctt.querySelector("div:nth-child("+ item +")").innerHTML = "Hello " + item;  
});
.main-01,
.main-02 {
  display: flex;
  flex-direction: row;
  gap: 15px;
}

.main-01 {
  width: 570px;
  justify-content: center;
  margin-bottom: 15px;
}

.test {
  width: 180px;
  height: 90px;
  background-color: orange;
}
<div class="main-01">
  <button data-test="1">button-01</button>
  <button data-test="2">button-02</button>
  <button data-test="3">button-03</button>
</div>

<div class="main-02">
  <div data-test="1" class="test"></div>
  <div data-test="2" class="test"></div>
  <div data-test="3" class="test"></div>
</div>

user_148071110

Always use the dataset property. When you define any data-xxxx-xxxx property it's accessible in camelCase notation.

Accordingly you can construct HTML elements & update on the desired 'click' event.

// e.g  data-date-of-birth  => dateOfBirth


const el = document.querySelector('#user'); // GET the current element


console.log(el.dataset.user) // Access with existing value

el.dataset.user = 'XYZ'; // UPDATE the existing value.

console.log(el.dataset.user) // PRINT new value.
<div id="user" data-id="1234567890" data-user="johndoe">

const srcEl = document.querySelector(".main-01");

srcEl.addEventListener('click', function(event) {
  const btnIndex = event.target.dataset.test;
  // array index starts with 0 hence substract -1 from btnIndex
  document.querySelector(".main-02").children[btnIndex-1].innerHTML = 'NEW TEXT';
});
<div class="main-01">
  <button class="button" data-test="1">button-01</button>
  <button class="button" data-test="2">button-02</button>
  <button class="button" data-test="3">button-03</button>
</div>

<div class="main-02">
  <div data-test="1" class="test">1</div>
  <div data-test="2" class="test">2</div>
  <div data-test="3" class="test">3</div>
</div>

user_180694450
Related