html/javascript next and back buttons

i’m trying to code a div with next/back buttons that change the content shown in the div when they’re clicked. i could do this by just having it go to a different page entirely, but that would require me to make a lot of pages and i don’t want to do that. this likely has an extremely easy solution but unfortunately i am not very smart when it comes to javascript . i’ve tried looking online for tutorials but none of them are showing me what i’m trying to achieve.

i have very basic code for this here:

<!DOCTYPE html>
<html>
<body>

<div id="changediv">click the button</div>
<button onclick="myFunction()">the button</button>

<script>
function myFunction() {
  document.getElementById("changediv").innerHTML = "one";
  document.getElementById("changediv").innerHTML = "two";
}
</script>

</body>
</html> 

what’s supposed to happen is when the button is clicked it shows “one”, and then when the button is clicked while it’s showing “one” it goes to “two” and so on so forth. instead it just skips straight to two.