Javascript problem, can't get code to work on a website (beginner)

Hi all,

I am completely new to Javascript and actually about to start a class soon to learn it, but I have a problem that I desperately need a quick help for.

I have a piece of code that someone created for me. It's supposed to be used on Wordpress and the idea is that the user clicks on a link "Pick a Card" and gets a random card (out of 57) chosen for him with an explanation.

So the card will be in one div(id=card) and the explanation(id=description) is in one div. The cards are called card_1.png, card_2.png etc. And the descriptions card_1.txt, card_2.txt etc.

And the codes are below:

cards.php:


<?
session_start();
$card = 0;

if(isset($_SESSION['pick_card'])) {
$card = $_SESSION['pick_card'];
$_SESSION['tarot_card'] = $card;
} else {
$card = rand(1,57);
}

$description = file_get_contents('cards/card_'.$card.'.txt');

$r = new StdClass;
$r->card = $card;
$r->description = $description;

echo json_encode($r);
?>


And the javascript part:

<script>
$ = jQuery;
var fetchCard = function() {
$.ajax({
url: '/card.php',
dataType: 'json',
success: function(data) {
$('#card').html('<img src="/cards/card_'+data.card+'.jpg" />');
$('#card-description').html(data.description);
}
});
}
</script>

So I have created a card.php with the code above and uploaded it to the server. The javascript is inside the head tags.


Now here's my problem: How do I get the code to work? What should I do to make the code to work when the person clicks on the "Pick a card" link?

If someone could help me with this, I would really appreciate it.

Thanks!

I'm not sure if I was being clear what I wanted to ask, so let me clarify a little. So basically, how do I call this function on the page?

I know this is probably very dumb question, but as I said, I am a beginner.

You should learn JavaScript before you try to use jQuery. Trying to write jQuery without knowing JavaScript just creates a mess.

I know that, that is why I am asking for help. I didn't create any of the code myself, but only followed the advice of the person who created it. Now, unfortunately he is unavailable to help at this moment with this question, so maybe you could help me with this?

I have the page ready and everything, but would simply need the information how to call the function.

So I would really appreciate helpful comments!

BTW: this LIUXIN123 is a spammer, he's adding some ****ty website links to his posts..

You know, there is ZERO need for PHP to solve this.

If you want a solution that doesn't really use AJAX, I can give it to you.

You know, there is ZERO need for PHP to solve this.

If you want a solution that doesn't really use AJAX, I can give it to you.

Excellent! I really haven't set my heart on Ajax, I was simply trusting my friend's judgement.

So yes please, I would really appreciate another solution.

*** UNTESTED ***

<script type="text/javascript">
function fetchCard( )
{
var cardnum = Math.floor( Math.random() * 57 ) + 1;
var file = "/cards/card_" + card;
var image = document.getElementById("cardImage");
image.src = file + ".jpg";
var reader = (window.XMLHttpRequest != null )
? new XMLHttpRequest : new ActiveXObject("Microsoft.XMLHTTP");
reader.open( "GET", file + ".txt", false );
reader.send();
document.getElementById("card-description").innerHTML = reader.responseText;
image.style.display = "inline";
}
</script>

And then in your existing <div id="card">, add this:

<div id="card"><img id="cardImage" style="display: none;"/></div>

Thank you very much Old Pedant!

I will test this once I get to the computer.