make a button change a variable and continue to do so

Question

In a page I am showing img-1. To do this I make $number = 1.

Then, to show img-2, I have to make $number = 2. To do this, I can do it by make a button that do this, $number + 1. But, then how do I use the same button to show $number = 3 later? because that button only perform the same calculation, and $number = 1, the result will only be 2. I need it to be 3, 4, 5 and so on later.

Heres my code, its a jumble of html, php, and javascript all in one place. Im not a pro programmer btw.

<?php 
    $number = $_GET["number"];
?>

<main id="main" class="single-page" role="main">
    <div>
        <div>
            <img src="http://www.test.com/img-<?php echo $number ?>.jpg" id="number">
            <input type="button" value ="proceed" onClick="document.getElementById('number').src='http://www.test.com/img-<?php echo $number + 1; ?>.jpg'">

        </div>
    </div>
</main> <!-- #main -->

alright here is it. Initially I have a query string, $number = 1. So, I have a picture with id img-1. Then, that button will change $number to 2, making the image show img-2. Now, I'm trying to use that same button to show img-3 next. I dont know how to to that.

I want to do it like this, that button will do two things, firstly, change that image source to 2, and at the same time make $number = 2. So that next time I click the button it treats $number as = 2, and now will "+ 1" make it become 3. Then it will also just need a click to show the fourth image.

Is there is a way to change the value of $number after clicking that button? I know that there is many things wrong with that code, but I just need a fix to this one problem, making $number changes after clicking. Thanks

Answer 1

You are always showing the same number while you want to show a "counter". Here's the solution.

echo $number = $number + 1;