Question

我正在尝试使用Javascript编写Blackjack代码，并在HTML页面中显示结果。我已经编写了逻辑，但我无法使用getElementById.innerHTML在ID

段中显示结果。我不知道如何做对。你能帮帮我吗？我的时间不多了:(。这是代码：

<!DOCTYPE html>
<html>
<title>Welcome to Blackjack</title>
<!--<link href="style.css" rel="stylesheet" type="text/css">

<!-- <script src="bj.js"></script> -->
<head>
<script>
var PlayerScore = 0;
var DealerScore = 0;
var Winner = "Nobody";
var AskAgain = true;

function random(maxValue)
{
 return Math.floor(Math.random() * maxValue) + 1;
}

function pickSuit()
{
 suit = random(4);

 if(suit == 1)
 return "Spades";

 if(suit == 2)
 return "Clubs";

 if(suit == 3)
 return "Diamonds";

 return "Hearts";
}

function cardName(card)
{
 if(card == 1)
 return "Ace";

 if(card == 11)
 return "Jack";

 if(card == 12)
 return "Queen";

 if(card == 13)
 return "King";

 return ("" + card);
}

function cardValue(card)
{
 if(card == 1)
 return 11;

 if(card > 10)
 return 10;

 return card;
}

function PickACard(strWho)
{
 card = random(13);
 suit = pickSuit();

 alert(strWho + " picked the " + cardName(card) + " of " + suit);

 return cardValue(card);
}

function Dealer()
{
 while(DealerScore < 17)
 {
 DealerScore = DealerScore + PickACard("Dealer");
 }
}

function User()
{
	PlayerScore = PlayerScore + PickACard("You");

}
function LookAtHands(Winner)
{
 if(DealerScore > 21)
 {
 alert("House busts! You win!");
 Winner = "You";
 }
 else
 if((PlayerScore > DealerScore) && (PlayerScore <= 21))
 {
 alert("You win!");
  Winner = "You";
 }
 else
 if(PlayerScore == DealerScore)
 {
 alert("Push!");
  Winner = "Tie";
 }
 else
 {
 alert("House wins!");
  Winner = "House";
 }
}

Dealer();
alert("Dealer's score is: " + DealerScore);
document.getElementById('DealerScore').innerHTML = DealerScore;


User();
alert("Your score is: " + PlayerScore);
document.getElementById("DealerScore").innerHTML = "Dealer's score is: " + DealerScore;


while (AskAgain == true )
{
	var answer = confirm("Do you want to draw a card?")
	if (answer == true)
	{
		User();
		alert("Your score is: " + PlayerScore);
	    document.getElementById("PlayerScore").innerHTML = "Your score is: " + PlayerScore;

		if (PlayerScore < 21)
			{AskAgain = true;}
		
		else 
			{AskAgain = false;}
	}
	else
	{
		AskAgain = false;
	}
}
LookAtHands();

 
</script>
</head>
<body>
<div><p>Welcome to our Blackjack Table!</p>
<p id="PlayerScore">Your Score is: </p>
<p id="DealerScore">Dealer's Score is: </p>
</div>

</body>
</html>

Answer 1

正如@nnnnnn所提到的那样，当你的JS执行时你的html标签甚至都没有被加载，因此问题就出现了。尝试类似下面的内容来解决问题：

 <!DOCTYPE html>
<html>
<title>Welcome to Blackjack</title>
<!--<link href="style.css" rel="stylesheet" type="text/css">

<!-- <script src="bj.js"></script> -->
<head>
<script>
var PlayerScore = 0;
var DealerScore = 0;
var Winner = "Nobody";
var AskAgain = true;

function random(maxValue)
{
 return Math.floor(Math.random() * maxValue) + 1;
}

function pickSuit()
{
 suit = random(4);

 if(suit == 1)
 return "Spades";

 if(suit == 2)
 return "Clubs";

 if(suit == 3)
 return "Diamonds";

 return "Hearts";
}

function cardName(card)
{
 if(card == 1)
 return "Ace";

 if(card == 11)
 return "Jack";

 if(card == 12)
 return "Queen";

 if(card == 13)
 return "King";

 return ("" + card);
}

function cardValue(card)
{
 if(card == 1)
 return 11;

 if(card > 10)
 return 10;

 return card;
}

function PickACard(strWho)
{
 card = random(13);
 suit = pickSuit();

 alert(strWho + " picked the " + cardName(card) + " of " + suit);

 return cardValue(card);
}

function Dealer()
{
 while(DealerScore < 17)
 {
 DealerScore = DealerScore + PickACard("Dealer");
 }
}

function User()
{
    PlayerScore = PlayerScore + PickACard("You");

}
function LookAtHands(Winner)
{
 if(DealerScore > 21)
 {
 alert("House busts! You win!");
 Winner = "You";
 }
 else
 if((PlayerScore > DealerScore) && (PlayerScore <= 21))
 {
 alert("You win!");
  Winner = "You";
 }
 else
 if(PlayerScore == DealerScore)
 {
 alert("Push!");
  Winner = "Tie";
 }
 else
 {
 alert("House wins!");
  Winner = "House";
 }
}
</script>
</head>
<body>
<div><p>Welcome to our Blackjack Table!</p>
<p id="PlayerScore">Your Score is: </p>
<p id="DealerScore">Dealer's Score is: </p>
</div>
<script>

Dealer();
alert("Dealer's score is: " + DealerScore);
document.getElementById('DealerScore').innerHTML = DealerScore;


User();
alert("Your score is: " + PlayerScore);
document.getElementById("DealerScore").innerHTML = "Dealer's score is: " + DealerScore;


while (AskAgain == true )
{
    var answer = confirm("Do you want to draw a card?")
    if (answer == true)
    {
        User();
        alert("Your score is: " + PlayerScore);
        document.getElementById("PlayerScore").innerHTML = "Your score is: " + PlayerScore;

        if (PlayerScore < 21)
            {AskAgain = true;}

        else 
            {AskAgain = false;}
    }
    else
    {
        AskAgain = false;
    }
}
LookAtHands();
</script>
</body>
</html>

Answer 2

您的脚本在包含其中元素的文档之前加载。将您的脚本包含在：

中

/*  BG Gradients
~-----------------------------------------*/

.bg-grad {
  background: #000;
  background: transparent url("http://www.freelargeimages.com/wp-content/uploads/2014/12/Landscape_01.jpg") center bottom no-repeat;
  -moz-background-size: cover;
  -o-background-size: cover;
  -webkit-background-size: cover;
  background-size: cover;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.bg-grad .bg-layer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
  z-index: 6;
  -moz-transition: opacity 0.5s ease;
  -o-transition: opacity 0.5s ease;
  -webkit-transition: opacity 0.5s ease;
  transition: opacity 0.5s ease;
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.bg-grad .bg-layer.on {
  opacity: 1;
}


/*  Clouds
~-----------------------------------------*/

.cloud {
  width: 100%;
  height: 900px;
  position: relative;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 5;
  background: transparent url('http://freepngimages.com/wp-content/uploads/2014/11/ten-party-balloons.png') left bottom no-repeat;
  -moz-background-size: cover;
  -o-background-size: cover;
  -webkit-background-size: cover;
  background-size: cover;
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

@media (max-width: 550px) {
  .cloud {
    display: none;
  }
}

.x1 {
  -moz-animation: moveclouds 40s linear infinite;
  -webkit-animation: moveclouds 40s linear infinite;
  animation: moveclouds 40s linear infinite;
  width: 2036px;
  height: 1608px;
}

@-webkit-keyframes moveclouds {
  0% {
    margin-left: 100%;

  }
  100% {
    margin-left: -1400px;
  }
}

@-moz-keyframes moveclouds {
  0% {
    margin-left: 100%;
  }
  100% {
    margin-left: -1400px;
  }
}

@-o-keyframes moveclouds {
  0% {
    margin-left: 100%;
  }
  100% {
    margin-left: -1400px;
  }
}

使用Javascript中的getElementById.innerHTML在<p>段落中显示变量值

2 个答案: