CODEWITHSUNDEEP
javascriptjquery
delek tashi
delek tashi

Reputation: 113

Mousedown and Mouseup issue with firing call?

In my code i am using two button to display different Display from the same page as two color. When i click on green color for 3 second then only i am firing the call and displaying related data. Red button functions as a normal function and it works.

My issue is on clicking the TRY IT GREEN Button for the first time for 3 second,it does nothing ,i have to click second time for 3 second to display green color. After clicking TRY IT GREEN button for 2 times , it work in future with one click as well.

Any help would be highly appreciated, so that i dont have to click two times at the beginning.

   
var pressme = document.getElementById('pressme');
var button1=document.getElementById('myBtn');
var button2=document.getElementById('myBtn1');

var showme = document.getElementById('showme');
button1.addEventListener('click', display1

);
button2.addEventListener('click', display2
 
);
function display1(){                              //displaying red background
    pressme.style.display = 'none';
    showme.style.display = 'block';
    button1.style.display=  'none';
    button2.style.display=  'block';



}

function display2(){          //displaying green background after 3 sec
    

let timeout = null;
     button2.addEventListener( 'mousedown', event => {
     timeout = setTimeout(() => {
     pressme.style.display = 'block';
     showme.style.display = 'none';
     button2.style.display=  'none';
     button1.style.display=  'block';

      }, 3000 );
     });
    button2.addEventListener( 'mouseup', event => {
                                    
    if ( timeout ) clearTimeout( timeout );
      });

}
<!DOCTYPE html>
<html>
<head>
  <title>Realtime communication with WebRTC</title>
  <link rel="stylesheet" href="css/main.css" />
</head>
<body>


<table id="pressme" style="width:100%" bgcolor="red" height =500px>
        <button id="myBtn">Try it red</button>

    </table>


<table id="showme" style="width:100%;display:none;" bgcolor="green"height=500px>
        <button id="myBtn1" style=display:none; >Try it green </button>

</table>

</body>
</html>

Upvotes: 0

Views: 253

Answers (1)

Łukasz Blaszyński
Łukasz Blaszyński

Reputation: 1565

You need to have eventListener attached before, the problem was that you have attached mouse events listeners after clicking on button, so they not work for the first time.

Working code:

var pressme = document.getElementById('pressme');
var button1=document.getElementById('myBtn');
var button2=document.getElementById('myBtn1');

var showme = document.getElementById('showme');

button1.addEventListener('click', display1);

function display1(){                              //displaying red background
    pressme.style.display = 'none';
    showme.style.display = 'block';
    button1.style.display=  'none';
    button2.style.display=  'block';
}


button2.addEventListener( 'mousedown', event => {
 timeout = setTimeout(() => {
   pressme.style.display = 'block';
   showme.style.display = 'none';
   button2.style.display=  'none';
   button1.style.display=  'block';
  }, 3000 );
});

button2.addEventListener( 'mouseup', event => {
    if ( timeout ) clearTimeout( timeout );
});
<!DOCTYPE html>
<html>
<head>
  <title>Realtime communication with WebRTC</title>
  <link rel="stylesheet" href="css/main.css" />
</head>
<body>


<table id="pressme" style="width:100%" bgcolor="red" height =500px>
        <button id="myBtn">Try it red</button>

    </table>


<table id="showme" style="width:100%;display:none;" bgcolor="green"height=500px>
        <button id="myBtn1" style=display:none; >Try it green </button>

</table>

</body>
</html>

Upvotes: 2

Related Questions