Instantiate a variable out of text field value in JavaScript

StackOverflow https://stackoverflow.com/questions/23258696

  •  08-07-2023
  •  | 
  •  

Question

So I have tried many different suggestions on how to get a value from an input text field and store it in a global variable. I am working on this game and it needs to take the value from the score text field and add up random numbers for a black jack style game. I have everything working except for the score variable. This seems so simple yet I can't figure out why the variable will not store and/or update the value. If some one can help me out that would be awesome.

enter image description here

Here is my code:

<html>
<head>
  <title>Project 3</title>

  <style type="text/css">
    body  { background:BlanchedAlmond; color:DarkOrange; font-family: sans-serif; font-weight:bold }
    input { text-align:center; background:DarkOrange; color:RoyalBlue; font-weight:bold }
    td    { margin:0; padding:10 }
  </style>


  <script language="JavaScript">






 function doFunction(ref)
 {
   score =document.getElementById("1").value;
    if (ref.value== "X")
    {
       randnum=Math.floor( 9*Math.random() ) + 1;
      ref.value=randnum;
     score = score + ref.value;

   }

   if(score > 21)
   {
      window.alert ("You hit " + ref.value + " You have lost");
   }

   if(score == 21)
   {
      window.alert ("Congradulations! You hit 21 and have won the game!");
   }

 }
  </script>
</head>
<body>

<center>
<h3>Uncover 21</h3>
<form name = "myform" >
<TABLE>
<TR>
<TD><input id="button" type="button" value="X" onclick="doFunction(this)" /></TD>
<TD><input id="button" type="button" value="X" onclick="doFunction(this)" /></TD>
<TD><input id="button" type="button" value="X" onclick="doFunction(this)" /></TD>
<TD><input id="button" type="button" value="X" onclick="doFunction(this)" /></TD>
<TD><input id="button" type="button" value="X" onclick="doFunction(this)" /></TD>
<TD><input id="button" type="button" value="X" onclick="doFunction(this)" /></TD>
</TR>
<TR>
<TD><input id="button" type="button" value="X" onclick="doFunction(this)" /></TD>
<TD><input id="button" type="button" value="X" onclick="doFunction(this)" /></TD>
<TD><input id="button" type="button" value="X" onclick="doFunction(this)" /></TD>
<TD><input id="button" type="button" value="X" onclick="doFunction(this)" /></TD>
<TD><input id="button" type="button" value="X" onclick="doFunction(this)" /></TD>
<TD><input id="button" type="button" value="X" onclick="doFunction(this)" /></TD>
</TR>
<TR>
<TD><input id="button" type="button" value="X" onclick="doFunction(this)" /></TD>
<TD><input id="button" type="button" value="X" onclick="doFunction(this)" /></TD>
<TD><input id="button" type="button" value="X" onclick="doFunction(this)" /></TD>
<TD><input id="button" type="button" value="X" onclick="doFunction(this)" /></TD>
<TD><input id="button" type="button" value="X" onclick="doFunction(this)" /></TD>
<TD><input id="button" type="button" value="X" onclick="doFunction(this)" /></TD>

</TR>
<TR>
<TD><input id="button" type="button" value="X" onclick="doFunction(this)" /></TD>
<TD><input id="button" type="button" value="X" onclick="doFunction(this)" /></TD>
<TD><input id="button" type="button" value="X" onclick="doFunction(this)" /></TD>
<TD><input id="button" type="button" value="X" onclick="doFunction(this)" /></TD>
<TD><input id="button" type="button" value="X" onclick="doFunction(this)" /></TD>
<TD><input id="button" type="button" value="X" onclick="doFunction(this)" /></TD>
</TR>
<TR>
<TD><input id="button" type="button" value="X" onclick="doFunction(this)" /></TD>
<TD><input id="button" type="button" value="X" onclick="doFunction(this)" /></TD>
<TD><input id="button" type="button" value="X" onclick="doFunction(this)" /></TD>
<TD><input id="button" type="button" value="X" onclick="doFunction(this)" /></TD>
<TD><input id="button" type="button" value="X" onclick="doFunction(this)" /></TD>
<TD><input id="button" type="button" value="X" onclick="doFunction(this)" /></TD>
</TR>
<TR>
<TD><input id="button" type="button" value="X" onclick="doFunction(this)" /></TD>
<TD><input id="button" type="button" value="X" onclick="doFunction(this)" /></TD>
<TD><input id="button" type="button" value="X" onclick="doFunction(this)" /></TD>
<TD><input id="button" type="button" value="X" onclick="doFunction(this)" /></TD>
<TD><input id="button" type="button" value="X" onclick="doFunction(this)" /></TD>
<TD><input id="button" type="button" value="X" onclick="doFunction(this)" /></TD>
</TR>

</TABLE>
Your Score <input id="1"  type="text" name="Score" value="0" readonly /><br>
<input id="resetbutton" type="reset" value ="Restart Game" onclick="document.location.reload()" />
</form>


</center>
</body>
</html>
Was it helpful?

Solution

you are not updating the score field.try this

function doFunction(ref)
 {
   score =document.getElementById("1").value;

   if (ref.value== "X")
    {
      randnum=Math.floor( 9*Math.random() ) + 1;
      ref.value=randnum;
      score = parseInt(score + ref.value, 10);
      document.getElementById("1").value = score;
   }
}

also you have to change the first alert to

  if(score > 21)
  {
    window.alert ("You hit " + score + " You have lost");
  }

OTHER TIPS

There are two things you need to fix.

1: Your numbers are concatenating, which is making a "string" of numbers. So you need to multiply the numbers by 1.

2: You are not updating the HTML.

You should have:

if (ref.value == "X") {
    randnum = Math.floor( 9*Math.random() ) + 1;
    ref.value=randnum;
    //Multiply by 1 here to force the recognition of arithmetic instead of concatenation
    score = (score * 1) + (ref.value * 1);
    //You are missing the following line
    document.getElementById("1").value = score
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top