Interactive Rating Card

Community feedback

• 

  Joshua Kelly•70

  @hewhodevsPosted over 2 years ago

  Hi Achintya, well done on your submission.

  I had a look at the code regarding point 2, and believe I've found the issue, and it's fix.

  • You have initially defined a "selectedNumber" value of 0 at the top of your index.js file.
  • The first click calls your "click" event listener successfully, and passes 0 as the "previousNumber" argument to your selectNumber() function
  • The first line of selectNumber function then tries to find the element at (0 - 1) i.e. index -1, which does not exist, throwing an uncaught exception error, and preventing your function from moving onto it's second line of code.
  • Every subsequent click works fine, as you are then no longer passing a 0 value to the selectNumber function, and the exception no longer occurs, so things work as expected from then on.

  To fix the issue, include an if statement to catch the initial 0 case. Since nothing is selected initially when the page loads, nothing needs to have .selected removed initially.

  function selectNumber(num1,num2){
    if (num1!== 0) {
      document.querySelectorAll(".number")[num1-1].classList.remove("selected");
    }
    document.querySelectorAll(".number")[num2-1].classList.add("selected");
  }
  

  Marked as helpful

  1

  ---

  

  Achintya Keskar•40

  @SanePiePosted over 2 years ago

  @hewhodevs Thank you so much... Idk why I thought that since the -1th index didn't exist, it would just ignore that line and move on to the next. That was really helpful. I'd also really like to hear any other suggestions you might have regarding the code... Js or CSS... Anything at all. Thank you so much.

  0

  

  Joshua Kelly•70

  @hewhodevsPosted over 2 years ago

  @SanePie Happy to help!

  I learned more about this myself today in the process. So from my understanding, If a function doesn’t have any catch handler for exceptions, the function returns the exception when it happens (it bubbles up to the global scope to be handled if no catch handler is present) and the remaining code in the originating function does not run (because it was essentially interrupted before it could get to that point).

  I recommend looking into using more semantic elements in the HTML for improved accessibility, mainly radio inputs for the value buttons, instead of button elements.

  A benefit of input elements is they come packed with things you can use in the JS side. I.e. you can listen for the “changed” event on the radio inputs, and also use their .checked property to see which element has been checked. It also allows you to use the :checked selector in css to apply styles for the checked radio button and it’s label. Feel free to have a look at my solutions code as a comparison for this. Any feedback is welcomed as well :)

  Happy coding!

  Marked as helpful

  0

  

  Achintya Keskar•40

  @SanePiePosted over 2 years ago

  @hewhodevs Wow! Hadn't really given any thought to the html elements and their effect on the js code. Will definitely keep that in mind in future. Also will definitely check out your codes for reference. Thank you !! Happy coding to you as well :)

  0