Json Response needs to update Javascript value and replace global initial global value – work around solution needed

I'm trying to wrap my head around the fetch api and get. From what i've been studying it looks like its suppose to be easy but my mind isn't getting it fully. In my game javascript, it starts with a money=2000 global variable. The game plays fine, but when someone leaves and goes to their profile page and comes back to the game, the game resets and starts the play from the beginning and resets the money back to 2000.

What I want is to fetch, and trigger php, to get column PHPMyadmin database saved money value; and have it override the global money value in javascript once it reaches client side. What i think I understand is that when I fetch, the results will not be global to javascript, so I think is that I need to have the results change the document.getElementById("money")

Currently the game uses HTML with javascript as the default page, and then triggers the php file to prepare select fetchColumn()

startgame.html

<!DOCTYPE html>
<html>
    <head> 
<TITLE>Interactive Game</TITLE>
        <meta charset="UTF-8">
    </head>

    <body background="images/pvpcoinnew.png" style="width=120%" onLoad="updateMoney(); popup('popUpDiv'); click(); updown()" oncontextmenu="return false;">
<img background="images/pvpcoinnew.png">

<select id="textbox">
  <option value="1">1</option>
  <option value="5">5</option>
  <option value="10">10</option>
  <option value="25" selected>25</option>
  <option value="50">50</option>
  <option value="75">75</option>
  <option value="100">100</option>
  <option value="200">200</option>
  <option value="250">250</option>
  <option value="500">500</option>
  <option value="1000">1000</option>
</select> 
    <button type="click" id="button" onclick="enterWager(); return false;">Wager!</button>

    <p>Money: $<span id="money"></span><br></p>


        <script type="text/javascript" src="game.js"></script>

    </body>
</html>

The game.js file below has money preset at the very beginning to 2000. game.js

money = 2000;
          
fetch('../php/moneyupdate/moneyupdate.php?money=value')
  .then((response) => {
    return response.json()
  })
  .then((money) => {
    // Work with JSON data here
    window.money = money
    console.log(money)
  })
  .catch((err) => {
    // Do something for an error here
  })
  
  
document.getElementById("money").innerHTML = window.money;

When the php file is triggered from the fetch the status is 200. XHR Response Payload comes back empty

1. 2.

Here is the moneyupdate.php file

<?php 
session_start();
if(empty($_SESSION['userid']))
{
    header("Location: ../login/index.php");
}
include('../../login/database.php');


if(isset($_GET["money"])) {
  $money = htmlspecialchars($_GET["money"]);
  $userid = $_SESSION['userid'];

try {
$db = DB();
$stmt = $db->prepare("SELECT money FROM usersystem WHERE userid=?");
$stmt->execute([$userid]);
$money = $stmt->fetchColumn();


// send a JSON encded money array to client
header('Content-type: application/json;charset=utf-8');
echo json_encode($money);
//}


}
catch(PDOException $e)
{
    $db = null;  
    echo $e->getMessage();  
}
}
// Notes: The json_encode function returns the JSON representation of the given value. 
//        The json_decode takes a JSON encoded string and converts it into a PHP variable.
?>

In the PHP file I am confused about the conversion of $money = htmlspecialchars($_GET["money"]); and why it might be needed if I am doing a prepare select fetchColumn. To me it seems meaningless. DO I need to have it, if so can I get a clear answer why.

The second thing I need help understanding is passing the column database value to json_encode($money). Instead of passing it to var money, is it possible to pass it to getElementById("money"). I think If I somehow did that, it would not be a global but the game money would be correct and most likely work for this setup. Im sure I will eventually have to just put everything into a php file, but i think this right now will help me understand things before I go to the next step of full conversion.

Am I on the right track? Thanks for the help and responding!



Read more here: https://stackoverflow.com/questions/64950378/json-response-needs-to-update-javascript-value-and-replace-global-initial-global

Content Attribution

This content was originally published by Ed Nolan at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: