jQuery – Selector of a button with JavaScript
Today I have dealt again with JS, while reading some of the JS related books that I have to review 🙂
Thus, I have asked myself how many ways are there to make a button selector with JS/jQuery. After some time, I have come with 4 possibilities, 2 with JS and 2 with jQuery.
Thus, this is what the sample looks like:
Thus we have four buttons, each of which is selected through a separate way in JS. The code is more important, thus here it comes:
<html>
<head>
<title>VitoshAcademy</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
window.onload = function (){
var my_button = document.getElementById('my_id_button');
my_button.onclick = function(){
document.getElementById('my_text').style.color = 'green';
}
}
$(document).ready(function(){
$('#my_id_button_2').click(function(){
$('#my_text').css('color','black');
});
});
</script>
<head>
<body>
<p id="my_text">Here Comes the boom!</p>
<button onclick="$('#my_text').css('font-weight',' bold')">Bold</button>
<button onclick= "document.getElementById('my_text').style.fontWeight = 'lighter'">Light</button>
<button id="my_id_button">Green</button>
<button id="my_id_button_2">Back to black</button>
</body>
</html>