With buttons, programs change webpages based on user behavior. For example, clicking Next can run code that cycles through characters.
We'll learn how to write that code later. For now, we'll focus on the button element.
<html>
<head>
<style>
button { touch-action: manipulation; }
</style>
</head>
<body style="text-align:center;">
<h3>Choose Your Character</h3> <img height=180 id="character" src="https://mimo.app/r/hacker.gif"> <br> <button onclick="previous()">Previous</button> <button onclick="next()">Next</button>
<script>
var currentIndex = 0;
const images = [ 'https://mimo.app/r/hacker.gif', 'https://mimo.app/r/wizard.gif', 'https://mimo.app/r/ducky.gif', 'https://mimo.app/r/pirate.gif','https://mimo.app/r/helene.gif'];
function next() { if (currentIndex >= images.length - 1) { currentIndex = 0; } else { currentIndex += 1; } document.getElementById("character").setAttribute("src", images[currentIndex]); } function previous() { if (currentIndex <= 0) { currentIndex = images.length - 1; } else { currentIndex -= 1; } document.getElementById("character").setAttribute("src", images[currentIndex]); }
</script>
</body>
</html> ]]>