I wonder that can we create function in (if else) statement?

Question

This's my HTML and JavaScript that I try to do.

I want to get value from select option after radio button is selected. Calculate this to select option and then call function inside if statement when select option value is changed:

<div class="col-md-4">
    <div class="radio radio-danger">
        <input type="radio" id="radio1" name="chbox" value="option1">
        <label for="radio1"> Section A (Preferred)
            <br/><span>Adult(12y +) $35.00<br/>Children(5-11y) $18.00</span> </label>
    </div>
    <div style="display:none;" id="ch1">
        <div class="form-group">
            <label><strong>Children</strong>
            </label>
            <select class="form-control" id="a1" onchange="totalPrice()">
                <?php for($i=0;$i<=50;$i++){ echo '<option value="'.$i. '">'.$i. ' people</option>'; } ?>
            </select>
        </div>
        <div class="form-group">
            <label><strong>Adult</strong>
            </label>
            <select class="form-control" id="a2" onchange="totalPrice()">
                <?php for($i=1;$i<=100;$i++){ echo '<option value="'.$i. '">'.$i. ' people</option>'; } ?>
            </select>
        </div>
    </div>
</div>
<div class="col-md-4">
    <div class="radio radio-danger">
        <input type="radio" id="radio2" name="chbox" value="option1">
        <label for="radio2"> Section B (Open, Middle)
            <br/><span>Adult(12y +) $25.00<br/>Children(5-11y) $15.00</span> </label>
    </div>
    <div style="display:none;" id="ch2">
        <div class="form-group">
            <label><strong>Children</strong>
            </label>
            <select class="form-control" id="b1">
                <?php for($i=0;$i<=50;$i++){ echo '<option value="'.$i. '">'.$i. ' people</option>'; } ?>
            </select>
        </div>
        <div class="form-group">
            <label><strong>Adult</strong>
            </label>
            <select class="form-control" id="b2">
                <?php for($i=1;$i<=100;$i++){ echo '<option value="'.$i. '">'.$i. ' people</option>'; } ?>
            </select>
        </div>
    </div>
</div>
<div class="col-md-4">
    <div class="radio radio-danger">
        <input type="radio" id="radio3" name="chbox" value="option1">
        <label for="radio3">Section C (Open, Side)
            <br/><span>Adult(12y +) $18.00<br/>Children(5-11y) $10.00</span> </label>
    </div>
    <div style="display:none;" id="ch3">
        <div class="form-group">
            <label><strong>Children</strong>
            </label>
            <select class="form-control" id="c1">
                <?php for($i=0;$i<=50;$i++){ echo '<option value="'.$i. '">'.$i. ' people</option>'; } ?>
            </select>
        </div>
        <div class="form-group">
            <label><strong>Adult</strong>
            </label>
            <select class="form-control" id="c2">
                <?php for($i=1;$i<=100;$i++){ echo '<option value="'.$i. '">'.$i. ' people</option>'; } ?>
            </select>
        </div>
    </div>
</div>
</div>
<div class="col-md-4">
    <div class="radio radio-danger">
        <input type="radio" id="radio1" name="chbox" value="option1">
        <label for="radio1"> Section A (Preferred)
            <br/><span>Adult(12y +) $35.00<br/>Children(5-11y) $18.00</span> </label>
    </div>
    <div style="display:none;" id="ch1">
        <div class="form-group">
            <label><strong>Children</strong>
            </label>
            <select class="form-control" id="a1" onchange="totalPrice()">
                <?php for($i=0;$i<=50;$i++){ echo '<option value="'.$i. '">'.$i. ' people</option>'; } ?>
            </select>
        </div>
        <div class="form-group">
            <label><strong>Adult</strong>
            </label>
            <select class="form-control" id="a2" onchange="totalPrice()">
                <?php for($i=1;$i<=100;$i++){ echo '<option value="'.$i. '">'.$i. ' people</option>'; } ?>
            </select>
        </div>
    </div>
</div>
<div class="col-md-4">
    <div class="radio radio-danger">
        <input type="radio" id="radio2" name="chbox" value="option1">
        <label for="radio2"> Section B (Open, Middle)
            <br/><span>Adult(12y +) $25.00<br/>Children(5-11y) $15.00</span> </label>
    </div>
    <div style="display:none;" id="ch2">
        <div class="form-group">
            <label><strong>Children</strong>
            </label>
            <select class="form-control" id="b1">
                <?php for($i=0;$i<=50;$i++){ echo '<option value="'.$i. '">'.$i. ' people</option>'; } ?>
            </select>
        </div>
        <div class="form-group">
            <label><strong>Adult</strong>
            </label>
            <select class="form-control" id="b2">
                <?php for($i=1;$i<=100;$i++){ echo '<option value="'.$i. '">'.$i. ' people</option>'; } ?>
            </select>
        </div>
    </div>
</div>
<div class="col-md-4">
    <div class="radio radio-danger">
        <input type="radio" id="radio3" name="chbox" value="option1">
        <label for="radio3">Section C (Open, Side)
            <br/><span>Adult(12y +) $18.00<br/>Children(5-11y) $10.00</span> </label>
    </div>
    <div style="display:none;" id="ch3">
        <div class="form-group">
            <label><strong>Children</strong>
            </label>
            <select class="form-control" id="c1">
                <?php for($i=0;$i<=50;$i++){ echo '<option value="'.$i. '">'.$i. ' people</option>'; } ?>
            </select>
        </div>
        <div class="form-group">
            <label><strong>Adult</strong>
            </label>
            <select class="form-control" id="c2">
                <?php for($i=1;$i<=100;$i++){ echo '<option value="'.$i. '">'.$i. ' people</option>'; } ?>
            </select>
        </div>
    </div>
</div>
</div>

and the JavaScript code:

$(document).click(function() {
    var check1 = document.getElementById("radio1");
    var check2 = document.getElementById("radio2");
    var check3 = document.getElementById("radio3");
    if (check1.checked) {
        $("#ch1").fadeIn();

        function totalPrice() {
            var a1 = document.getElementById("a1").value | 0;
            var a2 = document.getElementById("a2").value | 0;
            var total = 0;
            total = (a1 * 18) + (a2 * 35);
            document.getElementById("adCost").value = total;
            document.getElementById("total").value = total;

        }

    } else {
        $("#ch1").fadeOut();
    }
    if (check2.checked) {
        $("#ch2").fadeIn();
    } else {
        $("#ch2").fadeOut();
    }
    if (check3.checked) {
        $("#ch3").fadeIn();
    } else {
        $("#ch3").fadeOut();
    }
});

Here is the problem Uncaught ReferenceError: totalPrice is not defined — Adventure Loop Asia, Sep 01 '16 at 07:14
Inline handlers need a global function to call, or at least a function, which can be globally referred. — Teemu, Sep 01 '16 at 07:17
Regarding your title question "*I wonder that can we create function in a block?*" - yes, you can since ES6, but it's available only inside that block. See [here](http://stackoverflow.com/a/31461615/1048572) for details. — Bergi, Sep 03 '16 at 13:53

viveso · Answer 1 · 2016-09-01T07:25:20.540

1

This is not a good practice. You can miss an scenario that could call this function. In this case, the function won't be available (is not defined error). Keep functions out of conditional statements to avoid these kind of errors.

edited Sep 01 '16 at 07:25

answered Sep 01 '16 at 07:16

viveso

49
5

I wonder that can we create function in (if else) statement?

1 Answers1