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>

POPULAR ONLINE

If next element is clicked() - Jquery

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

392

CSS

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

CSS

update specific class through query

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

269

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

Mouse over linked thumbnails to display bigger linked version

amcharts Export with Meteor + React (JSX)

Library not loaded: @rpath/libopenblasp-r0.2.19.dylib

Need help linking image with File Pathways

Why cant I access my function inside html element [duplicate]

Consistent gradually faded text effect

If next element is clicked() - Jquery

Prevent Lightbox close on child click

update specific class through query