I have the following html and Javascript. I want to have a set of buttons with a single onclick handler.
<div id="parent1">
<button data-idx="1" data-action="test">Click me</button>
<button data-idx="2" data-action="test">Click me</button>
</div>
<div id="parent2">
<button data-idx="1" data-action="test"><span>Click me</span></button>
<button data-idx="2" data-action="test"><span>Click me</span></button>
</div>
<script>
const parent1 = document.querySelector("#parent1");
const parent2 = document.querySelector("#parent2");
parent1.addEventListener("click", (evt) => {
let obj = evt.target.dataset;
console.log(obj);
});
parent2.addEventListener("click", (evt) => {
let obj = evt.path[1].dataset;
console.log(obj);
});
</script>
The code for parent1 works fine and I see {idx:"1", action:"test"}
The code for parent2 works as well, but only because in this example I know in advance the structure of the innerHtml of the buttons. In practise that is not known, and the hard-coded evt.path[1] is not suitable.
It is the case however that the dataset is always in the immediate child of #parent2
How can I reliably find the dataset? For example, can I get the index relative to #parent of the child that fired the event?
Maybe you should use composedpath instead of path: see event.path is undefined running in Firefox.
In generall you can loop over the path[n] and avoid undefined errors.
Or you can access the different variables by using your above evt.target.dataset[keyname].
Related
As a novice Javascript programmer, I'd like to create an html document presenting a feature very similar to the "reveal spoiler" used extensively in the Stack Exchange sites.
My document therefore has a few <div> elements, each of which has an onClick event listner which, when clicked, should reveal a hiddent text.
I already know that this can be accomplished, e.g., by
<div onclick="this.innerHTML='Revealed text'"> Click to reveal </div>
However, I would like the text to be revealed to be initially stored in a variable, say txt, which will be used when the element is clicked, as in:
<div onclick="this.innerHTML=txt"> Click to reveal </div>
Since there will be many such <div> elements, I certainly cannot store the text to be revealed in a global variable. My question is then:
Can I declare a variable that is local to a specific html element?
Yes you can. HTML elements are essentially just Javascript Objects with properties/keys and values. So you could add a key and a value to an HTML element object.
But you have to add it to the dataset object that sits inside the element, like this:
element.dataset.txt = 'This is a value' // Just like a JS object
A working example of what you want could look like this:
function addVariable() {
const myElement = document.querySelector('div')
myElement.dataset.txt = 'This is the extended data'
}
function showExtendedText(event) {
const currentElement = event.currentTarget
currentElement.innerHTML += currentElement.dataset.txt
}
addVariable() // Calling this one immediately to add variables on initial load
<div onclick="showExtendedText(event)">Click to see more </div>
Or you could do it by adding the variable as a data-txt attribute right onto the element itself, in which case you don't even need the addVariable() function:
function showExtendedText(event) {
const currentElement = event.currentTarget
currentElement.innerHTML += currentElement.dataset.txt
}
<div onclick="showExtendedText(event)" data-txt="This is the extended data">Click to see more </div>
To access the data/variable for the specific element that you clicked on, you have to pass the event object as a function paramater. This event object is given to you automatically by the click event (or any other event).
Elements have attributes, so you can put the information into an attribute. Custom attributes should usually be data attributes. On click, check if a parent element has one of the attributes you're interested in, and if so, toggle that parent.
document.addEventListener('click', (e) => {
const parent = e.target.closest('[data-spoiler]');
if (!parent) return;
const currentMarkup = parent.innerHTML;
parent.innerHTML = parent.dataset.spoiler;
parent.dataset.spoiler = currentMarkup;
});
<div data-spoiler="foo">text 1</div>
<div data-spoiler="bar">text 2</div>
That's the closest you'll get to "a variable that is local to a specific html element". To define the text completely in the JavaScript instead, one option is to use an array, then look up the clicked index of the spoiler element in the array.
const spoilerTexts = ['foo', 'bar'];
const spoilerTags = [...document.querySelectorAll('.spoiler')];
document.addEventListener('click', (e) => {
const parent = e.target.closest('.spoiler');
if (!parent) return;
const currentMarkup = parent.innerHTML;
const index = spoilerTags.indexOf(parent);
parent.innerHTML = spoilerTexts[index];
spoilerTexts[index] = currentMarkup;
});
<div class="spoiler">text 1</div>
<div class="spoiler">text 2</div>
There are also libraries that allow for that sort of thing, by associating each element with a component (a JavaScript function/object used by the library) and somehow sending a variable to that component.
// for example, with React
const SpoilerElement = ({ originalText, spoilerText }) => {
const [spoilerShown, setSpoilerShown] = React.useState(false);
return (
<div onClick={() => setSpoilerShown(!spoilerShown)}>
{ spoilerShown ? spoilerText : originalText }
</div>
);
};
const App = () => (
<div>
<SpoilerElement originalText="text 1" spoilerText="foo" />
<SpoilerElement originalText="text 2" spoilerText="bar" />
</div>
)
ReactDOM.createRoot(document.querySelector('.react')).render(<App />);
<script crossorigin src="https://unpkg.com/react#18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#18/umd/react-dom.development.js"></script>
<div class='react'></div>
Thanks everybody for your answers, which helped immensely! However, as a minimalist, I took all that I learned from you and came up with what I believe is the simplest possible code achieving my goal:
<div spoiler = "foo" onclick="this.innerHTML=this.getAttribute('spoiler')">
Click for spoiler
</div>
<div spoiler = "bar" onclick="this.innerHTML=this.getAttribute('spoiler')">
Click for spoiler
</div>
When I run the code below I see different behavior in the sandbox I'm using. When I click the button I get "Uncaught SyntaxError: function statement requires a name" in the console but here it is rendering the click event out as text in the button (not sure why?)
Question is—is there a way to pass functions like this to elements created in template literals that are added to the DOM using innerHTML?
const clickHandler = () => {
console.log("Hi");
};
const root = document.getElementById("root");
root.innerHTML = `<button onClick=${clickHandler}>Click</button>`;
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
</body>
</html>
Inline handlers, being attributes, are essentially strings. When you do
<button onClick=${clickHandler}>
the function gets turned into a string, which results in:
<button onclick="()" ==""> {
console.log("Hi");
}>Click</button>
which isn't what you want - the automatic fixing of the syntax caused by the interpolation doesn't work well.
When you do it properly, the string in the attribute, when evaluated as JavaScript, may only reference global variables (for all the cases worth mentioning). While you can get your code to work by using the name of the function, and by making sure the function is global:
const clickHandler = () => {
console.log("Hi");
};
const root = document.getElementById("root");
root.innerHTML = `<button onClick=clickHandler()>Click</button>`;
<div id="root"></div>
A much better approach would be to attach the event listener with JavaScript, instead of an eval-like attribute with scope problems. Insert the elements, then navigate to the element you want the listener attached to, and use addEventListener.
const clickHandler = () => {
console.log("Hi");
};
const root = document.getElementById("root");
root.innerHTML = `<button>Click</button>`;
root.querySelector('button').addEventListener('click', clickHandler);
<div id="root"></div>
Or use a framework designed for this sort of thing.
const App = () => {
const clickHandler = () => {
console.log("Hi");
};
return <button onClick={clickHandler}>Click</button>;
};
ReactDOM.createRoot(document.querySelector('.root')).render(<App />);
<script crossorigin src="https://unpkg.com/react#18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#18/umd/react-dom.development.js"></script>
<div class='root'></div>
as I said in title I have problem with HTML elements created with Element.insertAdjacentHTML() method, I'm trying about an hour to solve this but can't. I have button that create new HTML elements, couple of that elements is new buttons with same class or id, it's no matter, that I need to catch in some variable and than again use for event listener, for some reason the class or id for these new created button doesn't exist, is there any way to catch it and use it later, I need Vanila Javascript?
There is over 500 lines of code, this is only for mentioned method
btnClaim.addEventListener("click", () => {
rewardCurrent.style.display = "none";
claimedRewards.push(currentReward);
rewardsList.innerHTML = ``;
claimedRewards.forEach(function (rew, i) {
const html = `
<div class="reward" id="${i}">
<div class="img-text-cont">
<img src="${rew.imgUrl}" alt="">
<div class="text-cont">
<p class="claimed-reward-title">${rew.title}</p>
<p class="claimed-reward-price">$${rew.price}</p>
</div>
</div>
<div class="claimed-rewards-action">
<button id="btn-sell2">Sell</button>
<button id="btn-ship">Ship</button>
</div>
</div>
`;
rewardsList.insertAdjacentHTML("afterbegin", html);
I need that btn-sell2 and btn-ship buttons in variables.
your element is going to be created and doesn't exist at the time page loads, so js addeventlistener will throw an error. to solve you have 2 ways.
1- use parent node that element will be created inside.
addevenlistener to parent and use
parent.addeventlistener( event, function (event){
if(event.target.classList.contains("childClass") {}
}
2- give addeventlistener when creating the element :
function createElement () {
const elem = -craete elemnt-
elem.addeventlistener(event, function);
}
currently I am making my own project and I got stuck in :/
I wanted to add an event and give some function on div which is made with a button("create"). However, the console returned "Uncaught TypeError: Cannot read property 'addEventListener' of null" this. I think it is because DIV(.c) is made after JS run.
But I need to add an eventlistener and function on DIV(.c) to accomplish what I want.
So, is there any way to bind a div which is created later and add an
const createButton = document.querySelector(".create");
const paperBook = document.querySelector(".b");
createButton.addEventListener("click", createWriting);
function createWriting(e) {
e.preventDefault();
const writing = document.createElement("div");
writing.classList.add("c");
writing.innerHTML = `All work No rest make jack a dull boy`;
paperBook.appendChild(writing);
}
const myProblem = document.querySelector(".c");
myProblem.addEventListener("click", randomFunction);
function randomFunction(e) {
e.preventDefault();
console.log(e)
}
<div class="a">
<button class="create">create</button>
<div class="b"></div>
</div>
event on it?
Below is my code. But I summarized it to simplify for you if you need a whole code just ask me, please :)
thx!
I think the problem is that this part of code
const myProblem = document.querySelector(".c");
It is executed before you create your .c element, so the new elements would not be included on it. Try to add the event everytime a new element is created in the createWriting function
const createButton = document.querySelector(".create");
const paperBook = document.querySelector(".b");
createButton.addEventListener("click", createWriting);
function createWriting(e) {
e.preventDefault();
const writing = document.createElement("div");
writing.classList.add("c");
writing.innerHTML = `All work No rest make jack a dull boy`;
paperBook.appendChild(writing);
writing.addEventListener("click", randomFunction);
}
function randomFunction(e) {
e.preventDefault();
console.log(e)
}
<div class="a">
<button class="create">create</button>
<div class="b"></div>
</div>
I found this code as the answer of a question:
function getNodeIndex(elm){
return [...elm.parentNode.children].indexOf(elm)
}
I made something so when you click on the document, it logs the target of the click;
If the target is myClass, I want it logs the index of it.
The myClass elements are buttons, that are added when the user clicks on a button.
document.addEventListener("click", function(e) {
if(e.target.classList.value == "myClass") {
console.log(getNodeIndex(e.target))
}
})
But, that's weird:
Even if we click on 1st button, 4th button or 35th button, it will always log 2.
What's the problem there?
Thanks.
Edit:
The full code is here: http://pasted.co/6e55109a
And it is executable on http://zombs.io/
It's due to the structure of your DOM which probably looks something like
<div>
<div>Some Text: <button>Button 1</button></div>
<div>Some Text: <button>Button 2</button></div>
<div>Some Text: <button>Button 3</button></div>
</div>
Each of those buttons is the second child of its parent, i.e. one of the inner divs
Here's how to modify getNodeIndex to get it to work with DOM in this shape. If this still doesn't work, post your DOM.
function getNodeIndex(elm) {
return [...elm.parentNode.parentNode.children].indexOf(elm.parentNode)
}
$('button').on('click', e => {
console.log(getNodeIndex(e.target))
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<div>Some Text: <button>Button 1</button></div>
<div>Some Text: <button>Button 2</button></div>
<div>Some Text: <button>Button 3</button></div>
</div>
I don't know if your actual code is exactly the same, but the code you posted has 2 errors, you're missing 2 brackets:
/*
Yours:
document.addEventListener("click", function(e) {
if(e.target.classList.value == "myClass") {
console.log(getNodeIndex(e.target)
}
}
*/
// With the brackets
document.addEventListener("click", function(e) {
if(e.target.classList.value == "myClass") {
console.log(getNodeIndex(e.target))
}
})
I've run your code in jsbin and I had no problem, check the brackets and if you´re still having a problem please post your html
You are adding your eventListener to the document. Then you are checking for the classList. The classList may have another class and break your code. You should use classList.contains('some-class') instead.
I would add the click events directly to the 'some-class'-items you want them to be trigger by. This should work as long as you don't add more items to the DOM later. If you do, make sure to add the eventListener too.
// wait for all the html is loaded
window.addEventListener('load', () => {
// get all buttons with the .some-class
const someClassElements = document.querySelectorAll('.some-class');
// iterate over the 'array like' elements
someClassElements.forEach( element => {
// add a click event to the someClassElements
element.addEventListener('click', () => {
// log the nodeIndex
const nodeIndex = getNodeIndex(element);
console.log( nodeIndex );
});
});
}); // end on load
function getNodeIndex(elm){
return [...elm.parentNode.children].indexOf(elm)
}
div{
margin-top: 50px;
}
<div>
<button class='some-class'>some class (0)</button>
<button class='some-class'>some class (1)</button>
<button class='some-class'>some class (2)</button>
<button>no class (3)</button>
<button class='some-class'>some class (4)</button>
<button class='some-class'>some class (5)</button>
<button>no class (6)</button>
<button class='some-class'>some class (7)</button>
</div>
<div>
<button>no class (0)</button>
<button class='some-class'>some class (1)</button>
<button>no class (2)</button>
<button class='some-class'>some class (3)</button>
<button class='some-class'>some class (4)</button>
<button>no class (5)</button>
<button class='some-class'>some class (6)</button>
</div>
The actual answer in your situation:
It seems like you want to know the index of the parent div, not the actual element.
use
console.log(getNodeIndex(e.target.parentNode));
instead of
console.log(getNodeIndex(e.target));
PS: You are always getting 2 as result without your html, you may actually always be clicking the third child of the parent element. I verified that this is the case from your code.
PSII: an extra.. In the code you linked you removed a parent node of an element. Later you try to use that element to make some unsuccessful console.log's, which won't work because you just removed the element.