I am trying to echo php values in js. The idea is to display limited values based on screen size. Here's the code;
<?php
foreach( $data as $row ){
$path1 ="
<tr>
<td><strong>Name</strong></td>
<td><strong>Price (USD)</strong></td>
<td>{$row['name']}</td>
<td>{$row['price']}</td>
</tr>
";
$path2 ="
<tr>
<td><strong>Rank</strong></td>
<td><strong>Name</strong></td>
<td><strong>Price (USD)</strong></td>
<td>{$row['rank']}</td>
<td>{$row['name']}</td>
<td>{$row['price']}</td>
</tr>
";
}?>
<script>
window.onload = function() {
if (screen.width < 960)
document.getElementById("phone").innerHTML = "<?php echo $path1; ?>";
else
document.getElementById("phone").innerHTML = "<?php echo $path2; ?>";
}
</script>
<body>
<div>
<span id ="phone"></span>
</div>
</body>
On running this there is no response (blank) in the window. Why I want to echo the values is because $path1 and $path2 will have values derived from an api, which will generate multiple rows and columns in a table. I am trying to present limited columns of this data when the screen size is small (mobile).
Any help is appreciated.
Rgds.
