CODEWITHSUNDEEP
javascriptjqueryhtml
Priyal Patel
Priyal Patel

Reputation: 17

onclick on 2nd button,i want 1st as well as 2nd button to be get coloured

Here I have created 4 buttons. On click, it should change the color. I want is to, when I click on 2nd button, I want 1st button as well as 2nd button to be get coloured. How can i do it?

<?php
session_start();
?>
<!DOCTYPE html>
<html>
<head>
<style>
.button {
   
    background-color: white;
    border: 1px solid black;
    color: white;
    padding: 8px 30px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
    float:left;
}
</style>
</head>

<body>
<input type="button" class="button" onclick="this.style.backgroundColor = 'red';" value="1">
<input type="button" class="button" onclick="this.style.backgroundColor = 'yellow';" value="2">
<input type="button" class="button" onclick="this.style.backgroundColor = 'green';" value="3">
<input type="button" class="button" onclick="this.style.backgroundColor = 'orange';" value="4">
</body>
</html>

Upvotes: 0

Views: 71

Answers (1)

prasanth
prasanth

Reputation: 22500

Try with querySelector() .need to trigger click event on first button on during second button click

Updated

  1. added color untill clicked element

$('.button').click(function() {
   var that =this;
  $('.button').each(function(){
  $(this).css('background-color', $(this).attr('data-color'));
    if(that == this){
   return false;
  }
  })
})
.button {
  background-color: white;
  border: 1px solid black;
  color: white;
  padding: 8px 30px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
  float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <input type="button" class="button" data-color="red" value="1">
  <input type="button" class="button" data-color="yellow" value="2">
  <input type="button" class="button" data-color="green" value="3">
  <input type="button" class="button" data-color="orange" value="4">
</body>

Upvotes: 1

Related Questions