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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<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> |