Getting help for events handel

24 views
Skip to first unread message

kasi viswanathan

unread,
Sep 19, 2018, 12:59:47 PM9/19/18
to Closure Library Discuss
Hi all,

I am straight way jump into the problem. I am new to JS and Google closure and  jam with this issue

I am using google mdl for HTML design


QUESTION
1) When try to get a click event in button i am unable to handle it, That is event call is not occur
2) But using browser console it occur

I will attach my sample code with it

ATTACHMENT

HTML:

<HTML>
<head>
    <script src="../closure-library/closure/goog/base.js"></script>
    <script src="../js/material.js"></script>
    <link rel="stylesheet" href="../css/material.css">
    <link rel="stylesheet" href="../css/test_add.css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
    <div <div class="mdl-card mdl-shadow--8dp">
        <div class="mdl-card__title">
            <h2 class="mdl-card__title-text">Food</h2>
        </div>
        <div class="demo mdl-card__media">
            <img src='../Images/example.png'>
                </div>
            <div class="action">
                <div class="mdl-card__actions mdl-card--border">
                    <div>
                        <div>
                            <button id="add" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect">
                                <i class="material-icons">add</i>
                                </button>
                        </div>
                        <div>
                            <div class="mdl-textfield mdl-js-textfield">
                                <input id="noinput" class="mdl-textfield__input" type="text" maxlength="2" pattern="([1-9]|[0-9][1-9]|[1-9]0)" >
                                <div>
                                    <span class="mdl-textfield__error">Input is not a number!</span>
                                </div>
                            </div>
                        </div>
                        <div>
                            <button id="minus" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect">
                                <i class="material-icons">remove</i>
                                </button>
                        </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="../js/add.js"></script>
</body>
</HTML>


JS:
goog.provide('sample');
goog.require('goog.events');

goog.events.listen(goog.dom.getElement("add"), goog.events.EventType.CLICK,
    function(e) {
        alert("HAPPY");
    });

Final question
Can I use this for python django framework to render the frontend view
Reply all
Reply to author
Forward
0 new messages