CODEWITHSUNDEEP
javascripthtml
Stevo
Stevo

Reputation: 85

Rotate a div with a button using javascript

I am trying to rotate a div using an onclick function with js but when I click my button nothing happens. Any suggestions? I want to be able to keep clicking the button for a 90 degree rotation, not just once.

<html>
    <form action="#" method="post">
        <input type="url" name="imglink" id="imglink"  placeholder="Insert image URL here" /><br>
        <input type="button" value="Show Image" id="btn1" />
    </form>
    <div id="photo"></div>
    <script>
        document.getElementById('btn1').addEventListener('click', function(){
        document.getElementById('photo').innerHTML = '<img src="'+ document.getElementById('imglink').value +'" alt="Image" />';
        });
    </script>
    <input type="button" value="Rotate" onclick="rotatePhoto()">
    <script>function rotatePhoto(){
        var img = document.getElementById("photo");
        img.rotate(20*Math.PI/90);
        }
    </script>
</html>

Upvotes: 1

Views: 2868

Answers (3)

Stevo
Stevo

Reputation: 85

I was able to do achieve my goal using the following code below. It's not perfect since I have yet to deal with the overlapping issue, but it does rotate the picture (within the div) which is really all I wanted. Special thanks to user Asgu for helping me solve this issue here http://tinyurl.com/qezs3yk. You CAN rotate a picture using a button with only html and javascript!

<html>
    <form action="#" method="post">
                <input type="url" name="imglink" id="imglink"  placeholder="Insert image URL here" /><br>
                <input type="button" value="Show Image" id="btn1" />
            </form>
        <div id="photo"></div>
        <script>
                document.getElementById('btn1').addEventListener('click', function(){
                document.getElementById('photo').innerHTML = '<img id="photoimg" src="'+ document.getElementById('imglink').value +'" alt="Image" />';
                });
            </script>
            <button id="button">rotate</button>>
            <script>
                document.getElementById("button").onclick = function(){
                    var curr_value = document.getElementById('photoimg').style.transform;
                    var new_value = "rotate(90deg)";
                    if(curr_value !== ""){
                    var new_rotate = parseInt(curr_value.replace("rotate(","").replace(")","")) + 90;
                    new_value = "rotate(" + new_rotate + "deg)";
                    }
                    document.getElementById('photoimg').style.transform = new_value;
                };
            </script>
    </html>

Upvotes: 1

mkaminsky
mkaminsky

Reputation: 353

You can't do this with just javascript, unless you're using a <canvas>. You have to set the CSS properties like this:

-ms-transform: rotate(7deg); /* IE 9 */
-webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */
transform: rotate(7deg);

So maybe something like this:

document.getElementById('photo').style.transform = "rotate(30deg)";

Edit

HTML

<img id="photo" src="img.png">
<button id="button">rotate</button>

JS

document.getElementById("button").onclick = function(){
    var curr_value = document.getElementById('photo').style.transform;
    var new_value = "rotate(30deg)";
    if(curr_value !== ""){
        var new_rotate = parseInt(curr_value.replace("rotate(","").replace(")","")) + 30;
        new_value = "rotate(" + new_rotate + "deg)";

    }
    document.getElementById('photo').style.transform = new_value;
};

Upvotes: 0

Zivko
Zivko

Reputation: 377

You must have canvs with img inside and then apply rotation to canvas or you can do it with CSS transform: rotate(?deg)

Upvotes: 0

Related Questions