Design comparison
Solution retrospective
I just recently learned javascript and thus took a lot of help from net and did this code, but its still not working. someone pls help with this.
Community feedback
- @SamarthTripathi-DesignPosted over 2 years ago
You have not included your script tag in index.html . You can add it before the body tag
0@VANIMEHTAPosted over 2 years ago@SamarthTripathi-Design it is included just before closing the </head>
0@subu-vPosted over 2 years ago@VANIMEHTA place the script tag right before the end of the body tag.
just comment out all your code in javascript file and copy the below code
const submit = document.querySelector(".submit-button"); const submitPage = document.getElementById("submitPage"); const successPage = document.getElementById("success"); submit.addEventListener("click", function () { submitPage.classList.toggle("hide"); successPage.classList.toggle("hide"); });I checked, it hides the submit page and shows the success page
See if it works for you
0@VANIMEHTAPosted over 2 years ago@subu-v hii I did the changes as u suggested but its not working. Your code seems right tho. Do you think something might be wrong with my css or html?
0@subu-vPosted over 2 years ago@VANIMEHTA I downloaded the code from your github repository and checked, if you did as i said, it would have worked. did you placed the script tag right at the end of the body tag, but before it? and did you copied the code i suggested.?
Marked as helpful0@VANIMEHTAPosted over 2 years ago@subu-v hii i tried again its working thank you! could u pls suggest more changes so that i get exact results.
0@subu-vPosted over 2 years ago@VANIMEHTA i suggest on how to have the functionality when you press a number from 1 - 5 and when you click submit, it will show on the thank-you-state.
First let's clean up your html, you don't have to complicate things with input and lable. You can do it with a simple p and span element itself.
<div class="rating-ranges"> <p class="rating-number"> <span class="rating-number--span">1</span> </p> <p class="rating-number"> <span class="rating-number--span">2</span> </p> <p class="rating-number"> <span class="rating-number--span">3</span> </p> <p class="rating-number"> <span class="rating-number--span">4</span> </p> <p class="rating-number"> <span class="rating-number--span">5</span> </p> </div>I used a div element to wrap all the elements so that i can use display:flex to make the rating-number elements side by side.
The reason i used p element as the parent and span element as the, child is because i'll add required styling such as padding, background-color etc on the p element, and use absolute positioning on the span element to place the number centered inside of the circle.
In order to have the javascript functionality.
const ratings = document.querySelectorAll(".rating-number"); const submittedRating = document.getElementById("submitted-rating"); for (let i = 0; i < ratings.length; i++) { ratings[i].addEventListener("click", function () { submittedRating.textContent = ratings[i].textContent; }); }What i am doing here is that,
-
When you select elements using querySelectorAll, it will select every element with passed name and returns a nodeList(think it as a array of elements).
-
First the for loop will add the eventListener to all the rating-number by selecting each and every rating-number element individually.
-
When you click the number, the textContent property will extract the actual number and store it in the submitted-rating.
-
thus showing the number in the thank-you-state.
If anything is not clear, ask straightaway, i'll reply.
Marked as helpful0 -
Please log in to post a comment
Log in with GitHub
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord