Clever Geek Handbook

I need to rotate these images and I cannot get the button to work

This html and its javascript should respond to button clicks by rotating four images. There are many errors in the code that I cannot find / fix 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 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;
+3


source to share


1 answer


There are many typo and syntax errors in your code. By correcting them, I was able to achieve rotation. Here is a demo

Copy and paste below HTML and JS and tell me if you still get 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 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;
0


source






More articles:


All Articles