How to highlight the input button by clicking to a button?-CodePudding

I can't code jquery javascript therefore i have no idea how to highlight (border or background change) the submit button for a few seconds. I tried some of the scripts that have been shared on this platform but i wasn't lucky. What code do you suggest?

The button i need to highlight is submitbtn

and the button that needs to highlight it by click is eventbtn

I appreciate the help

Thanks

Edited: I Want to add class to the submit button once the button is clicked

.sidebar {
  background-color: black;
  width: 33%;
  float: right;
}

.submitbtn {
  width: 66%;
  position: relative;
  float: left;
  background-color: #407060;
  padding: 15px 30px;
  border: none;
  cursor: pointer;
  color: white;
  text-transform: uppercase;
}

.eventbtn {
  color: white;
  border: none;
  border-radius: 2px;
  padding: 15px 30px;
  width: 100%;
  background-color: #A73D42;
  cursor: pointer;
}

body {
  background-color: #f1f1f1
}

<p><input type="submit" value="Submit"  id="form-submit" /></p>
<div >
  <button  id="highlight"> <<<<<<<<<<< </button>
</div>

CodePudding user response：

The key is to remove the highlighting after a few seconds, this can be done with setTimeout() function:

function highlight(id)
{
  clearTimeout(highlight.timer);
  const el = document.getElementById(id);
  //highlight the button
  el.classList.add("highlighted");
  //remove highlight after 3sec
  highlight.timer = setTimeout(() => el.classList.remove("highlighted"), 3000);
}

.sidebar {
  background-color: black;
  width: 33%;
  float: right;
}

.wpcf7-form-control.has-spinner.wpcf7-submit {
  width: 66%;
  position: relative;
  float: left;
  background-color: #407060;
  padding: 15px 30px;
  border: none;
  cursor: pointer;
  color: white;
  text-transform: uppercase;
}

.eventbtn {
  color: white;
  border: none;
  border-radius: 2px;
  padding: 15px 30px;
  width: 100%;
  background-color: #A73D42;
  cursor: pointer;
}

body {
  background-color: #f1f1f1
}

/* added */
.highlighted
{
  box-shadow: 0 0 2em 1px red;
}
.wpcf7-submit {
  transition: box-shadow 0.2s;
}

<p><input type="submit" value="Submit"  id="form-submit" /></p>
<div >
  <button  id="highlight" onclick="highlight('form-submit')"> <<<<<<<<<<< </button>
</div>

CodePudding user response：

Do you mean highlight submitbtn when clicking eventbtn?

Add a js to handle the click event, and then add highlight class to submitbtn.

var eventbtn = document.getElementById('highlight');
var submitbtn = document.getElementsByClassName('submitbtn')[0];

eventbtn.addEventListener('mousedown', function () {
  submitbtn.classList.add('highlight');
});

eventbtn.addEventListener('mouseup', function () {
  submitbtn.classList.remove('highlight');
});

.sidebar {
  background-color: black;
  width: 33%;
  float: right;
}

.submitbtn {
  width: 66%;
  position: relative;
  float: left;
  background-color: #407060;
  padding: 15px 30px;
  border: none;
  cursor: pointer;
  color: white;
  text-transform: uppercase;
}

.eventbtn {
  color: white;
  border: none;
  border-radius: 2px;
  padding: 15px 30px;
  width: 100%;
  background-color: #A73D42;
  cursor: pointer;
}

.highlight {
  background-color: #8beccc;
}

body {
  background-color: #f1f1f1
}

<p><input type="submit" value="Submit"  id="form-submit" /></p>
<div >
  <button  id="highlight"> <<<<<<<<<<< </button>
</div>

CodePudding user response：

Simply add a class to the element you want to highlight. Then remove the class with the setTimeout function.

Add a class in CSS with a high specificity that contains all visible changes you want to apply. It does not matter what it is. It can be background, border, box-shadow...
In JS use an eventListener to listen to click-events on the button.
Apply the class you have specified in CSS with classList.add().
Add a setTimeout function to remove the class after a specified time with classList.remove()

Vanilla JavaScript:

    // button element that will be clicked
var button = document.querySelector('button[]'),
    // element that should be highlighted
    input = document.querySelector('#form-submit'),
    // timer in ms
    timer = 2000;

// eventListener to execute the script on button click
button.addEventListener('click', function() {
  // adds a class to apply CSS changes for the highlighting
  input.classList.add('highlight');
  // timeout function
  setTimeout(function() {
    // removes the class after the timer has been reached
    input.classList.remove('highlight');
  }, timer);
})

#form-submit.highlight {
  background-color: yellow;
}

/* original CSS */
.sidebar {
  background-color: black;
  width: 33%;
  float: right;
}

.wpcf7-form-control.has-spinner.wpcf7-submit {
  width: 66%;
  position: relative;
  float: left;
  background-color: #407060;
  padding: 15px 30px;
  border: none;
  cursor: pointer;
  color: white;
  text-transform: uppercase;
}

.eventbtn {
  color: white;
  border: none;
  border-radius: 2px;
  padding: 15px 30px;
  width: 100%;
  background-color: #A73D42;
  cursor: pointer;
}

body {
  background-color: #f1f1f1
}

<p><input type="submit" value="Submit"  id="form-submit" /></p>
<div >
  <button  id="highlight">&#60;&#60;&#60;&#60;&#60;&#60;&#60;&#60;&#60;&#60;&#60;</button>
</div>

jQuery:

// button element that will be clicked
var $button = $('button[]'),
    // element that should be highlighted
    $input = $('#form-submit'),
    // timer in ms
    timer = 2000;

//Eventlistener looking for a click event
$button.click(function() {
  //adds a class for highlighting
  $input.addClass('highlight');
  //timeout function
  setTimeout(function() {
    //removes class for highlighting
    $input.removeClass('highlight');
  }, timer);
})

#form-submit.highlight {
  background-color: yellow;
}

/* original CSS */
.sidebar {
  background-color: black;
  width: 33%;
  float: right;
}

.wpcf7-form-control.has-spinner.wpcf7-submit {
  width: 66%;
  position: relative;
  float: left;
  background-color: #407060;
  padding: 15px 30px;
  border: none;
  cursor: pointer;
  color: white;
  text-transform: uppercase;
}

.eventbtn {
  color: white;
  border: none;
  border-radius: 2px;
  padding: 15px 30px;
  width: 100%;
  background-color: #A73D42;
  cursor: pointer;
}

body {
  background-color: #f1f1f1
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<p><input type="submit" value="Submit"  id="form-submit" /></p>
<div >
  <button  id="highlight">&#60;&#60;&#60;&#60;&#60;&#60;&#60;&#60;&#60;&#60;&#60;</button>
</div>

CodePudding user response：

I tryed to answer with pure css by using animation and keyframes. My attempt only works the first time and once everytime after you change the target.

(Note that I'm not used to these properties so there may be a better way to do this)

#form-submit{
  background-color: transparent;
}
@keyframes changeBackground {
  0% {
    background-color: orange;
  }
  99.999% {
    background-color: orange;
  }
  100% {
    background-color: transparent;
  }
}
#form-submit:target{
  animation: changeBackground 1s;
}

<input type="submit" value="submit" id="form-submit" />
<a href="#form-submit">highlight</a>
<br>
<a href="#">change target</a>