I get random data from MYSQL database:

<?php 
include 'blocks/db.php'; 
$sql = "SELECT * FROM quiz WHERE photo_path <> ''  ORDER BY RAND() LIMIT 1";
$result = mysql_query($sql,$db);
$myrow = mysql_fetch_assoc($result);
?>

Then I have simple button with content text from database and another button to change text of button with id= “option1”:

<button class="option-div" id = "option1" ><?php echo $myrow["option1"]; ?></button>
<button id="Change-text-button" onclick="nextQuestion();">Change text</button>

As a result I want to change Button`s (id= “option1”) text with Javascript function nextQuestion() by AJAX (without JQuery) using standart code:

<script>
function  nextQuestion(){
    var xhr = new XMLHttpRequest();    

    xhr.onreadystatechange = function() {
      if (xhr.readyState === 4 && xhr.status === 200) {
        document.getElementById("option1").innerText   =  "<?php echo $myrow['option1'];  ?>";
          }
        }
     
    xhr.open('GET', 'https://sameword.ru/game.php');     
    xhr.send();
}
</script>

All code ubove is in php file that I include in other simple page.
All works by simple page reload.

Unfortunately I get update with old data using AJAX. At the same time I see that browser gets new data and all html data in response from server is correct.

Thus I send request to server (I reload all page in my case), get “200” response but can’t put new data in button’s text.

Live example at https://sameword.ru/game.php.