PricingBlog

Non-clickable button

  • pisconeuf-1180551426070552667

    Pisco

    2 years ago

    Hey everyone,
    I created a variable called "counter" to which I assigned the value of my paragraph displaying the numbers. Next, I set up a "click" event on the "+" button to increase the counter by the "add" value and on the "-" button to decrease the counter by the "minus" value. Now, I want to make the "-" button non-clickable when the number reaches 0 to prevent negative numbers (-0, -1, -2...). Does anyone know the best practice to achieve this?

    Thank you.
  • lucasg-1180553822007988234

    Lucas G

    2 years ago

    use the "disabled" attribute
  • 1180553853544968323-Screenshot_2023-12-02_at_11.59.13_AM.png
    👍2
  • set it to 'true' when counter equals 0
  • pisconeuf-1180784901910437988

    Pisco

    2 years ago

    Thank you very much, Lucas, for your assistance. Could you provide more details on the configuration when the counter is equal to 0? Indeed, when I set the attribute to "true," the button deactivates correctly, which is a positive outcome. However, I am encountering difficulties in performing the step to set the attribute to "true" when the counter is equal to 0 (I am unable to achieve this).
  • andreasmoller-1180802238017437746

    Andreas Møller

    2 years ago

    You an set it with a formula.
    Variable count equals 0
  • pisconeuf-1180822146398834698

    Pisco

    2 years ago

    When I set "counter equal to 0," the value changes when I click the + button, so it never truly stays at 0. I'm approaching it incorrectly and can't identify where my error lies in the implementation step.
  • Tod-1180822147774550106

    Tod

    2 years ago

    Great energy @Pisco! Your continuous contribution to the toddle Community just made you advance to Community Level 3!
  • andreasmoller-1180828146845614112

    Andreas Møller

    2 years ago

    I assume your counter looks something like this?
    1180828146908536872-CleanShot_2023-12-03_at_12.08.50.png
  • Where the click event for "+" is
  • And minus is similar but with minus 1
    1180828245696970803-CleanShot_2023-12-03_at_12.09.30.png
  • You can then set the disabled attribute like this
    1180828464656433243-CleanShot_2023-12-03_at_12.10.21.png
  • on the minus button
  • and it will not go below 0
  • andreasmoller-1180828788121161728

    Andreas Møller

    2 years ago

    Remember that the two values you are compareing have to be of the same type
  • 1180828878378369035-CleanShot_2023-12-03_at_12.12.07.png
  • andreasmoller-1180829269463666688

    Andreas Møller

    2 years ago

    You can add a disabled style, so that you can see when the button is disabled
  • pisconeuf-1180836678605209700

    Pisco

    2 years ago

    Thank you so much for your help. I was almost there. My mistake was not putting the value '0' back into the second field of 'equals.' I truly appreciate Toddle because even though I couldn't do it before, now that I know how to proceed, it's really straightforward, and I really like that.
  • andreasmoller-1180836797228535848

    Andreas Møller

    2 years ago

    👍