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: https://stackoverflow.com/questions/9516900/how-can-i-create-an-asynchronous-function-in-javascript — Nick, Sep 16 '17 at 04:22

score 1 · Answer 1 · edited Jun 20 '20 at 09:12

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 · Answer 2 · 2017-09-16T04:32:09.360

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

i tried but then the jquery wasn't being executed so i just put it in the html body — droplet gamb, Sep 16 '17 at 04:19
The jquery is not working because the jquery is not included — Jibin, Sep 16 '17 at 04:24

Pritamkumar · Answer 3 · 2017-09-16T04:37:54.837

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>

please try my answer as it is showing alert and fadein at same time @droplet gamb — Pritamkumar, Sep 16 '17 at 04:49

score 0 · Answer 4 · edited Sep 16 '17 at 06:12

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.

I've tested it out locally and the jquery works but the JavaScript does not fire up anything — droplet gamb, Sep 16 '17 at 04:29

score 0 · Answer 5 · answered Sep 16 '17 at 04:32

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>

html button execute jquery and javascript?

5 Answers5

Demo