Two user inputs > 5 number outputs

I have a form where I have a dropdown box (#dropdown1) and a text input (#input1) that collects integer numbers. I have no experience with Javascript, so I’m looking for some pointers on where to begin.

Basically, it’s as simple as this: the user selects one of the two options from the dropdown box and then enters a number in the text box. The five output boxes display 5 different numbers, and the user can choose whichever output box they want.

There needs to be an if statement corresponding to the dropdown box; I know that much. Then, depending on the number entered, a certain output number will generate for each of the 5 outputs. For example, if I type “23” into the text input and select the first dropdown option, I’ll get “1” back.

I’ve tried looking at other tutorials, but I haven’t found anything helpful.

How to create if-statements…

if(){} else{}
if(i would know JS better){i would be able to solve this issue by my own.}

First declare your values…

let myValue = $w('#dropdown').value

You will need an event-trigger for example when changing value of dropdown…

$w('#dropdown').onChange(()=>{...working code here...});

Everything will work inside onRedy-code-part…

$w.onReady(()=>{...code here inside...});

You change the value of your dropdown. The onChange-event gets triggered and starts a function…

function myFunction(){
   ...placing here your function...
   if(  ){  } else{  }
}

Put all Info together and make your try to solve the problem.

You can tag me if more help is needed.

I would suggest visiting the following sites for information on programming in Javascript:

To learn about programming with Velo, read the following articles that will help you start working with Velo:

Thanks for this! While I have no Javascript experience, I have coding experience… so let’s see if I can make this work.

@russian-dima Hey Velo! I spent some time on this, and I think I’m stuck.

Specifically, I’m stuck on the onChange part and the myFunction part. I’m not sure what needs to go in those two functions.

That said, I have this so far:

let drug = $w('#dropdown1').value
let weight = $w('#input1').value

const string1 = "Acetaminophen";
const string2 = "Ibuprofen";

$w('#dropdown1').onChange(()=>{});


function myFunction(){

   if($w('#dropdown1').value == string1){$w("#text96").text = String(parseInt("#input1"))} else{2}

}

What I wanted to happen there is to have my text96 box simply return the value I put in my input1 box as long as dropdown1 value is Acetaminophen. However, it doesn’t work. Perhaps that function needs to go into the onReady?

I have a little bit of pseudocode:

let drug = $w('#dropdown1').value
let weight = $w('#input1').value

$w.onReady(function(){

if($w('#dropdown1').value == string1){if weight < 6 {return "No dosage"} else if weight >=6 and weight < 11 {return "40 mg"} else if ... } else {if weight < 12 {return "No dosage"} else if weight >=12 and weight < 16 {return "50 mg"} else if ... }

Something like that, but I know I’m missing a ton of code up there! I need an output to my Text96 box.

Any more pointers?

@mschauer
This is not complete, but should give you the right direction…

const string1 = "Acetaminophen";
const string2 = "Ibuprofen"; //--> good against Headaches & all other pains 


//When your page is ready....
$w.onReady(()=>{
    //When some changes on your dropdown are done...
    $w('#dropdown1').onChange(()=>{console.log("Dropdown-changed!")
        //the onChange-Event starts your FUNCTION....//#endregion
        myFunction();
    });
});


function myFunction(){console.log("My Function running...")
    let drug = $w('#dropdown1').value //--> here you get the "drug"-VALUE of dropdown, when changing DROPDOWN
    let weight = $w('#input1').value //--> here you get the "weight"-VALUE of your INPUT

    //Here you try to make a comparisson (if-query/statement)
    if($w('#dropdown1').value===string1){console.log("If-Statement passed!")
        $w("#text96").text = "What ever here..."
    } 
    else{console.log("If-Statement NOT passed!")}
}

Please take a look onto the sites, suggested by Yisrael.
Especialy W3Schools can be very usefull for you.

Good luck!:stuck_out_tongue_winking_eye:

@russian-dima Thanks so much for that! I’ll mark this as solved; I feel pretty confident I can finish from here!

@russian-dima Thank you Dr. :grin::kissing_smiling_eyes:

@ahmadnasriya :sweat_smile::sweat_smile::sweat_smile: i have to go xD
already get some headaches xD…

@Ahmad

Ahmad be so kind and take a look onto my Reg-Ex-problem if you find some time.
You surely have an further idea, how to solve my problem. :roll_eyes::grin: (sorry for cross-posting).