Home/ Questions/Q 6813595
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T20:35:19+00:00

I want to display either OPEN or CLOSED, depending on the conditional, in the

  • 0

I want to display either “OPEN” or “CLOSED”, depending on the conditional, in the parent, but I don’t know how to do this. This code makes two <h2> headings work as a drop down list. I want the function to pass the parameters, and if it does not equal 1, I want to display OPEN in the <span> of the <h2>.

Javascript

<script type="text/javascript">
    var a = null;
    var b = null;
    var c = 1;
    $(document).ready(function () {
        $(".toggle_container").hide();
        $("h2.trigger").click(function () {
            $(this).toggleClass("active").next().slideToggle("slow");
        });
    });
    function divide(a, b) {
        (a / b != c) ?
      // Where help is needed
      //  $(this).parent(".status").text("OPEN").css("color", "green") :
      //  $("team").parent(".status").text("CLOSED").css("color","red");
        document.write(a + " / " + b);
    }
</script>

HTML

 <body>
    <div class="tournaments">
    <h2 class="trigger">Tournament 1<span class="status"></span></h2>
        <div class="toggle_container">
            <div class="block">
                <h3>Details</h3>
                <p>Deadline: DATE</p>
                <p>Teams: <span class="team"><script type="text/javascript">divide(3, 7)</script></span>
                </p>
            </div>

        </div>
        <h2 class="trigger">Tournament 2 <span class="status"></span></h2>
        <div class="toggle_container">
            <div class="block">
                <h3>Details</h3>
                <p>Deadline: DATE</p>
                <p>Teams: <span class="team"><script type="text/javascript">divide(3,7)</script></span>
                </p>
            </div>
        </div>
    </div>
</body>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    When you execute a JavaScript function in HTML the way you’re doing, that function has no awareness of what HTML element contains it. One way to bypass that problem (my favorite way) is to put those variables in data- attributes for the DOM element, and use jQuery to extract and operate on them using .data().

    Your second problem is that the h2 tag isn’t a parent (container) of the span.team element. A little more DOM traversal is necessary to get to the one from the other.

    http://jsfiddle.net/mblase75/fzwBM/

    new HTML:

    <div class="tournaments">
    <h2 class="trigger">Tournament 1<span class="status"></span></h2>
    <div class="toggle_container">
        <div class="block">
            <h3>Details</h3>
            <p>Deadline: DATE</p>
            <p>Teams: <span class="team" data-a="3" data-b="7"></span>
            </p>
        </div>
    </div>

    <h2 class="trigger">Tournament 2 <span class="status"></span></h2>
    <div class="toggle_container">
        <div class="block">
            <h3>Details</h3>
            <p>Deadline: DATE</p>
            <p>Teams: <span class="team" data-a="3" data-b="7"></span>
            </p>
        </div>
    </div>
</div>

    new JS:

    $(document).ready(function() {
    $(".toggle_container").hide();
    $("h2.trigger").click(function() {
        $(this).toggleClass("active").next().slideToggle("slow");
    });

    $('span.team').each(function() {
        var a = $(this).data('a');
        var b = $(this).data('b');
        var $status = $(this).closest('.toggle_container').prev('.trigger').find('.status');
console.log($status.length);
        if (a != b) {   // if a/b!=1, then a!=b
            $status.text("OPEN").css("color", "green");
        } else {
            $status.text("CLOSED").css("color", "red");
        }
        $(this).text(a + " / " + b);
    });
});
    • 0