A simple demo to illustrate event handling and using ajax to send info to the db / backend.
As mentioned in the above comment: PHP runs at the server and will have finished performing all of it's tasks before the browser finally loads the page so any PHP function you are hoping to execute in response to a user action needs to be triggered in another thread. This is most commonly achieved using ajax/fetch.
<?php
/* set size of table */
$rows = $columns = 12;
if( $_SERVER['REQUEST_METHOD']=='POST' ){
$_POST['db']='updated';
exit( json_encode( $_POST ) );
}
?>
<!DOCTYPE html>
<html>
<head>
<script>
document.addEventListener('DOMContentLoaded',e=>{
/* a rudimentary ajax function for performing POST requests */
const ajax=function(url,params,callback){
let xhr=new XMLHttpRequest();
xhr.onload=function(){
if( this.status==200 && this.readyState==4 )callback.call( this, this.response )
};
xhr.onerror=function(e){
alert(e)
};
xhr.open( 'POST', url, true );
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xhr.setRequestHeader('X-Requested-With','XMLHttpRequest');
xhr.send( params );
};
/* A very basic callback function */
const ajaxcallback=function(r){
document.querySelector('output').innerText=r
}
/*
scan the DOM to find all table cell elements with assigned class "multiplication"
and assign an event listener to each.
The event listener listens for clicks, captures certain dataset attributes from the
event target ( cell ) and performs the calculation using the numbers found.
The ajax function sends a querystring to the backend PHP script for processing - that
part has not been done here.
The clicked table cell will reflect the answer temporarily before reverting to it's original
value.
*/
Array.prototype.slice.call( document.querySelectorAll('table td.multiplication') ).forEach( cell=>{
cell.addEventListener('click',function(e){
let challenge=this.innerText;
let product=this.dataset.row * this.dataset.column;
ajax.call( this, location.href, 'task=multiplication&challenge='+challenge+'&a='+this.dataset.row+'&b='+this.dataset.column+'&product='+product, ajaxcallback )
console.info( 'Challenge: %s Row: %s Column: %s Answer: %d',challenge, this.dataset.row, this.dataset.column, product );
this.innerText=product;
this.classList.add('product');
setTimeout( function(e){
this.innerText=challenge;
this.classList.remove('product');
}.bind( cell ), 2500 );
})
})
});
</script>
<style>
body, body *{box-sizing:border-box;font-size:0.9rem;font-family:calibri,verdana,arial}
body{padding:0;margin:0;}
table{background:azure;}
table{width:80%;height:80vh;border:1px solid black;float:none;margin:auto;}
td{text-align:center;margin:1px;background:white}
td.multiplication{border:1px dotted gray;cursor:pointer;}
th,td.rowheader{background:gray;color:white;}
.product{background:rgba(0,255,0,0.1)}
output{display:block;float:none;margin:auto;width:80%;padding:0.5rem;text-align:center; color:red }
</style>
</head>
<body>
<form method='post'>
<table>
<tr>
<?php
for( $i=0; $i <= $columns+1; $i++ ){
if( $i > 0 )printf("<th scope='col' data-column=%d>%d</th>", $i-1, $i-1 );
}
?>
</tr>
<?php
for( $i=1; $i <= $rows; $i++ ){
echo "<tr data-row=$i>";
for( $j=0; $j <= $columns; $j++ ){
if( $j > 0 )printf("<td class='multiplication' data-row=%d data-column=%d>%d x %d</td>",$i,$j,$i,$j);
else printf("<td class='rowheader'>$i</td>");
}
echo "</tr>";
}
?>
</table>
<output></output>
</form>
</body>
</html>
