Run a query through javascript with php

How can i do this?
This does not work:

  function HeadingNorth() {
      <?php
        $query = "UPDATE playerships SET HEADING = 'N' WHERE ID='$getshipid'";
        mysqli_query($conn, $query);
      ?>
  }

Code (markup):

I wanted it to make it like this so the page doesnt need a reload but instead would change it on a button click.
The function does not run the code that it should. why?
Is there another way to do this?

 

With that current scheme, $query is executed and will always be... by your PHP server to answer a webpage request (at page loading), while HeadingNorth() is... by your browser's javascript engine when a click happens. Two different timings, two different executors. Right?

If your actual intention is a click to execute HeadingNorth() to execute $query in sequence, then try AJAX: https://developer.mozilla.org/en-US/docs/Web/Guide/AJAX/Getting_Started

 

Thank you for your replies. So i searched on how someone would update something using ajax.
I have the following code but it doesn't work?

<a href="javascript:void(0)" onclick="Add(N)">
      <div class="compass-north"><font size="6">N</font></div>
    </a> 
    <a href="javascript:void(0)" onclick="Add(S)">
      <div class="compass-east"><font size="6">E</font></div>
    </a>  
    <a href="javascript:void(0)" onclick="Add(E)">
      <div class="compass-south"><font size="6">S</font></div>
    </a> 
    <a href="javascript:void(0)" onclick="Add(W)">
      <div class="compass-west"><font size="6">W</font></div>
    </a> 

<script src="jquery.js"></script>
  <script>
    function Add(ch)
    {
        jQuery.ajax({

         type: "POST",

         url: "changeheading.php",

         data: 'ch='+ch,

         cache: false,

         success: function(response)
         {

           alert("Heading Changed");
         }
       });
   }
  </script>  

//changeheading.php
$var = $_GET['ch'] ;
$query = "UPDATE playerships SET HEADING = '$var' WHERE ID='$shipid'";
mysqli_query($conn, $query);

Code (markup):

Can anyone of you spot the error i made?

 

So i have searched on how to update something in a database with ajax.
I have the following code but it doesnt work.

https://pastebin.com/Edu6a6LE
Had to paste it there because forum detected it as spam somehow.

Code (markup):

What am i doing wrong?

 

How can i turn on a log to see if the function is getting called?
Could u show me an example of how you would use such an event listener instead of an onclick?
I have changed GET to POST and im getting some results, but not exactly how it should..
So when i load the page, imagine my ship is heading west. It now automatically changed the ships heading to north... really weird.
Also while it changed the heading automatically, i can not alter it by clicking on the links.
If it would be easier i can send login details and a link so u can see it?

 

Thanks for the example.
Edit: Totally misunderstood u.
I have added ajax, it changes the value on my screen when i click but it doesn't run the file changeheading.php

<script src='https://code.jquery.com/jquery-1.10.2.min.js'></script>
<script>
  // find elements
  var buttons = $(".compass");
  var direction = $('#direction');

  // handle click and add class
  buttons.on("click", function(){
    var cmd = $(this).html();
    direction.html(cmd);
    $(document).ready(function(){
    $.ajax({url:"changeheading.php",data: {"direction":direction}}).done(function(data){console.log(data)});
    });
  })
  </script>

//changeheading.php
<?php
    session_start();
      ob_start();
    require_once '../connect.php';
    $shipid = $_SESSION["SELECTEDSHIP"];
    $var = filter_input(INPUT_GET, 'direction', FILTER_VALIDATE_INT);
    $query = "UPDATE playerships SET HEADING = '$var' WHERE ID='$shipid'";
    mysqli_query($conn, $query);
?>

Code (markup):

Also i have checked the console log and it tells me the following:

Failed to load resource: net::ERR_NAME_NOT_RESOLVED
jquery.js:3818 jQuery.Deferred exception: Illegal invocation TypeError: Illegal invocation
    at add (https://censored.com/jquery.js:8463:5)
    at buildParams (https://censored.com/jquery.js:8450:3)
    at buildParams (https://censored.com/jquery.js:8444:4)
    at buildParams (https://censored.com/jquery.js:8444:4)
    at buildParams (https://censored.com/jquery.js:8444:4)
    at buildParams (https://censored.com/jquery.js:8444:4)
    at buildParams (https://censored.com/jquery.js:8444:4)
    at Function.jQuery.param (https://censored.com/jquery.js:8483:4)
    at Function.ajax (https://censored.com/jquery.js:9073:20)
    at HTMLDocument.<anonymous> (https://censored.com/play.php?grid=E9:336:7) undefined
jQuery.Deferred.exceptionHook @ jquery.js:3818
jquery.js:3827 Uncaught TypeError: Illegal invocation
    at add (jquery.js:8463)
    at buildParams (jquery.js:8450)
    at buildParams (jquery.js:8444)
    at buildParams (jquery.js:8444)
    at buildParams (jquery.js:8444)
    at buildParams (jquery.js:8444)
    at buildParams (jquery.js:8444)
    at Function.jQuery.param (jquery.js:8483)
    at Function.ajax (jquery.js:9073)
    at HTMLDocument.<anonymous> (play.php?grid=E9:336)

Code (markup):

What does it mean?

Also, running changeheading.php works. It does empty the value so i assume the file doesnt even get called.

 

Thank you for your reply. Sadly it didn't do the trick. It doesn't execute changeheading.php
Take a look at this screenshot. Below the compass you see the E? It went from None to E when i clicked east so that part works.
Sadly it doesn't run the php file somehow while the file does work when i run it independently.
I really wonder what the problem is.

Screenshot:

Spoiler

 

Yes it is in the same folder. shipid is stored in a session after character selection.
I copy that one to shipid inside the changeheader.php file. Im confused right now about direction and cmd because they are both in the code.

Okay so i tried this:

<script>
    $(document).ready(function(){
    // find elements
    var buttons = $(".compass");
    var direction = $('#direction');

    // handle click and add class
    buttons.on("click", function(){
       var cmd = $(this).html();
       direction.html(cmd);
       $.ajax({url:"changeheading.php",data: {"cmd":cmd}}).done(function(data){console.log(data)});
       });
    });
    </script>

//changeheading.php
<?php
    session_start();    
      ob_start(); 
    require_once 'connect.php';
    $shipid = $_SESSION["SELECTEDSHIP"];
    $var = filter_input(INPUT_GET, 'cmd', FILTER_VALIDATE_INT);
    $query = "UPDATE playerships SET HEADING = '$var' WHERE ID='$shipid'";
    mysqli_query($conn, $query);
?>

Code (markup):

It works now but it doesn't store a letter but emptys the field. My guess is that i made an error with filter_input.

 

I tried doing var_export but didn't really understand how it works...
I have changed the code a little and i think cmd is empty?
Because the $_POST responds true on a isset() and is still changing the value to nothing.
Basically this:

$var = $_GET['newheading'];

Code (markup):

Is doing this:

$var = "";

Code (markup):

This is the code i have now:

    <div class="compass compass-north">N</div>
    <div class="compass compass-south">S</div>
    <div class="compass compass-east">E</div>
    <div class="compass compass-west">W</div>
    <div id='direction'>
    None
    </div>

    <script>
    // find elements
    var buttons = $(".compass");
    var direction = $('#direction');

    // handle click and add class
    buttons.on("click", function(){
       var cmd = $(this).html();
       direction.html(cmd);
       $.ajax({
            url: 'changeheading.php',
            type: 'GET',
            data : { newheading : cmd },
           
        });
       });
    </script>
//changeheading.php
<?php
    session_start();    
      ob_start(); 
      if(isset($_GET['newheading']))
      {
        require_once 'connect.php';
        $shipid = $_SESSION['SELECTEDSHIP'];
        $var = $_GET['newheading'];
        $query = "UPDATE playerships SET HEADING = '$var' WHERE ID='$shipid'";
        mysqli_query($conn, $query);
    }
?>

Code (markup):

 

I finally got it to work. Had to do it like this:

data : { "cmd" : cmd },

Code (markup):

Thanks for the help it's really appreciated.