Hello everyone!
I have problem running HTML code with java-script file that contains j query commands on my browsers, but it works perfectly on codepen.io, i have tried all three browsers on my laptop (mozilla firefox, internet explorer and chrome) but the code is It didn’t work on any of them.
Can anyone help pls?
This my HTML code:
<!doctype html>
javascript basics<style type="text/css">
.class1{
background-color: #50f;
color: #fff;
padding: 10px;
font-size: 14pt;
}
.class2{
color: #fff;
font-size: 25pt;
}
</style>
<button id="get">Get</button>
<button id="set">Set</button>
<button id="add">Add</button>
<button id="remove">Remove</button>
<button id="empty">Empty</button>
<br/><br/>
<div id="div_id" style="width: 300px; height: 200px; position: relative; background-color: #ccc;">
<center> This is a div </center>
</div>
<br/><br/>
<input type="textbox_id" id="text_id" name="Enter Your Name" /> <br/><br/>
<select size="10" id="select_id">
<option> Option #1 </option>
<option> Option #1 </option>
<option> Option #1 </option>
</select>
<br/>
<ol id="list_id">
<li> Item #1 </li>
<li> Item #2 </li>
<li> Item #3 </li>
</ol>
Java-script file:
$(document).ready(function(){
$(’#div_id’).click(function(){
$(’#div_id’).addClass(‘class2’); // ‘#div_id’ <==> this // this will apply class2 on the div by clicking on it
});
$('#div_id').click(function(){
$('button').addClass('class1'); // this will apply class1 on the buttons by clicking on the div
});
$('#div_id').click(function(){
$('button').css({ // this will apply css elements to all buttons
'color': 'red',
'font-size': '30pt',
'background-color': '#ccc'
});
});
});
