some function are not getting called when function are wrapped inside the self invoking function

Question

I am using javascript for my project and in the same I had some javascript functions defined, but when I was validating the function through DOMMonster it is giving a tip that there are too many global function declaration.

To overcome that I enclosed my functions inside a self invoking function by which I was able to remove the global nature of the function. but, 2 functions which were called on the OnChange event are not firing up. can someone suggest me how to make it work inside the same.

CODE

(function(){
    function createHiddenDateField(elementName) {
        // format is DD/MM/YYYY
        var finalDate = document.getElementById(elementName + '-DD').value + '/' + document.getElementById(elementName + '-MM').value + '/' + document.getElementById(elementName + '-YYYY').value;
        document.getElementById(elementName).value = finalDate;
        if(elementName=="securityQuestionAnswerDate"){
            document.getElementById("securityQuestionAnswerDate").onchange();
        }
        return finalDate;
    }
})();

CALLER :

<select id="dateofbirth-DD" class="form_field date_field_select 
                    " onchange="createHiddenDateField('dateofbirth')">
                    <option value="">DD</option>
                    <option value="01">01
                    </option>
                    <option value="02">02
                    </option>
                    <option value="03">03
                    </option>
                    <option value="04">04
                    </option>
                    <option value="05">05
                    </option>
                    <option value="06">06
                    </option>
                    <option value="07">07
                    </option>
                    <option value="08">08
                    </option>
                    <option value="09">09
                    </option>
                    <option value="10">10
                    </option>
                    <option value="11">11
                    </option>
                    <option value="12">12
                    </option>
                    <option value="13">13
                    </option>
                    <option value="14">14
                    </option>
                    <option value="15">15
                    </option>
                    <option value="16">16
                    </option>
                    <option value="17">17
                    </option>
                    <option value="18">18
                    </option>
                    <option value="19">19
                    </option>
                    <option value="20">20
                    </option>
                    <option value="21">21
                    </option>
                    <option value="22">22
                    </option>
                    <option value="23">23
                    </option>
                    <option value="24">24
                    </option>
                    <option value="25">25
                    </option>
                    <option value="26">26
                    </option>
                    <option value="27">27
                    </option>
                    <option value="28">28
                    </option>
                    <option value="29">29
                    </option>
                    <option value="30">30
                    </option>
                    <option value="31">31
                    </option>
                </select>

you defined a function but missed to call it createHiddenDateField(arg) — Sharmila, Jan 12 '17 at 05:55
@Sharmila I added the code from where I am calling the same. — vaibhav, Jan 12 '17 at 06:02

score 0 · Answer 1 · edited May 23 '17 at 10:30

but, 2 functions which were called on the OnChange event are not firing up

Functions hooked up with onxyz attributes that must be globals. It's one of the many reasons not to use onxyz-attribute-style event handlers, since globals are a Bad Thing™.

Instead, hook up your handler using modern event handling, e.g.:

document.getElementById("dateofbirth-DD").addEventListener(
    "click",
    function() {
        createHiddenDateField('dateofbirth');
    },
    false
);

If you have to support obsolete browsers that don't support addEventListener, see this answer for a function that handles them for you.

score -1 · Answer 2 · answered Jan 12 '17 at 06:02

-1

try use get() to do this and maybe use something like jquery or angularjs you can save a good time ! http://www.w3schools.com/jsref/jsref_getdate.asp

answered Jan 12 '17 at 06:02

demopix

159
6

and replace your select for datapiker https://jqueryui.com/datepicker/ – demopix Jan 12 '17 at 06:04

some function are not getting called when function are wrapped inside the self invoking function

2 Answers2