The function 'clicknode' seems to successfully update the variable 'selected' as desired but when I try to access the variable from another function it still shows as empty.
let selected=[]
const clickNode = (id) => {
console.log(`${id} clicked!`);
if(selected.includes(id)){
for(let i=0;i<selected.length;i++){
if(selected[i]===id){
selected.splice(i,1);}
}
}
else{ selected.push(id)}
console.log(selected);
}
Related
I am trying to store value in the global variable then pass it through Axios, but I can't store it in the variable. here is my code sample.
const voteSubmit = document.querySelector('#voteSubmit');
const votevalue = document.querySelectorAll('.votting_buttons button');
let voteNum;
votevalue.forEach((btn) => {
btn.addEventListener('click', () => {
voteNum = btn.dataset.votno;
});
});
how could I store it?
I want set the addEventListner value to int value,
const stringItem = window.addEventListener("click",(e) => {
const itemTarget = e.target;
const itemParent = itemTarget.parentElement.id;
const strItem = parseInt(itemParent.slice(5));
console.log(strItem);
return strItem;
}, false);
let currentItem = stringItem;
console.log(currentItem);
stringItem return undefined, but I want the strItem to be returned
I want to access the strItem value outside the addEventListener.
How do I do that?
The addEventListener returns undefined as a function (see link). You are passing a function to the addEventListener which gets called whenever you click on the window. The return value of that function will be lost. To be able to use that value outside of the function you will have to do something like this:
let stringItem;
window.addEventListener("click",(e) => {
const itemTarget = e.target;
const itemParent = itemTarget.parentElement.id;
const strItem = parseInt(itemParent.slice(5));
console.log(strItem);
stringItem = strItem;
return strItem;
}, false);
The last two line of your code wouldn't work as they're executed as soon as the eventListener gets added. The currentItem will always be undefined. I would advise you to read more on using callback function in javascript.
The return value of the callback function is discarded. It doesn't make sense to return anything. window.addEventListener doesn't return anything. It doesn't make sense to store the result in a variable stringItem.
You can create a variable outside of the function and store the value in it:
let value = 0;
document.querySelector('#button1').addEventListener("click",(e) => {
++value;
}, false);
document.querySelector('#button2').addEventListener("click",(e) => {
value = 0;
}, false);
document.querySelector('#button3').addEventListener("click",(e) => {
console.log(value);
}, false);
<button id="button1">Increment</button>
<button id="button2">Reset</button>
<button id="button3">Show</button>
This gets called on the onkeyup event in my html search bar input.
I walked through it with the debugger and it is actually getting the searchInput that the user types, but something about the filter() function doesn't work. It doesn't actually filter through the storageSvc array and then re-rendering the table with the filtered data. "name" is part of an object in my data array.
No errors, its just not actually filtering the data.
function searchTeam(){
let searchInput = document.getElementById("searchInput").value;
storageSvc.filter({name:searchInput});
// re render table
renderTable("#tableContainer", storageSvc.list());
}
filter(filterObj) {
//returns a copy of the filtered array
///e.g., storageSvc.filter({coachLicenseLevel:1});
return this.model.data.filter((d) => {
for (const key of Object.keys(filterObj)) {
if (d[key] !== filterObj[key]) {
return false;
}
}
return true;
});
}
You're not actually using the returned value from the filter function.
Try assigning the returned value of the filter function to a variable and then pass that variable to your render fucntion:
function searchTeam() {
let searchInput = document.getElementById("searchInput").value;
const filteredResults = storageSvc.filter({ name: searchInput });
// renderTable("#tableContainer", storageSvc.list() );
renderTable("#tableContainer", filteredResults);
}
function filter(filterObj) {
//returns a copy of the filtered array
///e.g., storageSvc.filter({coachLicenseLevel:1});
return this.model.data.filter((d) => {
for (const key of Object.keys(filterObj)) {
if (d[key] !== filterObj[key]) {
return false;
}
}
return true;
});
}
I have 2 event listeners and they both push the element that is clicked into 2 separate arrays. These console.log in the event listener functions as expected, however when I pass them into a move function they both return undefined.
I've tried it with just passing the element that is selected into the function as well with the same result.
document.querySelectorAll('img').forEach(function(el) {
el.addEventListener('click' , function(params) {
el.classList.add('selected')
selectedPieces.push(el)
console.log(selectedPieces)
moveBy(selectedPieces)
})
})
document.querySelectorAll('.square').forEach(function(el) {
el.addEventListener('click', function() {
el.classList.add('target')
targetPieces.push(el)
console.log(targetPieces)
moveBy(targetPieces)
})
})
function moveBy(selected,target) {
console.log(selected)
console.log(target)
}
So I did create a work around in this. It involved sending the addEventListeners to their own functions, then adding them to an array, then sending that array to it's own function which then allowed me to move things around.
Only thing wrong with this version is that it only works one time, so I'm currently working through what is causing it to only fire once.
document.querySelectorAll('img').forEach(function(el) {
el.addEventListener('click' , addselected)
})
document.querySelectorAll('.square').forEach(function(el) {
el.addEventListener('click', addtarget)
})
function addselected(selected){
console.log('---addselected---')
var select = selected.path[0]
moveList.push(select)
}
function addtarget(target){
console.log('---addtarget---')
if (target.path.length === 7){
var tar = target.path[1]
}else{
var tar = target.path[0]
}
moveList.push(tar)
moveBy(...moveList)
}
function moveBy(...moveList) {
console.log('---moveBy---')
let moveTarg = moveList[2]
let moveSel = moveList[0]
if (typeof moveTarg === 'undefined') {
console.log('not working')
}else{
moveTarg.appendChild(moveSel)
moveList = []
}
console.log(moveList)
}
well
function moveBy(selected,target) {
console.log(selected)
console.log(target)
}
has two paramaters.
moveBy(targetPieces)
but you pass only one parameter in.
i want to create state like this:
componentWillReceiveProps(nextProps) {
nextProps.columns.forEach((c) => {
const name = nextProps.columns[nextProps.columns.indexOf(c)];
this.setState({ `${name}`: (this.props.activeHeaders.indexOf(c) > -1) });
console.log(`${name}`);
});
}
I am mapping on my array columns, so each item on the array, i want to set state on them as key, is there a possibe way?
Is there a possible way?
Yes, but the way you are trying is not correct, instead of calling setState inside loop, first prepare an object with all the key-value, then pass that object to setState.
Like this:
componentWillReceiveProps(nextProps) {
let obj = {};
nextProps.columns.forEach((c, i) => {
const name = nextProps.columns[nextProps.columns.indexOf(c)];
obj[name] = this.props.activeHeaders.indexOf(c) > -1;
});
this.setState(obj);
}
Didn't get the meaning of this line:
const name = nextProps.columns[nextProps.columns.indexOf(c)];
componentWillReceiveProps(nextProps) {
nextProps.columns.forEach((c) => {
const name = nextProps.columns[nextProps.columns.indexOf(c)];
this.setState({ [name]: (this.props.activeHeaders.indexOf(c) > -1) });
console.log(`${name}`);
});
}
This should do the job