How do I pass this string var in php to a JS function?

Question

I look up the image associated with a pokemon and display it with php. Then I want to be able to "flip the card over," by clicking on it. I've got the first click down, but the second click to flip the card back over isn't working. I figure it's the syntax of my php variable within the JS:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">

<title>
'Murica!
</title>

<script>

function changeImage()
{

element=document.getElementById('pokemon_card')

if 
(element.src.match("http://dmisasi.files.wordpress.com/2010/12/david-pokemon-card-     back.jpg?w=750"))
{element.src="'.$result['image_url'].'";} //<- no idea how to express the php string variable here

else
{element.src="http://dmisasi.files.wordpress.com/2010/12/david-pokemon-card-back.jpg?     w=750";}

}

</script>

</head>

<body>

<?php

$dbhost = 'databasePlace';
    $dbname = 'mine';
    $dbuser = 'me';
    $dbpass = '******';

    $link = mysqli_connect($dbhost,$dbuser,$dbpass,$dbname);

    mysqli_select_db($link,$dbname);    


$name = $_GET["fname"];



                $query = sprintf("SELECT image_url, Type
                                  FROM Pokemon c
                                  WHERE c.name='%s'",
                mysqli_real_escape_string($link,$name));

    $result = mysqli_fetch_assoc(mysqli_query($link,$query));

    echo '<img id="pokemon_card" onclick="changeImage()" height="225" 
width="165" src="'.$result['image_url'].'"/>';

mysqli_close($link);

?>

</body>
</html>

<?php echo $result['image_url']; ?>

user1726343
– user1726343

2012-11-20 07:18:46 +00:00
Commented Nov 20, 2012 at 7:18 — user1726343
– user1726343, Commented Nov 20, 2012 at 7:18

tomb · Accepted Answer · 2012-11-20 07:27:44Z

7

The easiest way would be to put a little PHP script inside the Javascript, like this...

<script type="text/javascript">
function bla() {
    var thevar = "<?php echo $thevar; ?>";
}
</script>

In other words, according to your question, you would replace the line {element.src="'.$result['image_url'].'";} with the line {element.src="<?php echo $result['image_url']; ?>";}

edited Nov 20, 2012 at 7:27

answered Nov 20, 2012 at 7:18

tomb

1,8574 gold badges21 silver badges40 bronze badges

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

2 Comments

user1726343 Over a year ago

That is far from the best way (IMO), but +1 for a correct answer.

jaco Over a year ago

This would be a good answer if code was right! You should put echo inside a string, if the var isn't a number, app crashes!

Divyesh · Accepted Answer · 2012-11-20 07:20:33Z

1

You have to use

 json_encode

 <?php
  $arr = array ('a'=>1,'b'=>2,'c'=>3,'d'=>4,'e'=>5);
  echo $t=json_encode($arr); // {"a":1,"b":2,"c":3,"d":4,"e":5}

 ?>

Now $t you can pass in js function

In js code:

<script type="text/javascript">
function you_fun_nm() {
    var val = <?php echo $t; ?>
     alert(val);
}

answered Nov 20, 2012 at 7:20

Divyesh

5274 silver badges18 bronze badges

Comments

Hemantwagh07 · Accepted Answer · 2012-11-20 07:21:00Z

1

Try by writing php varible in javascript is as follows

{element.src="'<?php echo $result['image_url']; ?>'";}

answered Nov 20, 2012 at 7:21

Hemantwagh07

1,5761 gold badge16 silver badges27 bronze badges

Comments

jaco · Accepted Answer · 2012-11-20 07:25:42Z

1

Replace your line with this one:

element.src = "<?= $result['image_url'] ?>";

Or you can set a javascript var and call it:

var imageUrl = "<?= $result['image_url'] ?>";

// ...

element.src = imageUrl;

edited Nov 20, 2012 at 7:25

answered Nov 20, 2012 at 7:19

jaco

3,5265 gold badges28 silver badges43 bronze badges

Comments

Tahir Yasin · Accepted Answer · 2012-11-20 07:39:13Z

You have to modify your Javascript function, below is modified version

function changeImage(image_from_db)
{
    element=document.getElementById('pokemon_card')

    if 
    (element.src == "http://dmisasi.files.wordpress.com/2010/12/david-pokemon-card-back.jpg?w=750")
    {
        element.src = image_from_db;} //<- image_from_db is being passed by you PHP script
    else
    {
        element.src="http://dmisasi.files.wordpress.com/2010/12/david-pokemon-card-back.jpg?w=750";
    }
}

Then call above function on your image tag like this

Collectives™ on Stack Overflow

How do I pass this string var in php to a JS function?

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Related