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>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>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>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>