My assignment is to create a multiplication table with numbers from 1 to 10 which has all possible combinations of those numbers and when clicked on one of the possibilities it should change cell and output the result. For example, when you click on 2 x 4, cell changes to 8. When clicked it is also supposed to send data to database, including two factors, result and date when cell was clicked.
I have managed to create a table and tried to add onclick event on cells, like shown in the code, but that doesn't work. Is it even possible to do that in php or do I need to include javascript?
<html>
<link href="styles.css" rel="stylesheet" type="text/css">
<head>
</head>
<body>
<?php
function changeCell($row,$col){
echo $row*$col;
}
?>
<table table border =\"1\" style='border-collapse: collapse' class='style'>
<thead>
<tr>
<th></th>
<?php for($j=1;$j<=10;$j++)
{
?>
<th><?php echo $j; ?></th>
<?php
}
?>
</tr>
</thead>
<tbody>
<tr>
<?php
for($i=1;$i<=10;$i++)
{ echo "<tr>
";
?>
<td><?php echo $i;?></td>
<?php
for ($j=1;$j<=10;$j++)
{
?>
<td onclick = 'changeCell($i,$j)'><?php echo $i." x ".$j; ?></td>
<?php
}
?>
<?php
}
?>
</tr>
</tbody>
</table>
</body>
</html>
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>