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;
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
JS