Hi am trying to create a card game. I have to show the cards using text, but i cant find the code to update text when the player change the cards. I used to try using "document.write" but as i learnt its not updateable. Any help?

<!DOCTYPE html>
<html>
<head>
<link rel="icon" type="image/png" href="c://Users/user/Desktop/JavaScript/favicon.png"/>
<title>
MemoryX
</title>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script>
<script src="jquery.ui.touch-punch.min.js"></script>
</script>
<script> 
var arr1=[1,2,3,4,5,6,7,8,9,0,25,1,2,3,4,5,6,7,8,9,0,25,1,2,3,4,5,6,7,8,9,0,25,1,2,3,4,5,6,7,8,9,0,25,1,2,3,4,5,6,7,8,9,0];
var deck=[1,2,3,4,5,6,7,8,9,0,25,1,2,3,4,5,6,7,8,9,0,25,1,2,3,4,5,6,7,8,9,0,25,1,2,3,4,5,6,7,8,9,0,25,1,2,3,4,5,6,7,8,9,0];
  var me=[1,1,1,1];
  var pc=[1,1,1,1];
 var xame=new Array();
  var images=new Array("ace.jpg","joker.png","papas.jpg","queenpikk.jpg");
 // var me=new Array();
  //var pc=new Array();
  for (var i=0;i<4;i++)
{
//finds the cards of the real player
var randomnum=Math.floor(Math.random()*53);
me[i]=arr1[randomnum];
}
for (var i=0;i<4;i++)
{
//finds the cards of the pc player
 var randomnum=Math.floor(Math.random()*53);
pc[i]=arr1[randomnum];
}

 $(document).ready(function(){

 //Make element droppable

         $("#trapula").draggable({
      //cancel: "a.ui-icon", // clicking an icon won't initiate dragging
      revert: "invalid", // when not dropped, the item will revert back to its initial position
      //containment: "document",
      helper: "clone",
      //cursor: "move"

    }); 

$("#start").click(function () {
    $("#1").fadeOut();
    $("#2").fadeIn(); 

//checks the #no to bring the aces
if(me[0]==1){       
 document.getElementById("first").src = "ace.jpg";
    }   

if(me[3]==1){       
 document.getElementById("fourth").src = "ace.jpg";
    }

 //checks the #no to bring the 2's
if(me[0]==2){       
 document.getElementById("first").src = "two.png";
    }   

if(me[3]==2){       
 document.getElementById("fourth").src = "two.png";

    }
if(me[0]==3){       
 document.getElementById("first").src = "three.jpg";

    }   
if(me[3]==3){       
 document.getElementById("fourth").src = "three.jpg";
    }
if(me[0]==4){       
 document.getElementById("first").src = "card_41.png";
    }   
if(me[3]==4){       
 document.getElementById("fourth").src = "card_41.png";
    }   

    if(me[0]==5){       
 document.getElementById("first").src = "card_42.png";
    }   

if(me[3]==5){       
 document.getElementById("fourth").src = "card_42.png";
    }

    //checks the #no to bring the 6's
    if(me[0]==6){       
 document.getElementById("first").src = "six.gif";

    }   
if(me[3]==6){       
 document.getElementById("fourth").src = "six.gif";

    }
        //checks the #no to bring the 7's
if(me[0]==7){       
 document.getElementById("first").src = "seven.jpg";

    }   
if(me[3]==7){       
 document.getElementById("fourth").src = "seven.jpg";

    }
            //checks the #no to bring the 8's
if(me[0]==8){       
 document.getElementById("first").src = "eight.jpg";

    }   
if(me[3]==8){       
 document.getElementById("fourth").src = "eight.jpg";
    }
    if(me[0]==9){       
 document.getElementById("first").src = "card_46.png";

    }   
if(me[3]==9){       
 document.getElementById("fourth").src = "card_46.png";
    }
                //checks the #no to bring the 10's
if(me[0]==0){       
 document.getElementById("first").src = "ten.jpg";

    }   
if(me[3]==0){       
 document.getElementById("fourth").src = "ten.jpg";

    }
//checks the #no to bring the jokers
if(me[0]==25){      
    document.getElementById("first").src = "joker.png";
}
if(me[3]==25){      
    document.getElementById("fourth").src = "joker.png";
}


//hide visible cards after 4seconds
$("#2").show().delay('4000').hide('fast');
$("#1").show().delay('4000').fadeIn();

//show a set of cards for both players to pull
$("#3").fadeIn();

});  

  // while deck is pressed once, the players take both a card 
 // and can replace it with one of their cards optionally 
     $("#trapula").bind("drag", function(){

        for(var i=0;i<53;i++)
//make a deck for players to replace the cards with theirs
{
var randomn=Math.floor(Math.random()*53);
xame[i]=deck[randomn];
}
    //loop to show each time different card from deck
    for(var i=0;i<53;i++)
    {

    //shows the cards of deck
    if(xame[i]==0){     
 document.getElementById("trapula").src = "ten.jpg";
    }      
if(xame[i]==1){     
 document.getElementById("trapula").src = "ace.jpg";
    }

if(xame[i]==2){     
 document.getElementById("trapula").src = "two.png";
    }   
if(xame[i]==3){     
 document.getElementById("trapula").src = "card_14.png";
    }
if(xame[i]==4){     
 document.getElementById("trapula").src = "card_41.png";
    }   
if(xame[i]==5){     
 document.getElementById("trapula").src = "card_42.png";
    }   
    if(xame[i]==6){     
 document.getElementById("trapula").src = "card_43.png";

    }   
if(xame[i]==7){     
 document.getElementById("trapula").src = "card_44.png";
    }   
    if(xame[i]==8){     
 document.getElementById("trapula").src = "eight.jpg";
    }
    if(xame[i]==9){     
 document.getElementById("trapula").src = "card_46.png";
    }
//checks the #no to bring the jokers
if(xame[i]==25){    
    document.getElementById("trapula").src = "joker.png";
}   
//when the player choose the card position #1 from the deck
// it transfer it to the player
//it doesnt work

$( "#hidden1" ).droppable({
         drop: function() 
         {

         alert('The first card changed');



         }
        });
$( "#hidden2" ).droppable({
         drop: function() 
         {

         alert('The 2nd card changed');
         }
        }); 
$( "#hidden3" ).droppable({
         drop: function() 
         {

         alert('The 3rd card changed');
         }
        }); 
$( "#hidden4").droppable({
         drop: function() 
         {

            alert('The 4th card changed');
         }
        });

}

}); 

$("#stop").click(function () {
     $("#2").fadeOut();
     $("#1").fadeIn();
  });   

//show the cards
//$("#deckCard").click(function (){
    // for(var i;i<4;i++){
//document.write('My card is:'+me[i]);
//}

});     
           for (var i=0;i<4;i++)
{

//show the cards
document.write(" My card is: "+me[i]);
document.write("<br/>");
document.write(" Your card is: "+pc[i]);
document.write("<br/>");
}

</script>

</head>
<body>

<button id="start"> Start</button>
<button id="stop"> Stop</button>
<button id="deckCard">New Card</button>

<p id="1" >
  <img src="cardb.png" id="hidden1" width="100px" height="100px" />
 <img src="cardb.png" id="hidden2" width="100px" height="100px" />
 <img src="cardb.png" id="hidden3" width="100px" height="100px" />
 <img src="cardb.png" id="hidden4" width="100px" height="100px" />

</p>

<div id="2" style="display: none;"> 

 <img src="papas.jpg" id="first" width="100px" height="100px" />
 <img src="cardb.png" id="second" width="100px" height="100px" />
 <img src="cardb.png" id="third" width="100px" height="100px" />
 <img src="papas.jpg" id="fourth" width="100px" height="100px" />
 <img src="joker.png" id="hidden" width="100px" height="100px" style="display:none">

</div>

<div id="3" style="display: none;">
<img src="cardb.png" id="trapula" width="100px" height="100px"/>

</div>
</body>
</html>

I used to try using "document.write" but as i learnt its not updateable

Have a look at jQuery's text method.

Nothing with .text(), basically i need the way to show the elements of an updateable array.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.