Click-through rate calculator using jQuery I created a calculator for CTR with jQuery.  The calculator is working just the way I want, but I'm quite new to jQuery and I wonder if I am using jQuery effectively.

The goal of the code is that if 2 values are entered and the button is clicked then the correct function is called and the output's background colour will change.

&lt;div class="container"&gt;
&lt;div class="alert alert-info" role="alert"&gt;
    &lt;span class="align-middle"&gt;CTR Calculator&lt;/span&gt;
&lt;/div&gt;


 &lt;div&gt;         
    &lt;label for="v1"&gt;Number of Impressions:&lt;/label&gt; &lt;br/&gt; 
    &lt;input id="v1" type="text" style="width:10em;"/&gt; &lt;br/&gt;

    &lt;label for="v2"&gt;Number of Clicks:&lt;/label&gt; &lt;br/&gt;
    &lt;input id="v2" type="text" style="width:10em;"/&gt; &lt;br/&gt;

    &lt;label for="v3"&gt;CTR:&lt;/label&gt;&lt;br/&gt; 
    &lt;input id="v3" type="text" style="width:10em;"/&gt; &lt;br/&gt;

&lt;div&gt;
    &lt;button id ="btn" type="button" class="btn btn-secondary"&gt;Calculate&lt;/button&gt;
&lt;/div&gt;
&lt;div class="alert alert-info result" role="alert"&gt;
        &lt;span id="result" class="align-middle"&gt;&lt;/span&gt;
&lt;/div&gt;  




  $(document).ready(function(){
      $("#btn").on("click",function(event){
        if ($("#v1").val() === '' &amp;&amp; $("#v2").val() === '' &amp;&amp; $("#v3").val() === '') {
            $('#v1,#v2,#v3').css('background-color', 'transparent');
            alert("Please enter atleast 2 values!");  
        } else if ($("#v1,#v2").val() === '' || $("#v1,#v3").val() === '' || $("#v2,#v3").val() === '') {
            $('#v1,#v2,#v3').css('background-color', 'transparent');
            alert("Please enter atleast 2 values!");
        } else if ($("#v1").val() === '') {
            var mathImp = (parseInt($('#v2').val()) / parseInt($('#v3').val())) * 100;
            $('#v1').val(mathImp);
            $('#v1').css('background-color', 'beige');
            $('#v2,#v3').css('background-color', 'transparent');
        }  else if ($("#v2").val() === '') {
            var mathClicks = (parseInt($('#v1').val()) * parseInt($('#v3').val())) / 100;
            $('#v2').val(mathClicks);
            $('#v2').css('background-color', 'beige');
            $('#v1,#v3').css('background-color', 'transparent');
        } else if ($("#v3").val() === '') {
            var mathCTR = (parseInt($('#v2').val()) / parseInt($('#v1').val())) * 100;
            $('#v3').val(mathCTR);
            $('#v3').css('background-color', 'beige');
            $('#v1,#v2').css('background-color', 'transparent');
        } else {
            alert("Please enter only 2 values!");
        }
     });
});
I think this style is what causes a lot of the "jquery mess" you hear people talk about. Let me try to explain why.

What's going on is that the code tries to handle every possible view state change. 
For example, when you want to highlight a certain input, you also need to consider that one or both of the other inputs are highlighted already and so you need to hide them.
What you can do instead is to "reset" the view state before every run and in that way only have to consider the one case. 
This is called declarative programming, since you basically declare what your view will look like given a certain state, but you don't care about moving from one state to another.

In your case, you would "reset" your view state like so:

$('#v1,#v2,#v3').css('background-color', 'transparent')


Adding this simple line at the start of your click-handler removes a ton of noise from the rest of the code.

Here's a couple of other things that can be improved:


Only use ', not " as well
Don't duplicate jquery selectors
Use better names than v1,v2,v3
If you only care that the user inputs two values, check that (as opposed to checking exact combinations)


Here's one attempt at a refactoring (not tested):

$(document).ready(() =&gt; {
    $('#btn').on('click', () =&gt; {
        let $impressions = $('#v1')
        let $clicks = $('#v2')
        let $ctr = $('#v3')
        let inputs = [$impressions, $clicks, $ctr]

        inputs.forEach($input =&gt; $input.css('background-color', 'transparent'))

        let nFilled = inputs.filter($input =&gt; $input.val() !== '').length
        if(nFilled !== 2){
            alert('Please enter exactly 2 values!')
            return
        }

        let setCalculatedInput = ($input, value) =&gt; {
            $input.val(value)
            $input.css('background-color', 'beige')
        }

        if($impressions.val() === ''){
            setCalculatedInput($impressions, (parseInt($clicks.val()) / parseInt($ctr.val())) * 100)
        }else if($clicks.val() === ''){
            setCalculatedInput($clicks, (parseInt($impressions.val()) * parseInt($ctr.val())) / 100)
        }else if($ctr.val() === ''){
            setCalculatedInput($ctr, (parseInt($clicks.val()) / parseInt($impressions.val())) * 100)
        }
    })
})