2

I am making a React/ClojureScript app with an input for a min and a max value followed by an input that will be checked if it is in the range of the min-max. Then if it is in the range it will enable a Valid button and if not disable it. It works with the initial values of the atoms for min and max range but when I change them via the inputs on the webpage they error like crazy and I cannot figure out why because no matter where I look at the values of min and max it seems my in-range and Valid button should work.

(def min-range (reagent/atom 0))

(def max-range (reagent/atom 100))

(defn min-get []
  [:div
   "The atom " [:code "min-range"] " has value: "
   @min-range ". "
   [:input {:type "number" 
            :on-change #(reset! min-range (-> % .-target .-value))}]])

(defn max-get []
  [:div
   "The atom " [:code "max-range"] " has value: "
   @max-range ". "
   [:input {:type "number" 
            :on-change #(reset! max-range (-> % .-target .-value))}]])

(defn atom-input [value]
  [:input {:type "number"
           :value @value
           :on-change #(reset! value (-> % .-target .-value))}])

(defn in-range? [number]
  (if (and (>=  number @min-range) (<= number @max-range))  false true))

(defn range-validation [val]
  [:div
   "Number must be between "  @min-range
   " :  and "  @max-range " : "
   [:input {:type "button" :value "Valid" :disabled (in-range? val)}]])

(defn check-me []
  (let [val (reagent/atom 0)]
    (fn []
      [:div
       "Value to be checked  "
       [:p "the value is " @val]
       [:p [atom-input val]]
       [:on-change [:p @min-range " + "  @max-range]]
       [:on-change [range-validation @val]]])))

So if I render min-get, max-get and check-me I should end up with 3 inputs and some when I change min-get and max-get then the Valid button in range-validation should toggle between disabled and enabled depending on the value passed.

edit 1:

When I change the min-range and max-range values via the inputs the Valid button does not work as intended for example on initial startup the values are 0min 100 max. So all numbers from 0-100 keep the valid button active but at -1 and 101 they are disabled. However if I change the max range to 75 it bugs out and random numbers seem to make the button valid and invalid.

Two Die
  • 21
  • 2
  • 1
    The example works fine. "... they error like crazy ..." what kind of errors do you get? – Thomas Heller Apr 23 '19 at 08:37
  • When i change the min-range and max-range values via the inputs the Valid button does not work as intended for example on initial startup the values are 0min 100 max. So all numbers from 0-100 keep the valid button active but at -1 and 101 they are disabled. However if I change the max range to 75 it bugs out and random numbers seem to make the button valid and invalid. – Two Die Apr 23 '19 at 12:27

1 Answers1

0

Turns out the atoms start out has number types and then as soon as a user interacts with the inputs they change to String/text type and thus the operator clojure operator (<= string string string) compares them as if they were strings and not numbers. Casting the values to (int) on the in-range? function solved my issue.

Two Die
  • 21
  • 2