html button execute jquery and javascript?

Question

Hello so im trying to make a button that does two thing at the same time

function clickimageone(l){
	alert("test");
	question1button1 = true;
}

}
.border1{
	border: 1px solid red;
}
.border2{
	border: 1px solid red;
}
.border3{
	border: 1px solid red;
}
.border4{
	border: 1px solid red;
}
.image{
	float: left;
}

<div class="image"><img src="img/500.png" onclick="clickimageone()" class="border1" style="height: 500px; max-height: 150px; max-width: 300px; top: 50px; left: 50px"></div>
<div class="image"><img src="img/1000.png" onclick="clickimagetwo(this)" class="border2" style="height: 500px; max-height: 150px; max-width: 300px; top: 50px; left: 100px"></div>
<div class="image"><img src="img/1500.png" onclick="clickimagethree(this)" class="border3" style="height: 500px; max-height: 150px; max-width: 300px; top: 50px; left: 150px"></div>
<div class="image"><img src="img/2000.png" onclick="clickimagefour(this)" class="border4" style="height: 500px; max-height: 150px; max-width: 300px; top: 50px; left: 200px"></div>



<script>
		$('.border1').click(function(e){    
    $('.image, .border1, .border2, .border3, .border4').fadeOut('slow', function(){
        $('.image, .border2').fadeIn('slow');
    });
});


</script>

So basically when people press on the image it will execute jquery to fade in and out some stuff and at the same time to execute a java function to alert users. So my question is can i make it so when the user click on the image it will fade out the picture and fade in a new picture and also alert the user at the same time.

This discussion may be of use: stackoverflow.com/questions/9516900/… — Nick
– Nick, Commented Sep 16, 2017 at 4:22

Community · Accepted Answer · 2020-06-20 09:12:55Z

Used addClass() and .removeClass() instead of .fadeIn() and fadeOut(). Targeted the img container instead of the img itself.

BTW, if you use jQuery, you'll never have the need to use an attribute event handler (i.e. onclick).

Details commented in demo

Demo

// Counter
var idx = 0;
// Any <li> clicked...
$('li').on('click', function() {
  // Increment counter
  idx++;
  // Find the next <li>
  var next = $(this).next('li');
  // Remove the .on class on all img
  $('li').removeClass('on');
  // Add .on class to next <li>
  next.addClass('on');
  /* As you can see, the function runs both each time.
  || If you are looking for something that's simultaneous, 
  || then try another language because JavaScript is one thread.
  */ // The string is a template literal each click changes the count.
  alert(`Hey don't use alert it's annoying!Test with console.log() instead. This image ${idx}`);
});

ul {
  list-style: none
}

li img {
  display: none;
}

.on img {
  display: block;
}

<ul>
  <li class='on'><img src='http://placehold.it/150x150/000/fff?text=1'></li>
  <li><img src='http://placehold.it/150x150/0ff/000?text=2'></li>
  <li><img src='http://placehold.it/150x150/83d800/000?text=3'></li>
  <li><img src='http://placehold.it/150x150/f7a/000?text=4'></li>
  <li><img src='http://placehold.it/150x150/fc0/000?text=5'></li>
  <li><img src='http://placehold.it/150x150/f00/fff?text=6'></li>
</ul>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Jibin · Accepted Answer · 2017-09-16 04:32:09Z

0

Please try this...it works for me...I had included the jquery     

<style>
    }
    .border1{
        border: 1px solid red;
    }
    .border2{
        border: 1px solid red;
    }
    .border3{
        border: 1px solid red;
    }
    .border4{
        border: 1px solid red;
    }
    .image{
        float: left;
    }
    </style>
    <div class="image"><img src="img/500.png" onclick="clickimageone()" class="border1" style="height: 500px; max-height: 150px; max-width: 300px; top: 50px; left: 50px"></div>
    <div class="image"><img src="img/1000.png" onclick="clickimagetwo(this)" class="border2" style="height: 500px; max-height: 150px; max-width: 300px; top: 50px; left: 100px"></div>
    <div class="image"><img src="img/1500.png" onclick="clickimagethree(this)" class="border3" style="height: 500px; max-height: 150px; max-width: 300px; top: 50px; left: 150px"></div>
    <div class="image"><img src="img/2000.png" onclick="clickimagefour(this)" class="border4" style="height: 500px; max-height: 150px; max-width: 300px; top: 50px; left: 200px"></div>


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script>
            $('.border1').click(function(e){    
        $('.image, .border1, .border2, .border3, .border4').fadeOut('slow', function(){
            $('.image, .border2').fadeIn('slow');
        });
    });

edited Sep 16, 2017 at 4:32

answered Sep 16, 2017 at 4:18

Jibin

4642 gold badges4 silver badges16 bronze badges

3 Comments

droplet gamb Over a year ago

i tried but then the jquery wasn't being executed so i just put it in the html body

Jibin Over a year ago

The jquery is not working because the jquery is not included

droplet gamb Over a year ago

I did include it

Phani Kumar M · Accepted Answer · 2017-09-16 04:32:36Z

You can chain the fadeout and fadein events and check for fadeInComplete event of the second image like this.

$('.border1').click(function (e) {
    $('.border1').fadeOut('slow', function () {
        $('.border2').fadeIn('slow', function () {
            $(this).trigger("fadeInComplete");
        });
    });

    $(".border2").on("fadeInComplete", function () {
        alert("test");
        question1button1 = true;
    });
});

$(function () {
	$('.border1').click(function (e) {
		$('.border1').fadeOut('slow', function () {
			$('.border2').fadeIn('slow', function () {
				$(this).trigger("fadeInComplete");
			});
		});

		$(".border2").on("fadeInComplete", function () {
			alert("test");
			question1button1 = true;
		});
	});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<div class="image"><img src="chicago.jpg" class="border1" style="height: 500px; max-height: 150px; max-width: 300px; top: 50px; left: 50px"></div>
<div class="image"><img src="ny.jpg" class="border2" style="height: 500px; max-height: 150px; max-width: 300px; top: 50px; left: 100px"></div>
<div class="image"><img src="img/1500.png" class="border3" style="height: 500px; max-height: 150px; max-width: 300px; top: 50px; left: 150px"></div>
<div class="image"><img src="img/2000.png" class="border4" style="height: 500px; max-height: 150px; max-width: 300px; top: 50px; left: 200px"></div>

Pritamkumar · Accepted Answer · 2017-09-16 04:37:54Z

0

please include jquery js in your html file

function clickimageone(l){
	
}
$('.img_cls').click(function(e){  
     alert("test");
	  question1button1 = true;
       $('.img_cls').fadeOut('slow', function(){
          $('.image, .border2').fadeIn('slow');
        });
});

}
.border1{
	border: 1px solid red;
}
.border2{
	border: 1px solid red;
}
.border3{
	border: 1px solid red;
}
.border4{
	border: 1px solid red;
}
.image{
	float: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="image"><img src="https://png.icons8.com/plus/win8/26"  class="border1 img_cls" style="height: 500px; max-height: 150px; max-width: 300px; top: 50px; left: 50px"></div>
<div class="image "><img src="https://png.icons8.com/minus/ios7/100"  class="border2 img_cls" style="height: 500px; max-height: 150px; max-width: 300px; top: 50px; left: 100px"></div>
<div class="image img_cls"><img src="https://png.icons8.com/plus/win8/26"  class="border3 img_cls" style="height: 500px; max-height: 150px; max-width: 300px; top: 50px; left: 150px"></div>
<div class="image"><img src="https://png.icons8.com/minus/ios7/100"  class="border4 img_cls" style="height: 500px; max-height: 150px; max-width: 300px; top: 50px; left: 200px"></div>



<script>
		

</script>

edited Sep 16, 2017 at 4:37

answered Sep 16, 2017 at 4:21

Pritamkumar

6861 gold badge12 silver badges31 bronze badges

2 Comments

droplet gamb Over a year ago

I included it I didn't put the whole HTML file

Pritamkumar Over a year ago

please try my answer as it is showing alert and fadein at same time @droplet gamb

Ian Gesner · Accepted Answer · 2017-09-16 06:12:34Z

0

I have this in an HTML doc in Visual Studio:

$('.border1').click(function(e) {
  $('.image, .border1, .border2, .border3, .border4').fadeOut('slow', function() {
    $('.image, .border2').fadeIn('slow');
  });
});

function clickimageone() {
  alert("test");
  question1button1 = true;
}

.border1 {
  border: 1px solid red;
}

.border2 {
  border: 1px solid red;
}

.border3 {
  border: 1px solid red;
}

.border4 {
  border: 1px solid red;
}

.image {
  float: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="image"><img src="img/500.png" onclick="clickimageone()" class="border1" style="height: 500px; max-height: 150px; max-width: 300px; top: 50px; left: 50px"></div>
<div class="image"><img src="img/1000.png" onclick="clickimagetwo(this)" class="border2" style="height: 500px; max-height: 150px; max-width: 300px; top: 50px; left: 100px"></div>
<div class="image"><img src="img/1500.png" onclick="clickimagethree(this)" class="border3" style="height: 500px; max-height: 150px; max-width: 300px; top: 50px; left: 150px"></div>
<div class="image"><img src="img/2000.png" onclick="clickimagefour(this)" class="border4" style="height: 500px; max-height: 150px; max-width: 300px; top: 50px; left: 200px"></div>

When I click the first div, it fades out, alerts, and one div fades back in. Your code is pretty much working.

edited Sep 16, 2017 at 6:12

user4447799

answered Sep 16, 2017 at 4:24

Ian Gesner

843 bronze badges

2 Comments

droplet gamb Over a year ago

I've tested it out locally and the jquery works but the JavaScript does not fire up anything

Ian Gesner Over a year ago

Is caching disabled in your browser?

Collectives™ on Stack Overflow

html button execute jquery and javascript?

5 Answers 5

Demo

Comments

3 Comments

Comments

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Demo

Comments

3 Comments

Comments

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related