PHP: Why is browser output appearing at top of page?

290
January 28, 2017, at 8:57 PM

I'm grabbing a number from a form on an html file, the current goal now is to simply output the range of numbers. But, they're appearing above my h1 header, at the top of the screen vs under the h1 tag. I've come across this before but can't for the life of me remember what the problem is.

<?php
$input = $_GET["number"];
$range = range(0, $input);
$output = pingpong($range);
function pingpong($fx_range)
{
  foreach ($fx_range as $number) {
    echo $number . ", ";
  }
}
?>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Ping Pong</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
  </head>
  <body>
    <div class="container">
      <h1>Ping Pong Results</h1>
      <?= $output . " "; ?>
    </div>
  </body>
</html>

Output looks like this:

0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12,
       Ping Pong Results

Thanks in advance.

Answer 1

You could do this instead:

<?php
$input = $_GET["number"];
$range = range(0, $input);
//$output = pingpong($range);
function pingpong($fx_range)
{
  foreach ($fx_range as $number) {
    echo $number . ", ";
  }
}
?>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Ping Pong</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
  </head>
  <body>
    <div class="container">
      <h1>Ping Pong Results</h1>
      <?php pingpong($range); ?>
  </body>
</html>

EDIT:

Just to show you a way you can return an array from your function and through foreach output the values in HTML:

<?php
$input =$_GET["number"];
$range = range(0, $input);
$output = pingpong($range);
function pingpong($fx_range)
{
  foreach ($fx_range as $number) {
    $result[] = $number;
  }
  return $result;
}
?>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Ping Pong</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
  </head>
  <body>
    <div class="container">
      <h1>Ping Pong Results</h1>
      <?php foreach ($output as $key => $value) {
            echo $value.',';
      } ?>
  </body>
</html>
Answer 2

You run your function pingpong() that print to your screen and var $output = NULL

<?php
$input = $_GET["number"];
$range = range(0, $input);
**$output = pingpong($range); **  (the problem here)
function pingpong($fx_range)
{
  foreach ($fx_range as $number) {
    **echo $number . ", ";**  (the problem here)
  }
}
?>

<!DOCTYPE html>
<html>

You just should put it to variable or to array

I would do it different way:

<?php
$input = $_GET["number"];
$range = range(0, $input);
$output = pingpong($range);
function pingpong($fx_range)
{
  foreach ($fx_range as $number) {
    $var[] = $number;
  }
  return $var;
}
?>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Ping Pong</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
  </head>
  <body>
    <div class="container">
      <h1>Ping Pong Results</h1>
      <?= implode(', ',$output) ?>
  </body>
</html>

with implode you get cleaner result without ", " at the end. and you don't need to run multiple loops if you want to have different sort output you can do it very easy with array sort functions.

Answer 3

try this

<div class="container">
  <h1>Ping Pong Results</h1>
  <?= echo '<p>' . $output . "</p>"; ?>
</div>
Rent Charter Buses Company
READ ALSO
Consistent gradually faded text effect

Consistent gradually faded text effect

Building a blog site, where the blog text will be gradually faded as in the following image:

321
If next element is clicked() - Jquery

If next element is clicked() - Jquery

I have this code that is html for my slider controls:

392
Prevent Lightbox close on child click

Prevent Lightbox close on child click

I have some code where a div opens on element click with another div inside itI want it to close when I click outside of the child div but it is closing when I click on either

393
update specific class through query

update specific class through query

I might be being completely dumb here and for that i apologise but i am a little rusty

269