0

I have been coding something and I have an enter key function so it will act as if the user clicked the element (button in this case) using the enter key. Is there a way to also change the pseudo state so it will react and display actual change to whatever is being clicked? (i.e., when the button is clicked it will change to the button:active state, but using JavaScript/jQuery).

$(document).ready(function() {
  $("#hide").hide();
});

$("#button1").click(function() {
  $("#hide").show();
  $("#button1").active(function() { //current code
    $(this).attr('data-content', 'bar'); //current code
  });
  setTimeout(function() {
    $('#hide').hide();

  }, 3000);
});
#button1 {
  border-top-width: 1px;
  border-radius: 5px;
  box-shadow: 0 9px #999;
  position: relative;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  top: -10%;
  font-size: 30px;
  width: 200px;
  height: 50px;
  animation: fadeIn 10s;
  background-color: #00ff55;
  transition: width 0.25s, height 0.25s, background-color 0.2s ease-out 1ms;
}

#button1:hover {
  background-color: #04d326;
  cursor: pointer;
  width: 220px;
  height: 55px;
}

#button1:active {
  content: attr(data-content);
  box-shadow: 0 5px #777;
  transform: translateY(4px);
  background: rgb(47, 69, 141);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<button type="button" onclick="getInputValue();" id="button1">Get Equation</button>
mplungjan
  • 169,008
  • 28
  • 173
  • 236
My Info
  • 39
  • 8
  • Check this [how-do-you-add-pseudo-classes-to-elements-using-jquery](https://stackoverflow.com/questions/12740967/how-do-you-add-pseudo-classes-to-elements-using-jquery) – flyingfox Oct 21 '22 at 11:13
  • Your code gives console errors. Also don't add event listeners inside a click event listener – mplungjan Oct 21 '22 at 11:14

0 Answers0