Is there an easy way to link both functions and variables to a DOM element?
Below is an example of how this might work:
function logfunc(value){
console.log(value)
}
document.getElementById('logger1').onclick = logfunc('this is button1')
document.getElementById('logger2').onclick = logfunc('this is button2')<input type="button" id="logger1" value="Button 1">
<input type="button" id="logger2" value="Button 2">'This is Button x' on button click.
There are many ways to give a callback/listener function data
One would be to use a closure. Change logfunc to return a function the "closes" over value.
see How do JavaScript closures work?
function logfunc(value){
return function() {
console.log(value);
}
}
document.getElementById('logger1').onclick = logfunc('this is button1')
document.getElementById('logger2').onclick = logfunc('this is button2')<input type="button" id="logger1" value="Button 1">
<input type="button" id="logger2" value="Button 2">Otherwise you can put data in the DOM in various ways. DOM data is generally limited to strings, variables are not.
function logfunc(value){
return function() {
console.log(value);
}
}
document.getElementById('logger1').onclick = logfunc({name: 'Joe', age: 12})
document.getElementById('logger2').onclick = logfunc({name: 'Bob', age: 14})<input type="button" id="logger1" value="Button 1">
<input type="button" id="logger2" value="Button 2">Otherwise if you want to put data in the DOM itself then you're mostly limited to strings. You can reference the value attribute in your code
function logfunc(e){
console.log(e.target.value);
}
document.getElementById('logger1').onclick = logfunc;
document.getElementById('logger2').onclick = logfunc;<input type="button" id="logger1" value="Button 1">
<input type="button" id="logger2" value="Button 2">But value is not available on all DOM elements.
You can instead use dataset attributes to store arbitrary data on elements
// select all elements that have a "data-name" attribute
document.querySelectorAll('*[data-name]').forEach((elem) => {
// on each element add a click handler (better than using onclick!)
elem.addEventListener('click', () => {
// access the dataset attributes
console.log(elem.dataset.name, elem.dataset.major);
});
});div[data-name] {
background: pink;
display: inline-block;
margin: 0.25em;
padding: 0.25em;
}<div data-name="Bill" data-major="dance">Button 1</div>
<div data-name="Mary" data-major="science">Button 2</div>
The snippet below uses .addEventListener() to do something when you click the button, and .value to get the value of the element. The this is a keyword that in this case means the button you clicked. In other words, since the button you clicked is represented by document.getElementById('logger1') in the DOM, you can simply use this to represent that.
Also I don't know if it was an actual error, or a typo, but you spelled function like fucntion. I fixed that error for you in the snippet.
And finally, you used .onclick. That works, and is valid code, but it isn't the best way to do it. Since I won't be going into this (this isn't the main question), you might want to go here to find out more.
function logfunc(value) {
console.log(value)
}
document.getElementById('logger1').addEventListener("click", function() {
logfunc('this is ' + this.value);
});
document.getElementById('logger2').addEventListener("click", function() {
logfunc('this is ' + this.value);
});<input type="button" id="logger1" value="Button 1">
<input type="button" id="logger2" value="Button 2">
The function that is bind to an element will has a scope that "this" is refering to the element self. so you can get the value of the input by "this.value"
function logfunc(){
console.log('this is ' + this.value);
}
document.getElementById('logger1').onclick = logfunc
document.getElementById('logger2').onclick = logfunc<input type="button" id="logger1" value="Button 1">
<input type="button" id="logger2" value="Button 2">