Javascript and Jquery mobile add class

I searched around how to ad class to div in javascript and find some instruction for eather javascript or jquery but none dont seems to work.

What i tried is a simple code:

    <!DOCTYPE html> 
<html> 
<head> 
        <title>XY</title>

        <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
        <meta name=viewport content="user-scalable=no,width=device-width" />                
         <link rel="stylesheet" href="files/jquery.mobile-1.4.0-rc.1.min.css"/>

         <script src="files/jquery-2.0.3.min.js"></script>
        <script src="files/jquery.mobile-1.4.0-rc.1.min.js"></script>        


        <script type="text/javascript" src="cordova.js"></script>

</head> 

<body> 



<!--SLO STRAN      ################################################ #################-->
<div data-role="page" id="slo" data-theme="a">
 <div data-role="header" data-position="fixed" >
    <a href="#prvastran" data-role="button" data-icon="home">Domov</a>
    <h1>ABC</h1>
    <a href="" onclick="osvezipodatke()" data-role="button" data-icon="search">Osveži</a>


  </div><br>
  <div id="osvezitev_cas_slo" style="margin-left:10px;"></div><br>


<div data-role="collapsible-set">    


<!--boja-->
<div data-role="collapsible" data-collapsed="true">
    <h3> <div class="ui-grid-a">
        <div class="ui-block-a" id="postaja_boja" style="width: 65%;"></div>
        <div class="ui-block-b" id="veter_boja" style="width: 35%;"></div>
      </div>
    </h3>
      <div class="ui-grid-b">
        <div class="ui-block-a" id="max_boja" style="width:50%;" "margin-left:10px"></div>
        <div class="ui-block-b" id="maxob_boja" style="width: 50%;"></div>
      </div>
    <div id="tmp_boja"></div>
    <div class="ui-grid-c">
        <div class="ui-block-a" id="mmv1h_boja" style="width:50%;" "margin-left:10px"></div>
        <div class="ui-block-b" id="mmv24h_boja" style="width: 50%;"></div>
      </div>
</div>





    <div data-role="footer" data-position="fixed">
        <a href="#slo" data-role="button" data-icon="grid" data-iconpos="top" style="width: 15%;">SLO</a>

    </div>
</div>
</div>




</body>
</html>




   <script>


$('#veter_boja').addClass('class_two');


</script>

I just one add class to "veter_boja" and it doesnt seem to work. What am I doing wrong?

Answers


So, like @Jakadinho points out, your script is not run, because it is never called.

You should place the javascript script inside a function and call it e.g. on page load according to the following (though unrelated) example I modified out of http://www.w3schools.com/jsref/event_onload.asp tutorial example.

  <!DOCTYPE html>
  <html>
     <head>
     </head>

      <body onload="myFunction()">
          <h1>Hello World!</h1>
      </body>

  </html>

  <script>
     function myFunction()
     {
        alert("Page is loaded");
     }
  </script>

I tried to get enough near to your problem getting the script out of html element and it worked.

So, attach to body that onload method, make your script a function and call it inside that onload.


Need Your Help

parse json data column

javascript json csv google-visualization

I have a csv file which i read into a javascript variable. I now try to create a visualization for this.

Cooperation tool group: coding in C

c codepad

Is there any tool, similar to codepad, writing code in C language that I can share my code with a group and my group can make changes and simultaneous views in real time editing?