Tips and tricks #5: How to show/hide input and output controls in a calculator

This article describes how to control visibility of input and output controls in a calculator

This page exists due to the efforts of the following people:



Created: 2017-01-28 08:27:09, Last updated: 2022-04-20 10:31:23
Creative Commons Attribution/Share-Alike License 3.0 (Unported)

This content is licensed under Creative Commons Attribution/Share-Alike License 3.0 (Unported). That means you may freely redistribute or modify this content under the same license conditions and must attribute the original author by placing a hyperlink from your site to this work Also, please do not modify any references to the original work (if any) contained in this content.

Tips and tricks series

This article may rely on knowledge you should get from previous articles, so you may want to check them first.

Newton's Second Law

In this article, we will create our next calculator, which will output the calculation results using Newton's Second Law formula. We will create a single calculator for computing force by acceleration and mass and computing acceleration by force and mass, and for computing mass by acceleration and force. To achieve this, we will show/hide input and output controls depending on what exactly we are computing.

To create a calculator, log in to the site, click the profile picture link at the top right corner, and then choose Personal. This will bring you to the Personal section of the site with a new top-left menu. In the top left menu, click the My calculators item.

This will open the My calculators page. Here, press the button in the table header. This will open the calculator editor page.

Add the following input parameters:

Name Variable Type Default value Note
Force, N force Number 9.8 Set Allow decimal digits to enter 9.8
Acceleration, m/s2 accel Number 9.80665 Set Allow decimal digits to enter 9.80665
Mass, kg mass Number 1 Set Allow decimal digits

Now add the additional parameter to choose what to calculate. Fill it like this:

Field name Value Meaning
Name calculate Input label, as it appears on calculator's form
Variable option Name of Javascript variable, which is used to hold input value
Type Dropdown list The type of the output

After you change the type to Dropdown list, the bottom part will show the List items editor. Using the top part of it, add three values into the list by filling Value and Display name fields and pressing the Add button.

Value Display name
force Force
accel Acceleration
mass Mass

Press Ok to close input editor

Now, add the following output parameters:

Name Variable Type Note
Force, N out_force Number Set Number of decimal digits to 1
Acceleration, m/s2 out_accel Number Set Number of decimal digits to 1
Mass, kg out_mass Number Set Number of decimal digits to 1

We have described our calculator's inputs and outputs, so we only need to write code to do the calculations and control the visibility of inputs and outputs.

Let's start with calculations. Here we will use our option variable to choose the formula. option variable holds the string literal equals to the Value of the selected list item.

Add this code into Calculate function:

    case "force":
    case "accel":
    case "mass":

Now we need to control visibility. This is done using the Display function, located just below the Calculate function. Inside this function, all inputs and outputs are available as objects. To get input value from the input object, you should use the GetValue member function with no parameters. To control either input or output visibility, you should use the Display member function, which accepts a single true/false value. Ok, the code will be self-explaining.

Add this code into Display function:

force.Display(option.GetValue() != "force");
accel.Display(option.GetValue() != "accel");
mass.Display(option.GetValue() != "mass");
out_force.Display(option.GetValue() == "force");
out_accel.Display(option.GetValue() == "accel");
out_mass.Display(option.GetValue() == "mass");

Here we check the value of option input to decide whether the control should be visible. Display function is called before Calculate, so it is executed first after a user changes the input.

Click on the Preview button. By default, you should see it with Acceleration and Mass inputs, and Force output. Changing the value of calculate drop-down changes the available inputs and output. If everything is working as expected, Publish the calculator. I embed it in this article below.

PLANETCALC, Newton's Second Law

Newton's Second Law

Digits after the decimal point: 1
Force, N
Acceleration, m/s2
Mass, kg

URL copied to clipboard
PLANETCALC, Tips and tricks #5: How to show/hide input and output controls in a calculator