Responsive interactive-rating-component page using Flexbox, Vanilla JS

Community feedback

• 

  Curtis Simpson•550

  @crsimpson5Posted over 2 years ago

  Hey, nice job on your solution. Your styling looks great!

  To solve your issue you can initialize the rating_score to null. Then, in your your submit function, you can do something like this:

  function clickSubmit() {
    if (!rating_score) return;
    ...
  }
  

  This will make it so that the rest of the code in the function won't run unless the value of rating score has been reassigned to a truthy value (which you've handled in the clickButton function).

  Marked as helpful

  1

  ---

  

  Coffeemechanics•100

  @CoffeemechanicsPosted over 2 years ago

  @crsimpson5 Thanks! It solved the problem and with this there is no need to write extra css code, but I've got a question, is the human language version of the code "if rating_score is null, return to nothing so that function doesn't work."

  1

  

  Curtis Simpson•550

  @crsimpson5Posted over 2 years ago

  @Coffeemechanics Good question.

  It would be like: "if the inverse of rating_score is truthy, stop running the function." (this sounds confusing but it's the best I could do 😆)

  The main takeaway here is the Logical NOT operator, which makes a truthy value false, and a falsy value true. Since null is a falsy value, !null evaluates to true, so in this case the return statement is executed.

  Here's another reference that may help out: https://javascript.info/logical-operators#not

  Marked as helpful

  1