Ways to display a div based on the value quantity

Is it possible to display a div based on the value provided?

Check out my code on Fiddle!

jQuery(function () {

    jQuery('#btn_test').click(function () {
        $(this).parent().children('#test_inner').slideToggle('500');
        return false;
    });


    jQuery("input[type='radio']").change(function () {
        calculate();
    });


    function calculate() {
        var sum = 0;

        jQuery("input[type='radio']:checked").each(function () {

            sum += isNaN(this.value) || $.trim(this.value) === '' ? 0 : parseFloat(this.value);

            jQuery("#totalSum").html(sum);

            $("input[type='radio']").change(function () {

                if (value <= 8) {
                    jQuery("#test_result_item_1").show();
                } else if ((9 <= value) && (value <= 12)) {
                    jQuery("#test_result_item_2").show();
                } else if ((13 <= value) && (value <= 17)) {
                    jQuery("#test_result_item_3").show();
                } else if (18 >= value) {
                    jQuery("#test_result_item_4").show();
                }


            });

        });
    }
});
#test {
    margin-top: 50px;
}
#test h2 {
    margin-top: 30px;
}
#test_inner {
    display: none;
}
#btn_test {
    margin-top: 25px;
}
.test-item {
    margin: 25px auto;
}
.test-item > ol {
    padding-left: 30px;
    counter-reset: list;
}
.test-item > ol > li {
    margin: 10px 0;
    padding-left: 20px;
    position: relative;
}
.test-item > ol > li:before {
    content: counter(list, lower-alpha)") ";
    counter-increment: list;
    position: absolute;
    top: 0;
    left: 0;
    font-weight: 700;
}
.test-item > ol > li input[type="radio"], .test-item > ol > li span {
    display: inline-block;
    vertical-align: middle;
}
.test-item > ol > li span {
    padding: 0 5px;
    position: relative;
}
.test-item > ol > li label input[type="radio"] {
    display: none;
}
.test-item > ol > li label input[type="radio"]:checked + span {
    background: #008000;
    color: #fff;
    display: block;
    padding: 1px 5px;
}
.test-item > ol > li label input[type="radio"]:checked + span:before {
    content:'\2714';
    position: absolute;
    top: 0;
    left: -40px;
    color: #008000;
    font-weight: 700;
}
.test-hidden {
    display: none;
}
.test-unhidden {
    display: block;
}
.test-result {
}
.test-result-item {
    margin: 25px auto;
    display: none;
}
#totalSum {
    text-align: center;
    font-weight: 700;
    font-size: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="test">
    <div class="btn btn-green btn-green-lg2 text-center" id="btn_test"><a href="#">Click</a>

    </div>
    <div id="test_inner">
        <h2>Test</h2> 
        <div class="test-item">
            <h3>Ask?</h3>
            <ol>
                <li>
                    <label>
                        <input type="radio" value="1" name="test1" /><span>Variant 1</span>

                    </label>
                    <li>
                        <label>
                            <input type="radio" value="2" name="test1" /><span>Variant 2</span>

                        </label>
                        <li>
                            <label>
                                <input type="radio" value="3" name="test1" /><span>Variant 3</span>

                            </label>
                            <li>
                                <label>
                                    <input type="radio" value="4" name="test1" /><span>Variant 4</span>

                                </label>
            </ol>
        </div>
        <div class="test-item">
            <h3>Ask?</h3>
            <ol>
                <li>
                    <label>
                        <input type="radio" value="1" name="test2" /><span>Variant 1</span>

                    </label>
                    <li>
                        <label>
                            <input type="radio" value="2" name="test2" /><span>Variant 2</span>

                        </label>
                        <li>
                            <label>
                                <input type="radio" value="3" name="test2" /><span>Variant 3</span>

                            </label>
                            <li>
                                <label>
                                    <input type="radio" value="4" name="test2" /><span>Variant 4</span>

                                </label>
            </ol>
        </div>
        <div class="test-item">
            <h3>Ask?</h3>
            <ol>
                <li>
                    <label>
                        <input type="radio" value="1" name="test3" /><span>Variant 1</span>

                    </label>
                    <li>
                        <label>
                            <input type="radio" value="2" name="test3" /><span>Variant 2</span>

                        </label>
                        <li>
                            <label>
                                <input type="radio" value="3" name="test3" /><span>Variant 3</span>

                            </label>
                            <li>
                                <label>
                                    <input type="radio" value="4" name="test3" /><span>Variant 4</span>

                                </label>
            </ol>
        </div>
        <div class="test-item">
            <h3>Ask?</h3>
            <ol>
                <li>
                    <label>
                        <input type="radio" value="1" name="test4" /><span>Variant 1</span>

                    </label>
                    <li>
                        <label>
                            <input type="radio" value="2" name="test4" /><span>Variant 2</span>

                        </label>
                        <li>
                            <label>
                                <input type="radio" value="3" name="test4" /><span>Variant 3</span>

                            </label>
                            <li>
                                <label>
                                    <input type="radio" value="4" name="test4" /><span>Variant 4</span>

                                </label>
            </ol>
        </div>
        <div class="test-item">
            <h3>Ask?</h3>
            <ol>
                <li>
                    <label>
                        <input type="radio" value="1" name="test5" /><span>Variant 1</span>

                    </label>
                    <li>
                        <label>
                            <input type="radio" value="2" name="test5" /><span>Variant 2</span>

                        </label>
                        <li>
                            <label>
                                <input type="radio" value="3" name="test5" /><span>Variant 3</span>

                            </label>
                            <li>
                                <label>
                                    <input type="radio" value="4" name="test5" /><span>Variant 4</span>

                                </label>
            </ol>
        </div>
        <div class="test-result">
            <div>Total: <span id="totalSum">0</span> points</div>
            <div class="test-result-item" id="test_result-item_1">
                <h3> less than 20 points</h3>

                <p>Div 1</p>
            </div>
            <div class="test-result-item" id="test_result-item_2">
                <h3>20-30 points</h3>

                <p>Div 2</p>
            </div>
            <div class="test-result-item" id="test_result-item_3">
                <h3>30-40 points</h3>

                <p>Div 3</p>
            </div>
            <div class="test-result-item" id="test_result-item_4">
                <h3>more than 40 points</h3>

                <p>Div 4</p>
            </div>
        </div>
    </div>
</div>

If the value is under 8, display div1

If the value is between 9 and 12, show div2

If the value is between 13 and 17, show div3

If the value is 18 or more, display div4

We appreciate any assistance you can provide. Thank you!

jqueryhtmlcss

Answer №1

Your code was referencing divs that did not exist on the page, causing errors. Additionally, the logic in your code was lengthy and incorrect. I have made some updates to the Fiddle for you. Here is the revised logic:

if (sum <= parseInt(8)) {
                    jQuery("#test_result-item_1").show();
                } else if ((9 <= sum) && (sum <= 12)) {
                    jQuery("#test_result-item_2").show();
                } else if ((13 <= sum) && (sum <= 17)) {
                    jQuery("#test_result-item_3").show();
                } else if (18 >= sum) {
                    jQuery("#test_result-item_4").show();
                }

Check out the updated JSfiddle here

Answer №2

Is this the information you were seeking?

jQuery(function() {

  jQuery('#btn_test').click(function() {
    $(this).parent().children('#test_inner').slideToggle('500');
    return false;
  });

  jQuery("input[type='radio']").change(function() {
    calculate();
  });

  function calculate() {
    var total = 0;

    jQuery("input[type='radio']:checked").each(function() {
      $('.test-result-item').hide();
      total += isNaN(this.value) || $.trim(this.value) === '' ? 0 : parseFloat(this.value);

      jQuery("#totalSum").html(total);

      if (total <= 8) {
        $("#test_result_item_1").show();
      } else if ((9 <= total) && (total <= 12)) {
        $("#test_result_item_2").show();
      } else if ((13 <= total) && (total <= 17)) {
        $("#test_result_item_3").show();
      } else if (total >= 18) {
        $("#test_result_item_4").show();
      }

    });

  }
});

There seemed to be a discrepancy between the IDs in your HTML:

test_result-item_1

and those in your jQuery code:

test_result_item_1

I have included a line to ensure that the divs are hidden every time a selection is made:

$('.test-result-item').hide();

You can view an example here.

Answer №3

I have made enhancements to the function as follows:

function calculate() {
    var sum = 0;

    jQuery("input[type='radio']:checked").each(function () {

        sum += isNaN(this.value) || $.trim(this.value) === '' ? 0 : parseFloat(this.value);

        jQuery("#totalSum").html(sum);

            if (sum < 8) {
                jQuery("#test_result-item_1").show();
            } else if (parseFloat(value) < 12) {
                jQuery("#test_result-item_2").show();
            } else if (parseFloat(value) < 17) {
                jQuery("#test_result-item_3").show();
            } else {
                jQuery("#test_result-item_4").show();
            }



    });
}

To view the updated code, click here: https://jsfiddle.net/949wzh2m/22/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Incorporating object into main function of VueJS root component

I have integrated VueJS into my HTML template for an application. When a button is clicked, it passes the object of a component to its root in the following manner: <button v-on:click="$root.savePlan(dataObj)"></button> The dataObj is passe ...

javascripthtmlvue.js

The width of the child box does not properly receive the 100% application

Artistic Inspiration I have created a unique and elegant card layout design. * { box-sizing: border-box; } .card { display: flex; width: 600px; height: 400px; } .card > .img-window { width: 100%; background-image: url('https://s3- ...

htmlcssflexbox

Is it possible to incorporate varied icon images for every item in an unordered list?

While I'm not an CSS expert, I do have a decent understanding of it. My current project involves creating an unordered list with unique icons for each item, along with changing the background color upon hover. I wonder if there's a way to achiev ...

htmlcsshtml-lists

Ensuring even distribution of three divs within a container

Imagine a container that is 1200px wide, with three divs inside. Each div is only 292px wide. The first div should align with the left margin, the third div with the right margin, and the second div should sit right in the middle of them. Adding to the c ...

htmlcss

Experiencing an issue with referrer: The global symbol needs an explicit package name

my $refer = $ENV{HTTP_REFERER}; my $gk1 = substr($str1, -4); if ($gk1 = .swf) { my $antigk = "gk detected"; } else { my $antigk = $link; } I am encountering issues with this code after making some modifications. What could be causing the errors? I ...

htmlperl

Video player on website experiencing issues with playing VAST ads

Hey there! Check out this awesome site for Music Videos: (Music Videos(Player)) I've been testing different options, but if you have a better suggestion, please let me know. Any help would be really appreciated. If I can't figure it out on my o ...

javascripthtmlcss

How can I dynamically update the URL parameter based on the selected option in a dropdown list?

There is a single select option box with three options. When a user selects an option, the corresponding value should be appended to the URL (e.g., value=needbyDate). If another option is selected later, the previous value in the URL should be replaced w ...

javascriptjquery

Display of undefined data in Ajax success response

After receiving an array object data in the Ajax success result, I am trying to print li tags but they are showing as undefined. This is my Ajax code: $.ajax({ 'method': 'GET', 'url': base_url +'party/sel ...

javascriptjqueryangularjsajax

What could be the reason for the selection box in my form not changing the items when togg

I'm having an issue with my form selection box code that used to work but is now not functioning properly. Could someone please help me identify where the error lies? Essentially, I have a form with the ID #main and a select box named #chart-type. Th ...

javascriptjqueryhtml

Error: Invalid Argument - The argument 'PanelController' is expected to be a function, but it is undefined

Here is a snippet of my HTML code: <body ng-controller="StoreController as store"> ........... <section ng-controller="PanelController as panel"> <ul class="nav nav-pills""> <li ng-class="{active:panel.isSe ...

javascripthtmlangularjs

Discovering checkboxes in HTML using jQuery

Greetings! I have limited knowledge when it comes to using jQuery. I am currently facing an issue with the Checkbox attribute. Below, you will find the code snippet that I have mentioned: Code: $( this ).html() Output: <input name="cb_kot[]" class= ...

javascriptjqueryhtml

Issues with the TableSort plugin in asp.net

Let's get started: I have a basic table in an ASP page <table id="provasort" class="tablesorter"> <thead> <tr> <th>head1</th> <th>heade2& ...

jqueryasp.netcsstablesorter

Utilizing PHP and HTML div tags to connect and manipulate a MySQL database

Struggling with incorporating HTML div tags into a booking system. I have the user input fields for city, date, and pet type set up, but getting lost when it comes to passing this information to a SQL database using PHP. Can someone provide guidance on how ...

phphtmlcsssql

Aligning items in the header bar with floating <li> elements

I'm struggling with centering an element in the header bar of my website. I currently have a single header bar at the top, and inside the <header> tag, there's an unordered list with some items floating left and one floating right. Now, I w ...

htmlcsshtml-lists

There was an error in calculating the Foundation 5 - 1170 grid

Currently, I am in the process of learning Foundation 5 and working on an app that utilizes a 1170 grid system. The app has 70px columns and 30px gutters (which equals to 1170 when calculated as 70 * 12 + 30 * 11). However, after setting the default values ...

htmlcsssasszurb-foundation

What causes HTML/Django template to run code in a non-linear fashion?

I was puzzled by the behavior of this particular html template I learned in an online class. It seemed to be executing out of order: The python form class is called using Django's syntax {{form}} which injects blank fields for user input (name, email ...

pythonhtmldjango

The modal box should adjust its height to perfectly accommodate the content within

I'm in the process of developing a straightforward modal (popup) window, using as few lines of code as possible... just the basics. The modal has a maximum width of 650px and its height adjusts to fit the content. In case the content exceeds the avai ...

htmlcss

Countdown malfunction: wrong date displayed

Utilizing the Countdownjs library in my project is resulting in an incorrect day count. Incorporating AngularJS, here is the custom directive I've implemented for the countdown: .directive('tempoPercorrido', function($interval){ ret ...

javascripthtmlangularjsangularjs-directivecountdown

Discover the magic of using Polymer core-animated-pages transitions to create a stunning tile-cascade effect for your custom elements!

Trying to recreate the slide-up and tile-cascade transitions from this example using a snippet with the polymer designer tool. This time, custom elements are preferred over regular HTML tags. Custom elements have been created for each page and placed with ...

htmlpolymermaterial-designshadow-domcustom-element

Creating numerous Facebook posts using jQuery technology

I am currently facing a challenge when attempting to publish multiple facebook posts on a webpage using jQuery. Although I have managed to successfully post the first facebook post, I am encountering difficulties when trying to post another one. What coul ...

javascriptphpjqueryangularjsfacebook