[英]showing variable value in <p> paragraph using getElementById.innerHTML in Javascript
I'm trying to write a Blackjack code using Javascript, and showing the result in an HTML page. 我正在尝试使用Javascript编写二十一点代码,并将结果显示在HTML页面中。 I have written the logic already, but I can't get to show the results in
我已经写了逻辑,但是我无法显示结果
paragraph by ID, using getElementById.innerHTML. 使用getElementById.innerHTML按ID分段。 I don't know how to make it right.
我不知道该怎么做。 Could you please help me with this?
你能帮我这个忙吗? I'm running out of time :(. here's the code:
我没时间了:(。这是代码:
<!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>
As @nnnnnn has mentioned that your html tags are not even loaded when your JS has executed and hence the issue. 正如@nnnnnn所提到的,当您的JS执行时,甚至没有加载html标记,因此出现了问题。 Try something like below to correct the issue:
请尝试以下类似方法来更正此问题:
<!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>
your script is loading before the document that has the elements in it. 您的脚本正在其中包含元素的文档之前加载。 Enclose your script in:
将脚本包含在:
window.onload=function() {
//all of your JavaScript code
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.