Javascript set value of input field not lasting

Question

Working on a blackjack game for a class and having some trouble with the display function. It does change the value of the field but then it reverts back after the function is done. How do I make the change last?

<html>

<head>
<script type="text/javascript">
function stack()
{
this.cards = new Array();

this.makeDeck = buildDeck;
this.deal = dealCard;
this.add = addCard;
}

function dealCard()
{
return this.cards.shift();
}

function addCard(card)
{
    this.cards.push(card);
}


function buildDeck()
{
var ranks = new Array("Ace", "2", "3", "4", "5", "6", "7", "8", "9", "10", "Jack", "Queen", "King");
    var suits = new Array("Clubs", "Diamonds", "Hearts", "Spades");

    this.cards = new Array(52);

    for (s = 0; s < suits.length; s++)
    {
      for (r = 0; r < ranks.length; r++)
      {
         this.cards[(s * ranks.length) + r] = new card(ranks[r], suits[s]);
      }
    }
}

function card(r, s)
{
this.rank = r;
this.suit = s;
}

function display()
{

document.getElementById("player_card_1").value = "anything";
alert("here");
}


function newGame()
{
var Player = new stack();
var Dealer = new stack();
var Deck = new stack();
Deck.makeDeck();
Player.add(Deck.deal());

display();
}

</script>
<style type="text/css">
input {
    background:transparent
}
</style>

</head>

<body>
<table bgcolor="#33CC33">
    <tr>
        <td style="font:14pt bold">Your cards</td>
        <td></td>
        <td style="font:14pt bold">Dealer's cards</td>
        <td></td>
    </tr>
    <tr>
        <td><input type="text" readonly="readonly" value="" id="player_card_1"></td>
        <td><input type="text" readonly="readonly" value="" id="p_card_1_val"></td>
        <td><input type="password" readonly="readonly" value="" id="dealer_card_1"></td>
        <td><input type="password" readonly="readonly" value="" id="d_card_1_val"></td>
    </tr>
    <tr>
        <td><input type="text" readonly="readonly" value="" id="player_card_2"></td>
        <td><input type="text" readonly="readonly" value="" id="p_card_2_val"></td>
        <td><input type="text" readonly="readonly" value="" id="dealer_card_2"></td>
        <td><input type="text" readonly="readonly" value="" id="d_card_2_val"></td>
    </tr>
    <tr>
        <td><input type="text" readonly="readonly" value="" id="player_card_3"></td>
        <td><input type="text" readonly="readonly" value="" id="p_card_3_val"></td>
        <td><input type="text" readonly="readonly" value="" id="dealer_card_3"></td>
        <td><input type="text" readonly="readonly" value="" id="d_card_3_val"></td>
    </tr>
    <tr>
        <td><input type="text" readonly="readonly" value="" id="player_card_4"></td>
        <td><input type="text" readonly="readonly" value="" id="p_card_4_val"></td>
        <td><input type="text" readonly="readonly" value="" id="dealer_card_4"></td>
        <td><input type="text" readonly="readonly" value="" id="d_card_4_val"></td>
    </tr>
    <tr>
        <td><input type="text" readonly="readonly" value="" id="player_card_5"></td>
        <td><input type="text" readonly="readonly" value="" id="p_card_5_val"></td>
        <td><input type="text" readonly="readonly" value="" id="dealer_card_5"></td>
        <td><input type="text" readonly="readonly" value="" id="d_card_5_val"></td>
    </tr>
    <tr>
        <td><input type="text" readonly="readonly" value="Total"></td>
        <td><input type="text" readonly="readonly" value=""></td>
        <td><input type="text" readonly="readonly" value="Total"></td>
        <td><input type="text" readonly="readonly" value=""></td>
    </tr>
</table>
<br>
<form name="buttons" action="">
<button name="deal" onclick="newGame()">Deal</button>
<button name="hit">Hit</button>
<button name="stand">Stand</button>
</form>

</body>

</html>

Remove the
tags that surround your buttons. When you click a button, it fires it's onclick function, then it does the form's action. You can see this in the Network tab of chrome's debugger (Ctrl Shift I) - Oh, and I meant to say - the form's action is to reload the page... — enhzflep, Oct 29 '12 at 04:37
As a tip, you can use `[]` instead of the more verbose `new Array` — elclanrs, Oct 29 '12 at 04:42
@enhzflep Thank you! removing the
tags solved the issue. I didn't even think about the form submission part, I had just copied a layout from an earlier assignment and changed part of it. — Kanosthefallen, Oct 29 '12 at 04:50

score 0 · Answer 1 · answered Oct 29 '12 at 05:28

0

Try this code. Replace your form code with

<form name="buttons" action="">
<input type="button" name="deal" onclick="newGame()"/>Deal
<input type="button" name="hit">Hit</button>
<input type="button" name="stand">Stand</button>
</form>

answered Oct 29 '12 at 05:28

polin

2,745
2
15
20

Javascript set value of input field not lasting

1 Answers1