Develop Reference

Create a dynamic function with JS [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 5 days ago.
Improve this question
I'm working in a project to create a knife in 3 parts and I want to create something like this. I don't really know if it's possible.
//selector
const imgBlade = document.querySelector('.piece__blade');
const imgPart = document.querySelector('.piece__part');
const imgMatter = document.querySelector('.piece__matter');
// here only 3 parts to create the knife but i have alot of more thant that
const shinyBladeImagePath = /img/products/shinyblade.png;
const centralePartImagePath = /img/products/centralePart.png;
const woodCentralePartPath = /img/products/woodCentralePart.png;
class piece {
constructor(name, info, path) {
this.name = name;
this.info = info;
this.path = path;
}
}
let shinyBlade = new piece('SB', 'Shiny Blade', shinyBladeImgPath);
let centralePart = new piece('CP', 'Centrale Part', centralePartImagePath);
let woodCentralePart = new piece('W01', 'Wood Centrale Part', woodCentralePartPath);
class knife {
constructor(blade, part, matter) {
this.blade = blade;
this.part = part;
this.matter = matter;
}
}
let firstKnife = new knife(shinyBlade, centralePart, woodCentralePartPath);
// here I want to create a function to create a dynamic "object" :
function showKnife(event) {
// Here I want to change path with on a click event
imgBlade.src = ;
imgPiece.src = ;
imgMatter.src = ;
}
shinyBladeTitle.addEventListener('click', () => {
showKnife.imgBlade.blade.path;
// here I want to click on a title option and change the imgBlade.src on my function
});
centralePartTitle.addEventListener('click', () => {
showKnife.imgPiece.piece.path;
// here I want to click on a title option and change the imgPiece.src on my function
});
woodTitle.addEventListener('click', () => {
showKnife.imgMatter.matter.path;
// here I want to click on a title option and change the imgPiece.src on my function
});
<div>
<img alt="Blade" src="/img/products/BLANK.png">
<img alt="Part" src="/img/products/BLANK.png">
<img alt="Piece" src="/img/products/BLANK.png">
</div>

Javascript Fetch method [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 3 months ago.
Improve this question
Hello I'm new to JS and fetch api. I'm facing a problem that the following code perfectly works and show the datas from that api when I run that code with node and display in on the console. But when I try to show the datas from the api to the browser with JS DOM , it shows 403 error even though I include the authentication in the headers.
fetch('https://od-api.oxforddictionaries.com/api/v2/entries/en-gb/arrow'
, {
method: 'GET',
mode: 'no-cors',
headers: { app_id: "api_id", app_key: "api_key" },
})
.then((response) => response.json())
.then((data) => {
let noun = document.querySelector("#forNoun")
let verb = document.querySelector("#forVerb")
let nounEg = document.querySelector("#nounEg")
let verbEg = document.querySelector('#verbEg')
let searchbtn = document.getElementById("search")
let searchWord = document.getElementById("word")
let nounDef = document.createElement("p");
let verbDef = document.createElement("p")
let lexicalEntries = data.results[0].lexicalEntries;
let length = lexicalEntries.length
for (let i = 0; i < length; i++) {
console.log(lexicalEntries[i].lexicalCategory.text);
nounVerb.innerHTML = lexicalEntries[i].lexicalCategory.text
let senses = lexicalEntries[i].entries[0].senses;
for (let x = 0; x < senses.length; x++) {
if ("examples" && 'synonyms' in senses[x]) {
// console.log(senses[x].definitions[0])
noun.append(senses[x].definitions[0])
}
else if ('examples' in senses[x]) {
noun.append(senses[x].definitions[0])
// console.log(senses[x].definitions[0])
}
else if ('synonyms' in senses[x]) {
noun.append(senses[x].definitions[0])
// console.log(senses[x].definitions[0])
}
else {
noun.append(senses[x].definitions[0])
// console.log(senses[x].definitions[0])
}
}
}
});
`

Splice an array in react keeps removing the first element [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 1 year ago.
Improve this question
Working on my todo app, when I want to remove an element from an array, it keeps removing the first element all the time...
I cant find why.
Any ideas? I copy the bit of code that is linked to my remove function !
THANK YOU!
function App () {
const [activities, setActivities] = useState([]);
const [color, setColor] = useState ('Black');
const [complete, setComplete] = useState([]);
//ADD NEW ACTIVITY
/* activities*/
function addActivity (data) {
let newActivity = { data, done:false, isMotivating: false, id: sum , color: 'Black' }
sum++;
setActivities((activities) => [ ...activities, newActivity])
//console.log(`App: ${JSON.stringify(data)}`)
};
function toggleColor (a) {
setColor ('')
activities[a.id].isMotivating = activities[a.id].isMotivating ? false : true
if (activities[a.id].isMotivating === false) {
setColor ('green')
activities[a.id].color = color
} else {
setColor ('red')
activities[a.id].color = color
}
console.log(activities[a.id])
return activities;
}
function removeTodo (id ) {
const newTodos = [...activities];
newTodos.splice(id, 1);
setActivities(newTodos);
};
}

Your sum seems to be declared via let/var which will be initialized to 0 on each re-render so each of your id is probably set to 0.
You can instead use useRef like so :-
const uuid = useRef(0);
Inside addActivity
function addActivity (data) {
let newActivity = { data, done:false, isMotivating: false, id:uuid.current , color: 'Black' }
uuid.current++;
setActivities((activities) => [ ...activities, newActivity])
//console.log(`App: ${JSON.stringify(data)}`)
};
But not sure if using id as index to splice is best way to go here since you're always removing stuff, your array length will change.

Function return value undefined [closed]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 3 years ago.
Improve this question
I have this function:
function addressVerification() {
var del;
let addVer = $('#add_verified').val();
let maddVer = $('#madd_verified').val();
if (addVer == "yes" && maddVer == "yes") {
del = true;
} else {
del = false;
}
return del;
}
When I call it:
$('#add_verified').change(function(){
var ver = addressVerification();
console.info("This is the returned value from the verified address function: "+ ver);
});
It comes back as "undefined."
What am I doing wrong?

You have a syntax error
function addressVerification() {
var del;
let addVer = $('#add_verified').val();
let maddVer = $('#madd_verified').val();
if (addVer == "yes" && maddVer == "yes") {
del = true;
} else {
del = false;
}
} . <----- This is closing the function, ant thus, returning undefined
return del;
}

Click event on array with multiple elements but individually [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 4 years ago.
Improve this question
I'm trying to cycle through an array with a for...of loop but need each element in the array to be a separate click event (not grabbing all of them) - without using jQuery.
Here's what I have so far ...
const dataScrollTo = document.querySelectorAll('[data-scroll-to]');
let ss = 1000;
let o = 0;
const scrollMe = function scrollMe() {
for (const el of dataScrollTo) {
const trigger = el.getAttribute('data-scroll-to');
const target = document.getElementById(trigger);
const dsoGet = el.getAttribute('data-scroll-offset');
const dssGet = el.getAttribute('data-scroll-speed');
target.scrollIntoView({
behavior: 'smooth'
});
if (dsoGet) {
o = dsoGet;
}
if (dssGet) {
ss = dssGet;
}
}
};
document.addEventListener('click', scrollMe);
And the HTML (there are a few navigation divs similar to this one).
<div>
<a class="icon-link" data-scroll-to="research" data-scroll-offset="60">
</a>
</div>

You should add the event listener to each element, not document. The listener can use this to tell which element was clicked on.
function scrollMe() {
const el = this;
const trigger = el.getAttribute('data-scroll-to');
const target = document.getElementById(trigger);
const dsoGet = el.getAttribute('data-scroll-offset');
const dssGet = el.getAttribute('data-scroll-speed');
target.scrollIntoView({
behavior: 'smooth'
});
if (dsoGet) {
o = dsoGet;
}
if (dssGet) {
ss = dssGet;
}
}
dataScrollTo.forEach(el => el.addEventListener("click", scrollMe));