CODEWITHSUNDEEP
javascripthtmlcss
user6258774
user6258774

Reputation:

Rotate and unrotate an image onClick with javascript

I have been trying to find how to make an image rotate 90 degrees to the right on the first click, and when clicked again, return to it's original orientation. I was looking at this question made by another person on stack overflow, but this didn't include the image rotating back when it was clicked again.

So far, CSS has shown potential, but I cannot seem to get the image rotated back on the second click.

This is the image if you need a reference: image

Here is my script:

<html>
    <head>
        <style>
            .rotate {
               -ms-transform: rotate(90deg);
                -webkit-transform: rotate(90deg);
                 transform: rotate(90deg);
            }

            .normal {
               -ms-transform: rotate(0deg);
                -webkit-transform: rotate(0deg);
                 transform: rotate(0deg);
            }
        </style>

        <script>
        function Rotate() {
            var rotate = 0
            var rotate = rotate + 1

            if (rotate = 2) {
                document.getElementbyID(image).className = 'normal';
            }
            else if (rotate <= 3) {
                var rotate = 0
                location.reload();
            }
            else {
                document.getElementbyID(image).className = 'rotate';
            }
        }
        </script>


    </head>
    <body>
        <img src="https://i.sstatic.net/IAY0q.png" alt="image" onclick="Rotate()" class="normal" id="image"/>

    </body>
</html>

Upvotes: 0

Views: 7067

Answers (3)

user6258774
user6258774

Reputation:

In addition to the suggestions made by Jose Rojas, I have found a way to reset orientation by modifying some script on a page suggested by this site. You can view it here. I will modify the CSS scripts for every other angle, so the process can last forever.

Upvotes: 0

Diego Fontenelle
Diego Fontenelle

Reputation: 166

Here is a snippet running what you ar trying to achieve: 

function Rotate() {
		var element = document.getElementById('image');

		if (element.className === "normal") {
			element.className = "rotate";
		}
		else if ( element.className === "rotate") {
			element.className = 'normal';
		}
	}
.rotate {
   -ms-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
     transform: rotate(90deg);
}

.normal {
   -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
     transform: rotate(0deg);
}
<html>
<head>
</head>
<body>

<img src="https://i.sstatic.net/IAY0q.png" alt="image" onclick="Rotate()" class="normal" id="image"/>

</body>
</html>

Keep in mind that you had several syntax errors on your code such as: document.getElementById() and using a single = for comparison.

You can check you browser console for checking erros like those.

Upvotes: 1

Jose Rojas
Jose Rojas

Reputation: 3520

You have many errors in your script first: you redeclare rotate in many parts of script, second : within if you must compare with == and not =, this last is to assign a value, third: is getElementById not getElementbyID

Try with this script:

<script>
    var rotate = false;

    function Rotate() {

        if (rotate == true) {
            document.getElementById('image').className = 'normal';
            rotate = false;
        }
        else {
            document.getElementById('image').className = 'rotate';
            rotate = true;
        }
    }
</script>

Upvotes: 0

Related Questions