Hello,
I have 3 buttons overtop of a slideshow. Each button corresponds to a different slide on the slideshow. For example when I click button1 it goes to the first slide on the slide show, same with button2 to the second slide and button3 to the third.
What I'm trying to do is that when you click any of the buttons, that buttons changes colour (basically stays on the hover effect) that way the user can see which button/category is selected. So if i click button1 and it brings me to slide1, I want that button to change colour (remain on a hover effect) until another button is clicked, where then that other button would change colour.
Here is the code I currently have. When I click a button it does change colour, however I want the colour to change back the the original when another button is clicked.
$w.onReady(() => { $w("#button61").onClick(()=> { $w("#fullWidthSlides2").changeSlide(0) $w("#button61").style.backgroundColor="rgb(155,255,55)" }) $w("#button56").onClick(()=> { $w("#fullWidthSlides2").changeSlide(1) $w("#button56").style.backgroundColor="rgb(155,255,55)" }) $w("#button62").onClick(()=> { $w("#fullWidthSlides2").changeSlide(2) $w("#button62").style.backgroundColor="rgb(255,0,0)"; }) })
@JD, i'm very curious about how this line works:
const selector = buttons.reduce((a,c)=> a +`#${c},`,"");
I poked into the reduce method and get the gist. Why are there so many commas after the =>
also, why are there these `` things. What are they doing here?
If you or anyone could shed any light of this I'd be thankful.
Hi, @Pierre Dalati is this fixed?
const intitalColor = "red", selectedColor = "blue"; const buttons = ["button1", "button2", "button3"]; const selector = buttons.reduce((a,c) => a + `#${c},`, ""); $w(selector).onClick(event => { buttons.forEach(e => $w("#" + e).style.backgroundColor = intitalColor); $w("#" + event.target.id).style.backgroundColor = selectedColor; })
[Fixed. had a typo)