Languages

Menu
Sites
Language
Javascript function undefined: Uncaught ReferenceError: $ is not defined

Hello, 

I'm trying to do a simple http request to my server. 

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>
    <title>Wearable UI</title>
    <link rel="stylesheet"  href="../../lib/tau/wearable/theme/default/tau.min.css">
    <link rel="stylesheet"  href="../../css/style.css">        
    <!--<script type="text/javascript" src="toggle.js"></script>-->
    <script type="text/javascript" >
function checkToggle(name){
    //make box2 = box1 when checked              
           var checkbox = document.getElementById(name);
           if (checkbox.checked == 1){
               HTTPReq('http://secret.nl/WebServer/edit.php?name='+name+'&value=1');
              console.log("set "+name+" ON");
           }else{
               HTTPReq('http://secret.nl/WebServer/edit.php?name='+name+'&value=0');
               console.log("set "+name+" OFF");
           }
}    
function HTTPReq(theUrl){
    console.log('httpReq');
    var client = new XMLHttpRequest();
    client.open('GET', theUrl);
    client.send();
    }        
</script>
</head>
<body>
    <div class="ui-page" data-enable-page-scroll="false">
        <div class="ui-content">
            <div class="ui-switch">
                <div class="ui-switch-text">
                Led001
                </div>
                <div class="ui-toggleswitch ui-toggleswitch-large">
                        <input type="checkbox" class="ui-switch-input" id="Led001" onclick="checkToggle('Led001')">
                    <div class="ui-switch-button"></div>
                </div>
                <div class="ui-switch-sub-text">
                    Bedroom Light
                </div>
            </div>
        </div>
        <script src="controls.js"></script>
    </div>
</body>
<script type="text/javascript" src="../../lib/tau/wearable/js/tau.min.js"></script>

</html>

When i emulate this i get the error: Uncaught ReferenceError: checkToggle is not defined. How ever when i save the same file when i'm in web emulator mode and live editing. the code works....?

Can anyone explain this and tell me how to fix this.  Thanks

List

Responses

1 Replies
Boyeon Son

Hello~

Why don't you try adding

window.onload = function() {
    document.getElementById("Led001").addEventListener("click", checkToggle("Led001"));
};

inside the <script> tag instead of calling the checkToggle function with "onclick"?

I think it failed to find the checkToggle function because the HTML dom is constructed before your script is completed.

Please try my solution and let me know if it worked or not! :)