Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Image Browser</title>
</head>
<body onload="showImage(document.getElementById('image1').value)">
    Lien image 1 : <input type="text" id="image1" value="https://www.iutbayonne.univ-pau.fr/sites/all/themes/iutbay/logo-black.png" disabled><br>
    Lien image 2 : <input type="text" id="image2" value="" onkeyup="refreshButtons()"><br>
    Lien image 3 : <input type="text" id="image3" value="" onkeyup="refreshButtons()"><br>
    <input type="hidden" value="1" id="current">
    <input type="button" id="precedent" value="Précédent" onclick="precedent()" disabled>
    <input type="button" id="suivant" value="Suivant" onclick="suivant()" disabled><br><br>
    <span id="zoneImage"></span>
    <script>
        var showImage = function (url) {
            document.getElementById("zoneImage").innerHTML = 'Image numéro ' + document.getElementById('current').value + '<br><img src="' + url + '">';
        }

        var refreshButtons = function () {
            current = document.getElementById('current').value;

            if (document.getElementById('image' + (Number(current) + 1)).value.length > 0 || current == 3) {
                document.getElementById('suivant').disabled = false;
            } else {
                document.getElementById('suivant').disabled = true;
            }

            if (document.getElementById('image' + (Number(current) - 1)).value.length > 0 || current == 1) {
                document.getElementById('precedent').disabled = false;
            } else {
                document.getElementById('precedent').disabled = true;
            }
        }

        var suivant = function () {
            document.getElementById('current').value++;
            showImage(document.getElementById('image' + document.getElementById('current').value).value);
            refreshButtons();
        }

        var precedent = function () {
            document.getElementById('current').value--;
            showImage(document.getElementById('image' + document.getElementById('current').value).value);
            refreshButtons();
        }
    </script>
</body>
</html>