Javascript value undefined when passing from PHP

Question

UPDATE: Thank you everyone who helped out. I hope the myriad of solutions on here can serve as a reference for anyone who is facing similar difficulties.

I am reading from a text file with PHP and I need to pass the string into JS for manipulation. I tried the more direct way of placing the PHP into my external JS file, but that didn't work so I'm resorting to using an empty div container. However, in JS I'm still getting an undefined value. The file reads correctly into the div value, it just won't pass to my external javascript file.

HTML:

<?php
    $world = file_get_contents('http://url.com/testworld.txt');
    //echo $world;
?>

<html>

    <head>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <script type="text/javascript" src="js/game.js"></script>
    </head>

    <body onload="init()">
        <canvas id="game" width="650" height="366" style="border: 2px solid black;"></canvas>
        <br />
        <h1> Currently in development.</h1>
        <br />
        <div id="world" value="<?php echo $world; ?>" />
    </body>

</html>

And the JS:

var world = document.getElementById('world').value;

document.write(world);

If there is a way to make just pulling the variable from the PHP in an external javascript file work, I would prefer to do that.

So I tried using a hidden input and a textarea. I'm still getting the Chrome console error "cannot read property 'value' (or 'innerHTML') of null" on the line where I define the JS variable. This is so bizarre. — Zach Wulf
– Zach Wulf, Commented Oct 24, 2011 at 5:59
Please include the HTML AS SEEN BY THE BROWSER and PLEASE INCLUDE THE RELEVANT JAVASCRIPT :-) The error is caused by someNullExpression.innerHTML which is can not be the result of the code posted above as there is no innerHTML. — user166390
– user166390, Commented Oct 24, 2011 at 6:02
I meant to say, it's giving my 'innerHTML' as null when I tried one of the solutions below that required me to change from 'value' to 'innerHTML'. The code above is LITERALLY everything. — Zach Wulf
– Zach Wulf, Commented Oct 24, 2011 at 6:16
@ZachWulf When you changed to innerHTML did you also change your div tag? — Lucas
– Lucas, Commented Oct 24, 2011 at 9:59
Yes...for all of these solutions, I've changed the appropriate attribute that corresponds to the element. The closest I've got was that HTML5 solution by patbolo, but then on the page it just spits out "undefined". It's almost as if the variable in my JS file has absolutely no idea where my PHP file is and that it has to pull from it. — Zach Wulf
– Zach Wulf, Commented Oct 24, 2011 at 16:50

MrTrick · Accepted Answer · 2011-10-25 13:46:23Z

1

It's quite easy to pass data from PHP -> JS without resorting to hiding it inside the DOM. The trick is the json_encode() function - it will convert php strings, array, etc into a valid javascript format. See your example below, fixed up:

<?php
    $world = file_get_contents('http://url.com/testworld.txt');
?>
<html>
<head>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript" src="js/game.js"></script>
</head>
<body onload="init()">
    <script type="text/javascript">
        //World is defined here, and accessible to the javascript that runs on the page
        var world = <?=json_encode($world)?>;
    </script>
    <canvas id="game" width="650" height="366" style="border: 2px solid black;"></canvas>
    <br />
    <h1> Currently in development.</h1>
    <br />
</body>

I'm pretty sure your troubles are occurring because of the way that scoping of variables works in javascript. This simple example must work for you:

<?php
    $foo = "\"Hello world!\"";
?>
<html>
<head>
</head>
<body>
    <script type="text/javascript">
        var foo = <?=json_encode($foo)?>;
        alert("The value of foo is: " + foo);
    </script>
</body>
</html>

So in the context of the inline script, the foo variable is present. Perhaps if your code were to look like:

<script type="text/javascript">
    //Load the game world, and pass to the javascript lib
    var world = <?=json_encode($world)?>;
    loadWorld(world);
</script>

then you wouldn't have to worry about scoping so much?

edited Oct 25, 2011 at 13:46

answered Oct 24, 2011 at 6:00

MrTrick

1,95712 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Zach Wulf Over a year ago

I'm getting a "world is not defined" in my Javascript file

MrTrick Over a year ago

Try defining var world; in your javascript file, and just using world = ... in the HTML.

Zach Wulf Over a year ago

That's somewhat better, but it just spits out "undefined" onto the page where the contents of the file should go.

MrTrick Over a year ago

I've appended some more - try this simple example, it should at least demonstrate proof that you can pass data from PHP -> JS.

Zach Wulf Over a year ago

Hey, thanks MrTrick, I really appreciate your continued help. The contents of my PHP file are successfully passing to JS when the script is in the same file, but for the purposes of what I'm trying to do, I need it to pass on to my external file. I have never had a problem with things like this before.

|

Wyatt · Accepted Answer · 2011-10-24 05:50:42Z

1

value has a special meaning on DOM Elements (it refers to the value of textboxes, etc.). Instead, you might use an HTML5 Data Attribute such as data-value, and then examine it using document.getElementById('world').getAttribute('data-value');.

However, a better approach would be to use a hidden input, such as

<input type="hidden" id="world" value="<?php echo $world; ?>" />

and then leave your script as is.

answered Oct 24, 2011 at 5:50

Wyatt

1,3669 silver badges14 bronze badges

Comments

jfbarrois · Accepted Answer · 2011-10-24 06:00:41Z

1

Another way : In your php

<div id="world" data-world="<?php echo $world; ?>" />

In your JS:

$('#world').attr('data-world');

Also you may want to make sure the value of $world is properly escaped for being used as an html attribute

answered Oct 24, 2011 at 6:00

jfbarrois

9895 silver badges6 bronze badges

1 Comment

Zach Wulf Over a year ago

It just spits out the word "undefined".

Ankur · Accepted Answer · 2011-10-24 05:48:55Z

0

It doesn't make sense to have a value attribute to a div. Instead of a div use a hidden textarea element and put file content inside that using something like:

<textarea id="fileContent" style="display:none"><?php echo $world; ?></textarea>

and then in JS:

document.getElementById('fileContent').value;

Will return the text area content

answered Oct 24, 2011 at 5:48

Ankur

33.7k2 gold badges50 silver badges73 bronze badges

Comments

Tudor Constantin · Accepted Answer · 2011-10-24 05:49:10Z

0

I am not sure about this, but it might be that the 2 $world variables to be in different scopes. Try with:

<html>

    <head>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <script type="text/javascript" src="js/game.js"></script>
    </head>

    <body onload="init()">
        <canvas id="game" width="650" height="366" style="border: 2px solid black;"></canvas>
        <br />
        <h1> Currently in development.</h1>
        <br />
        <div id="world" value="<?php echo file_get_contents('http://url.com/testworld.txt'); ?>" />
    </body>

</html>

and see if it works

answered Oct 24, 2011 at 5:49

Tudor Constantin

26.9k7 gold badges54 silver badges73 bronze badges

1 Comment

Zach Wulf Over a year ago

Thanks, but it's still saying it can't read the property 'value' of null in my JS file. It's almost as if my external file has absolutely no idea that it's being referenced.

Lucas · Accepted Answer · 2011-10-24 05:49:33Z

0

Try changing:

<div id="world" value="<?php echo $world; ?>" />

to:

<div id="world"><?php echo $world; ?></div>

and change:

getElementById('world').value;

to:

getElementById('world').innerHTML;

If you need to you can add a style of display: none; to the div to hide it.

answered Oct 24, 2011 at 5:49

Lucas

10.7k7 gold badges42 silver badges40 bronze badges

Comments

Rukmi Patel · Accepted Answer · 2011-10-24 06:28:45Z

Rather than specifying value in div tag, you should specify that value in hidden input field.this is a better approach like this

<head>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript" src="js/game.js"></script>
</head>

<body onload="init()">
    <canvas id="game" width="650" height="366" style="border: 2px solid black;"></canvas>
    <br />
    <h1> Currently in development.</h1>
    <br />
    <input type="hidden" name="world" id="world" value="<?php echo $world;?>"/>         
</body>

</html>

you should also specify form tag too. by specifying form tag, you can have more ways to access element using javascript.

if you want to use div then it should be like this ..

<div id="world"><?php echo $world;?></div>

in js you can access $world by this code ..

var world = document.getElementById('world').innerHTML;

Collectives™ on Stack Overflow

Javascript value undefined when passing from PHP

7 Answers 7

8 Comments

Comments

1 Comment

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

8 Comments

Comments

1 Comment

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related