Exercise Solution: Selectors and Click Events

Modern solutions use .on(), unique IDs, .text() for text output and .toggleClass() when only two class states are required.

1. Welcome Message on Button Click Top ↑

$( "#my_b" ).on( "click", function () {
    $( "#display1" ).text(
        "Welcome to plus2net.com"
    );
});

2. Highlight the Clicked Text Box Top ↑

$( ".t_input" ).on( "click", function () {
    $( this ).css(
        "background-color",
        "yellow"
    );
});

3. Replace One Class with Another Top ↑

$( ".my_p" ).on( "click", function () {
    $( this )
        .removeClass( "my_p" )
        .addClass( "my_p2" );
});

4. Toggle Two Visual States Top ↑

$( "#display7" ).on( "click", function () {
    $( this ).toggleClass(
        "my_p my_p2"
    );
});

5. Copy Textbox Text onto a Button Top ↑

$( "#my_b6" ).on( "click", function () {
    $( this ).text(
        $( "#t1" ).val()
    );
});

Textbox tutorial

Original Source Examples Retained for Migration Reference Top ↑

Original example 1

<button type='button'  id=my_b>Click Me</button>
<span id=display1></span>

Original example 2

<script>
$(document).ready(function() {

$("#my_b").click(function(){
$("#display1").html('Welcome to plus2net.com');
})

})
</script>

Original example 3

<input type='text' class='t_input' id='t2'> 
<input type='text' class='t_input' id='t4'>
<input type='text' class='t_input' id='t4'>

Original example 4

<script>
$(document).ready(function() {

$(".t_input").click(function(){
$(this).css("background-color", "yellow");
})

})
</script>

Original example 5

<style>
.my_p{
	background-color:yellow;
}
.my_p2{
	background-color:aqua;
}
</style>

Original example 6

<p class=my_p>This is with class=my_p, click here to change color</p>

Original example 7

<script>
$(document).ready(function() {

$(".my_p").click(function(){
$('.my_p').removeClass('my_p').addClass('my_p2');
})

})
</script>

Original example 8

<p  id=display7>This is with id=display7, click here to change color</p>

Original example 9

<script>
$(document).ready(function() {

$('#display7').addClass('my_p')

$("#display7").click(function(){
var presentClassName = $('#display7').attr('class');	

if(presentClassName=='my_p'){
	newClassName='my_p2'
}else{
	newClassName='my_p'
}

$('#display7').removeClass(presentClassName).addClass(newClassName);
})

})
</script>

Original example 10

<input type=text name=t1 id=t1>  
<button type='button'  id=my_b6>Click Me</button>

Original example 11

<script>
$(document).ready(function() {

$("#my_b6").click(function(){
var my_str=$('#t1').val();
$('#my_b6').html(my_str);
})

})
</script>

Additional Original Learning Routes Top ↑

• ../templates/custom.css

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: