CODEWITHSUNDEEP
javascriptjqueryhtmlcss
droplet gamb
droplet gamb

Reputation: 51

html button execute jquery and javascript?

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.

Upvotes: 0

Views: 66

Answers (5)

zer00ne
zer00ne

Reputation: 44000

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>

Upvotes: 1

Ian Gesner
Ian Gesner

Reputation: 84

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.

Upvotes: 0

Pritamkumar
Pritamkumar

Reputation: 686

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>

Upvotes: 0

Phani Kumar M
Phani Kumar M

Reputation: 4590

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>

Upvotes: 0

Jibin
Jibin

Reputation: 464

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');
        });
    });

Upvotes: 0

Related Questions