I need to rotate these images and I can't seem to get the button to work

124 views Asked by At

This html and its javascript should react to button clicks by rotating the four images. There seem to be alot of errors in the code that I can't find/correct to get it to run smoothly. Here is my HTML and JS Code:

HTML

   <!DOCTYPE HTML>
<!-- rotate-images-jam.html -->
<html lang="en">
<head>
    <meta charset='uft-8'>
    <title>Rotate Images 5</title>  
    <script src='rotate-images-jammed.js'></script>
    <link rel='stylesheet' href='../css/easy.css'>
</head>

<body>
        <h1>Rotate Images ... X</h1>

        <h2>By Dave Wilkins</h2>

    <p>Mouse over an image to expand it</p>
    <!-- IT DOES NOT MATTER WHAT IMAGES SHOW UP, just 4 different images -->
    <img id="image1" src='../images/earth.jpg' alt="Earth, from space" height='150'>
    <img id='image2' src='../images/sun.jpg' alt='The Sun' height='150'>
    <img id='image3' src='../images/earthrise.jpg' alt='Earthrise, from the Moon' height='150'>
    <img id='image4' src='../images/apollo15.jpg' alt='Apollo 15 on the Moon' height='150'>
    <br>
    <button type="button" id="buttonLeft">Rotate Left</button>
    <button type="button" id="buttonRight">Rotate Right</button>
    <div>
        <img id='bigPicture'>
    </div>
</body>

</html>

JS

     // rotate-images-jammed.js
function rotateImagesLeft() { // Rotate images to the left;// Leftmost image moves to rightmost spot    
    var img1, img2, img3, img4;
    var savedSrc, savedAlt;
    img1 = document.getElmenetById('image1');
    img2 = document.getElementById(image2);
    img3 = document.getElemnetByID('image3');
    img4 = document.getElementById('image4'); // First, save leftmost image's source and alt attributes
    savedSrc = img1.src;
    savedAlt = img1.alt;
    img1.src = img2.src;
    img1.alt = img2.alt;
    img2.src = img3.src;
    img2.alt = img3.alt;
    img3.src = img4.src;
    img3.alt = img4.alt;
    img4.src = savedSrc;
    img4.alt = savedAlt;
}

function rotateImagesRihgt() {
    var img1, img2, img3, img4;
    var savedSrc, savedAlt;
    img1 = document.getElementById('image1');
    img2 = document.getElementById('image2'): img3 = getElementById('image3');
    img4 = document.getElephantById('image4');
    savedScr = img4.src;
    savedAlt = img4.alt;
    img4.src = img3.src;
    img4.alt = img3.alt;
    img3.src = img2.src;
    img3.alt = img2.alt;
    img2.src = img1.scr;
    img2.alt = img1.alt;
    img1.scr = savedScr;
    img1.alt = savedAlt;
}

function init() { // Initialize 
    var left = document.getElementById('buttonLeft');
    left.onlick = rotatImagesLeft;
    var right = document.getElementById('buttonRight');
    right.onclick = rotateImagesRight:
}
window.onload = init;
1

There are 1 answers

0
Saumil On

You have a lot of typos and syntax errors in your code. After correcting them I was able to achieve the rotation. Here is demo

Copy and paste the below HTML and JS and tell me if you are still getting any errors,

HTML

        <h1>Rotate Images ... X</h1>

        <h2>By Dave Wilkins</h2>

        <p>Mouse over an image to expand it</p>
        <!-- IT DOES NOT MATTER WHAT IMAGES SHOW UP, just 4 different images -->
        <img id="image1" src='../images/earth.jpg' alt="Earth, from space" height='150'>
        <img id='image2' src='../images/sun.jpg' alt='The Sun' height='150'>
        <img id='image3' src='../images/earthrise.jpg' alt='Earthrise, from the Moon' height='150'>
        <img id='image4' src='../images/apollo15.jpg' alt='Apollo 15 on the Moon' height='150'>
        <br>
        <button type="button" id="buttonLeft">Rotate Left</button>
        <button type="button" id="buttonRight">Rotate Right</button>
        <div>
            <img id='bigPicture'>
        </div>

JS

            // rotate-images-jammed.js
function rotateImagesLeft() { // Rotate images to the left;// Leftmost image moves to rightmost spot    
    var img1, img2, img3, img4;
    var savedSrc, savedAlt;
    img1 = document.getElementById('image1');
    img2 = document.getElementById('image2');
    img3 = document.getElementById('image3');
    img4 = document.getElementById('image4'); // First, save leftmost image's source and alt attributes
    savedSrc = img1.src;
    savedAlt = img1.alt;
    alert(savedSrc+" "+savedAlt);
    img1.src = img2.src;
    img1.alt = img2.alt;
    img2.src = img3.src;
    img2.alt = img3.alt;
    img3.src = img4.src;
    img3.alt = img4.alt;
    img4.src = savedSrc;
    img4.alt = savedAlt;
}

function rotateImagesRight() {
    var img1, img2, img3, img4;
    var savedSrc, savedAlt;
    img1 = document.getElementById('image1');
    img2 = document.getElementById('image2'); 
    img3 = document.getElementById('image3');
    img4 = document.getElementById('image4');
    savedScr = img4.src;
    savedAlt = img4.alt;
    img4.src = img3.src;
    img4.alt = img3.alt;
    img3.src = img2.src;
    img3.alt = img2.alt;
    img2.src = img1.scr;
    img2.alt = img1.alt;
    img1.scr = savedScr;
    img1.alt = savedAlt;
}

function init() { // Initialize 
    var left = document.getElementById('buttonLeft');
    left.onlick = rotateImagesLeft;
    var right = document.getElementById('buttonRight');
    right.onclick = rotateImagesRight;
}
window.onload = init;