Javascript/PHP - Making Javascript function use PHP to update database and text in website

Question

I am developing a Javascript game and need to implement PHP for a database. Before the PHP the code worked but since I later wanted to add database to it I began testing different things. My PHP is inside the same page as the HTML but the Javascript is in an external file. I would like to make it so when the Javascript changes the score using its own variables it also activates the PHP to update the database variable. Any help?

function checkAnswer(q, n, button) {
  var CA = QA[q].correctAnswer;
  var BA = button.value;
  disableButtons(n);
  if (BA == CA) {
    correct++;
    correctAnswer();
  } else if (BA != CA) {
    wrongAnswer(QA[q].correctAnswer);
  } else {
    console.log("Error");
  }
  score();
}

function score() {
  var scoreText = document.getElementById("score");
  var score = "<?php scoreChange('" + correct + "'); ?>";
  scoreText.innerHTML = score + "/20";
}

<?php
//Database Connection
require("../connection/connect.php");

//Start Session
session_start();

$logged_in = $_SESSION['logged_in'];
$user = $_SESSION['usr_id'];

$scienceScore = 0;
$scoreReset = 0;

if ($scoreReset == 0) {
$query = $con->query("UPDATE users SET science='0' WHERE username='$user'");
$scoreReset = 1;
}

//Change Score
function changeScore($correct) { 
 $scienceScore = $correct;
 $query = $con->query("UPDATE users SET science='$scienceScore' WHERE username='$user'");
 $_SESSION['science'] = $scienceScore;
 echo $scienceScore;
}
?>

  <!DOCTYPE html>
  <html>

  <head></head>

  <body>
    <div id="game">
      <div id="top">
        <div class="title">
          <div id="left">
            <h2>STEM Science Questions</h2>
            <p>Get the questions right and score points to be on the scoreboard!</p>
          </div>

          <div id="right">
            <h1 id="score">0/20</h1>
          </div>
        </div>
      </div>
    </div>

-The JS is in an external file linked with the tags-

If more code is needed then I will post more!

error reporting and handling on the queries show you what? looks like you've a variable scoping issue here. — Funk Forty Niner, Feb 09 '18 at 14:02
PHP is server side, you can't call a PHP function on JavaScript event without doing an ajax request — vpalade, Feb 09 '18 at 14:04
Side note, your function is named `changeScore()` but you invoke `scoreChange()` — Zach L, Feb 09 '18 at 14:06
The query works. I use it for different things on other pages. I just can't seem to figure out how to make the game work using javascript but also get the new score to update the old one. What it is doing is when the user goes back to the page I want their score to change completely even if they've played the game before. So say they got 20/20 but then they play again and get 19/20 then their new score is 19/20 — Kyle, Feb 09 '18 at 14:06
undefined variable `$con`. variable scope issue. Pass the connection variable as a parameter — Rotimi, Feb 09 '18 at 14:10
Possible duplicate of [What is the difference between client-side and server-side programming?](https://stackoverflow.com/questions/13840429/what-is-the-difference-between-client-side-and-server-side-programming) — Rotimi, Feb 09 '18 at 14:12

score 0 · Accepted Answer · answered Feb 09 '18 at 14:15

You should make request to server using after every score change jQuery or ?Javascript.

Example: In your js file afer increment correct value :

correct++;
$.post('url of your php file',{correct:correct},function(response){
    //Handel response from server
})

In your php file after changeScore() function:

if(isset($_POST['correct'])){
    $correct = (int)$_POST['correct'];
    changeScore($correct);
}

See complete Documentation of jQuery.post

Javascript/PHP - Making Javascript function use PHP to update database and text in website

1 Answers1