Css is overriding / Image Rotation in css JavaScript

Question

I want to create image Editor with functionality of Image Rotation, Image Color Changer (Sepia/Gray) and Price Calculator on Height and Width. Also I want to add Image Selector(Image Crop) in this editor.

Can Anyone help me to correct this code.

img css is overriding in this code when I click on Rotate button it rotates image but also when I click on color button it changes color as well rotates image.. I dont know how to remove this overriding or use something else.

Also need help to rotate image in particular div.

$('input[name="color"]').on('change', function() {
  $('div.imageDiv')
    .removeClass('original sepia gray')
    .addClass($(this).val());
});

function calculate() {
  var myBox1 = document.getElementById('box1').value;
  var myBox2 = document.getElementById('box2').value;
  var result = document.getElementById('result');
  var myResult = [(myBox1 * myBox2 * 0.69) / 100];
  result.value = myResult;
}

$('input').click(function() {
  var img = $('img');
  if (img.hasClass('north')) {
    img.attr('class', 'west');
  } else if (img.hasClass('west')) {
    img.attr('class', 'south');
  } else if (img.hasClass('south')) {
    img.attr('class', 'east');
  } else if (img.hasClass('east')) {
    img.attr('class', 'north');
  }
});

img {
  display: block;
  width: 50%;
}
.original {} .sepia {
  -webkit-filter: sepia(1);
  filter: sepia(1);
}
.gray {
  -webkit-filter: grayscale(1);
  filter: grayscale(1);
}
.north {
  transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  /* IE 9 */
  -webkit-transform: rotate(0deg);
  /* Safari and Chrome */
}
.west {
  transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  /* IE 9 */
  -webkit-transform: rotate(90deg);
  /* Safari and Chrome */
}
.south {
  transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  /* IE 9 */
  -webkit-transform: rotate(180deg);
  /* Safari and Chrome */
}
.east {
  transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  /* IE 9 */
  -webkit-transform: rotate(270deg);
  /* Safari and Chrome */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<input type="radio" checked="checked" value="original" name="color" />Color
<br />
<input type="radio" value="gray" name="color" />Gray
<br />
<input type="radio" value="sepia" name="color" />Sepia</p>
<div class="imageDiv original">
  <img class="north" alt="" src="https://blog.stackexchange.com/images/wordpress/stackoverflow-logo-alt2-300.png" />
</div>
<br>
<br>
<input type="button" value="Rotate">
<table border="0">
  <tbody>
    <tr>
      <th>Length in cm</th>
      <th>Width in cm</th>
      <th>Total Price in A$</th>
    </tr>
    <tr>
      <td>
        <input id="box1" type="text" />
      </td>
      <td>
        <input id="box2" type="text" />
      </td>
      <td>
        <input id="result" type="text" />
      </td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>
<p>

Answer 1

You added the click event to all the input tags due to which when the radio button is clicked it will rotate the image so I add input[name="color"] so that the click event does start when radio button is clicked and Rotate is worked when button is clicked which name is "rotate"

$('input[name="rotate"]').click(function(){
    var img = $('img');
    if(img.hasClass('north')){
        img.attr('class','west');
    }else if(img.hasClass('west')){
        img.attr('class','south');
    }else if(img.hasClass('south')){
        img.attr('class','east');
    }else if(img.hasClass('east')){
        img.attr('class','north');
    }
});	


 $('input[name="color"]').on('change', function () {
		$('div.imageDiv')
        .removeClass('original sepia gray')
        .addClass($(this).val());
});

Answer 2

The problem is in binding events. You are binding two events:

$('input[name="color"]').on('change', function() {
  //color chnage code
});

$('input').click(function() {
  //Rotation code
});

You are binding "CLICK" event with all inputs and "CHANGE" event with only color check-boxes.

So when you click color check-box then both function will call that's why you are facing issue.

SOLUTION-1: Give an "ID" to the rotate button and then bind "CLICK" event.

$('input[name="color"]').on('change', function() {
  //color chnage code
});

$('#id_of_rotate_button').click(function() {
  //Rotation code
});

SOLUTION-2: Bind "CLICK" event to button

$('input[name="color"]').on('change', function() {
  //color chnage code
});

$('input:button').click(function() {
  //Rotation code
});

Answer 3

Here is the http://jsfiddle.net/kt4c2jca/ it contains the correct code. you need to update the last function to

$('input[!name="color"]').click(function () {
    var img = $('img');
    if (img.hasClass('north')) {
        img.attr('class', 'west');
    } else if (img.hasClass('west')) {
        img.attr('class', 'south');
    } else if (img.hasClass('south')) {
        img.attr('class', 'east');
    } else if (img.hasClass('east')) {
        img.attr('class', 'north');
    }
});

check out the js fiddle to see it working.

you added the click event to all the input tags due to which when the radio button is clicked it will rotate the image so I added input[!name="color"] so that the click event does not start when radio button is clicked

Answer 4

It's not an override — you're binding the 'rotation' handler to $('input'), which is every input in the page, including the 'color' button.

Change it to a more specific selector like you did for the 'color' one and it should work better.