Javascript: dynamic var names with php?

Question

Probably a dead simple and idiotic question (I'm totally new to javascript):

I have this code that loads a new post by clicking on a "next" or "back"-link. The clicks variable is used to scroll up and down in the sql-limit-statement (using the swapContent function), means you move backward or forward in the database by clicking the links. It works easy and perfectly:

<script type="text/javascript">
var clicks = -1;
function increase()
{
    clicks++;
    return false;
}
function decrease()
{
  clicks--;
  return false;
}
</script>
<div id="<?php echo $post['id'].'-multipost'; ?>">
 <?php include('views/posts/_postmultipost.php'); ?>
</div>
<div id="<?php echo $post['id']; ?>-next" class="rightbutton" style="display:block;">
 <a href="#" onmousedown="increase(); javascript:swapContent('next', clicks, '<?php echo $post['id']; ?>', '<?php echo $post['title']; ?>', '<?php echo $_SESSION['user']['id']; ?>');">next</a>
</div>

<div id="<?php echo $post['id']; ?>-back" class="leftbutton" style="display:none;">
 <a href="#" onmousedown="decrease(); javascript:swapContent('back', clicks, '<?php echo $post['id']; ?>', '<?php echo $post['title']; ?>', '<?php echo $_SESSION['user']['id']; ?>');">back</a>
</div>

The only problem: As you see I have several posts (post-IDs). But the javascript var "clicks" is always the same. How can I add the post-id into the javascript variable name "clicks", well, something like this :

var <?php echo $post['id']; ?>-clicks = -1;

Of course it doesn't work this way, but I have no clue how to manage it. Any advice? Sorry for this stupid question...

Thanks for your help!

UPDATE

Ok, got the solution: Bryan was right!!!

Changed the code to:

<script type="text/javascript">
var clicks = {};
clicks['<?php echo $post['id']; ?>'] = -1;
function increase()
{
    clicks['<?php echo $post['id']; ?>']++;
    return false;
}
</script>

The javascript in html stays as it is:

<a href="#" onmousedown="increase(); swapContent('next', clicks, '<?php echo $post['id']; ?>', '<?php echo $post['title']; ?>', '<?php echo $_SESSION['user']['id']; ?>');">></a>

Clicks is now an object and will output the following in the swapContent-Function:

count: Array
(
    [80] => 0
)

In php you would access the value like this:

foreach($count as $key=>$value) { $count = $value }

In javascript it seems to work a bit different like this:

for(x in clicks)
{
   var clicks = clicks[x];
}

Seems to work perfectly now, thanks for your help!!

Answer 1

I'm not incredibly familiar with PHP, so I don't know about php echo. However, would using an object work?

var postClicks = {};

postClicks['<?php echo $post['id']; ?>'] = -1;

Answer 2

As far as I understand you are trying to get this:

var something-clicks = -1;

But in JS something-clicks is an expression - substraction of two variables. Name tokens in JS cannot contain '-' in contrary with CSS.

Answer 3

You have a syntax error:

onmousedown="increase(); javascript:swapContent('next', clicks, '<?php echo $post['id']; ?>', '<?php echo $post['title']; ?>', '<?php echo $_SESSION['user']['id']; ?>');"

that javascript: is the problem. That property is expected to contain raw JS, and that token is invalid. the javascript used as a protocol is for use on the href property of an a tag.

Other than that, it looks alright. Just type clicks in the JS console of your browser to get the current value returned. Or add console.log('clicks:', clicks); to your function so that the result is logged out on each click.