Determining the active status of a class using oTree and JavaScript

Question

Determining the active status of a class using oTree and JavaScript

Upon running the following code:

    <div id="1-round" class="btn-group btn-group-toggle btn-lg" data-toggle="buttons" >
{% for checkbox in form.players_choice %}
    <label class="btn btn-primary rounded mr-3 active btn-lg 1-round" style="margin-bottom:8px;">
        <script>
           $('label').click(function() {
          $(this).addClass('btn-primary').removeClass('btn-default').siblings().removeClass('btn-primary').addClass('btn-default');
         if ($('#id_players_choice_0').is(':checked')) {
         x = id_players_choice_0.value};
         if ($('#id_players_choice_1').is(':checked')) {
         x = id_players_choice_1.value};
          alert(x);
         });
        </script>
        {{checkbox}}
    </label>
{% endfor %}
</div>

Upon use, the value (the x variable) is only retrieved on the second or third button press.
Is there a solution for this issue?
Thank you!

javascript bootstrap-4 otree

Answer 1

Answer №1

Utilize the $('label') selector to target labels that are already present in the document. Avoid placing the click handler inside a loop, as this can result in multiple instances of the same handler on various elements. Instead, consider moving the script to the end of the document, just before the closing </body> tag.

Ensure to properly declare the variable x to maintain appropriate scope.

<div id="1-round" class="btn-group btn-group-toggle btn-lg" data-toggle="buttons">
{% for checkbox in form.players_choice %}
    <label class="btn btn-primary rounded mr-3 active btn-lg 1-round" style="margin-bottom:8px;">
        {{checkbox}}
    </label>
{% endfor %}
</div>
<script>
    $('label').click( function() {
        var x;
        $(this).addClass('btn-primary').removeClass('btn-default')
               .siblings().removeClass('btn-primary').addClass('btn-default');
        if ($('#id_players_choice_0').is(':checked')) {
            x = id_players_choice_0.value;
        }
        if ($('#id_players_choice_1').is(':checked')) {
            x = id_players_choice_1.value;
        }
        alert(x);
    });
</script>

If there is uncertainty about the labels being created before the script execution, utilize event delegation:

$(document).on('click', 'label', function() { // ...etc

Answer 2

Utilize the $('label') selector to target labels that are already present in the document. Avoid placing the click handler inside a loop, as this can result in multiple instances of the same handler on various elements. Instead, consider moving the script to the end of the document, just before the closing </body> tag.

Ensure to properly declare the variable x to maintain appropriate scope.

<div id="1-round" class="btn-group btn-group-toggle btn-lg" data-toggle="buttons">
{% for checkbox in form.players_choice %}
    <label class="btn btn-primary rounded mr-3 active btn-lg 1-round" style="margin-bottom:8px;">
        {{checkbox}}
    </label>
{% endfor %}
</div>
<script>
    $('label').click( function() {
        var x;
        $(this).addClass('btn-primary').removeClass('btn-default')
               .siblings().removeClass('btn-primary').addClass('btn-default');
        if ($('#id_players_choice_0').is(':checked')) {
            x = id_players_choice_0.value;
        }
        if ($('#id_players_choice_1').is(':checked')) {
            x = id_players_choice_1.value;
        }
        alert(x);
    });
</script>

If there is uncertainty about the labels being created before the script execution, utilize event delegation:

$(document).on('click', 'label', function() { // ...etc

Determining the active status of a class using oTree and JavaScript

Answer №1

Similar questions

Is there a way to confirm whether or not two files are identical?

What is the most efficient way to find the maximum, minimum, and median values in an array?

What could be the reason for my React/HTML select element occasionally failing to display the default selected value?

Is there a way to customize a package.json file using postinstall?

When attempting to use dynamic imports with `react-icons`, NextJS will import all necessary components and dependencies

Whenever I declare it, the onclick method is executed

$set { "array.variable.value" :"newvalue"} utilize a different term besides "variable" or implement a new variable

What is the process for dynamically incorporating JavaScript files during compilation to serve as input for browserify?

Wait until all information has been entered into the database before replying to the request

Tips for displaying the overlay in a jQuery UI modal dialog

Retrieve the `access_token` attribute from local storage

Increase the identifier of my input text when a table row is duplicated through Javascript

Using Node.js and Typescript to implement a chain of logical AND operations with an array of any length

show an HTML webpage within a <div> container using AJAX technology

Unable to access placeholder information from the controller

Generating a JSON tree hierarchy from an array of nested objects

Autocomplete feature is not functioning properly when trying to use JSON input

Successfully submitting form_with without experiencing any errors for mandatory fields

The proper way to insert data in JavaScript and PHP

Adding jQuery SVG Sources to SVG Elements