Kevin Powell - Community•3mo ago

Javascript logic help pls

https://codepen.io/saad-shehzad-the-bashful/pen/raBbdXg I don’t know how to come up with the logic or planning for this design. It’s a really common FEM project, and it’s really basic. However, I’m having trouble because when I click one button, I want the background-color: white; to apply only to that button. When I click another button, the white background should be removed from the previous button and applied only to the newly selected button. Then, when I click the submit button, it should redirect to another HTML file that says, You pressed 'the pressed button' out of five.

saad shehzad

CodePen

Untitled

...

12 Replies

Kapteyn Universe•3mo ago

Use form with fieldset of radio inputs. You can get the value from checked input and show it on form submit. Also you can change the style with :checked pseudo class https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio https://developer.mozilla.org/en-US/docs/Web/CSS/:checked Also that fieldset must have a legend (or it can be a role radiogroup and use aria-labelledby or aria-label instead of legend).

Code-S ♛OP•3mo ago

any other way? this doesnt seem the best approach i want to make a design like this https://bunchydo.github.io/Interactive-rating-component/

glutonium•3mo ago

this would solve the changing color problem but once redirected to a diff page u have no way to know which button was pressed u do need js for that part i suggest u just do the whole thing in js since u need to use it anyway

Kapteyn Universe•3mo ago

There are probably many ways to do it, and there isn't always a single best way. But to me, this is a proper and well-structured approach. That solution is not great in terms of both semantics and accessibility. @glutonium Yes, you do need js. That is the form submit part Also you don't need another page. It can be done with a modal

glutonium•3mo ago

well the easiest would be to basically add a clsss to the pressed button this can be used to track which button is currently pressed since the class will only be for that button u can also in css make it so that any button with that class will have white bg when a diff button is pressed, u simply check IF there is a button with that class , and if so simply remove that class and add to the newly pressed button as for keeping state between diff pages, u can use localstorage. setting the current clicked button in localstorage as buttons are pressed and when next page loads , fetch from the localstorage and see which was the latest button that was pressed

Kapteyn Universe•3mo ago

Check Grace Snow's feedbacks, she gives great feedbacks, like this one: https://www.frontendmentor.io/solutions/interactive-rating-component-using-html-css-javascript-vCK__V2OnL

Frontend Mentor

Frontend Mentor | Interactive Rating Component using HTML, CSS, Jav...

rjmills87's front-end solution for the Interactive rating component coding challenge on Frontend Mentor

Code-S ♛OP•3mo ago

tysm

Code-S ♛OP•3mo ago

gluto i did it https://codepen.io/saad-shehzad-the-bashful/pen/raBbdXg

saad shehzad

CodePen

Untitled

...

Code-S ♛OP•3mo ago

i dont know how you guys come up with logic/planning its so hard and i used AI for help in this 😢 now the thing is i want to display the selected text in the "you selected ... out of 5"

Code-S ♛OP•3mo ago

https://codepen.io/saad-shehzad-the-bashful/pen/mybgpjL

saad shehzad

CodePen

Untitled

...

glutonium•3mo ago

the code seems fine in terms of how it's working but too much repetition :p u can do it a LOT easier than that while keeping the logic same instead of going through all buttons and removing class, u can just make a querySelector WITH that class if the returned value is not null then u know that a button EXISTS with that class u simply remove the class from that button as for adding the class, u can get all the buttons as a nodelist using querySelectorAll and then loop through it and add an event listener for them all . in the event listener, u can use event parameter (event.target) to get the clicked button lastly for redirecting the user to the next page, u can just use an anchor tag or wrap the anchor tag inside a button with the href being "index2.html"

const allButtons = document.querySelectorAll(".all_the_buttons button");

allButtons.forEach((btn) => {
  btn.addEventListener("click", (e) => {
    document
      .querySelector(".added_attribute")
      ?.classList.remove("added_attribute");

    e.target.classList.add("added_attribute");
  });
});

const allButtons = document.querySelectorAll(".all_the_buttons button");

allButtons.forEach((btn) => {
  btn.addEventListener("click", (e) => {
    document
      .querySelector(".added_attribute")
      ?.classList.remove("added_attribute");

    e.target.classList.add("added_attribute");
  });
});

Kapteyn Universe•3mo ago

Here, this is what i was talking about. I changed my old solution for this challenge a bit. Probably add some aria attributes and change some other things too if i look into it a little bit. Instead of an alert here, you can change the display of thank you section. https://codepen.io/KapteynUniverse/pen/MYgRBNZ

Gaming

Programming

Javascript logic help pls

Did you find this page helpful?