Creating a Black Jack game using JavaScript document.write

Question

Creating a Black Jack game using JavaScript document.write

I am currently in the process of developing a blackjack game using javascript. As of now, I have successfully implemented the dealer's and player's cards. However, when the player decides to draw another card, an issue arises. It seems that the document.write function is lagging behind in writing the required text on the webpage.

while (totalP < 21)
    {
        r = confirm("Hit?");
        if (r==true)
        {
            document.write("<center><br>You chose to hit. </center>");
            p[counter] = deck[Math.floor(Math.random() * deck.length)];
            document.write("<center><br>" + x + "'s next card: " + p[counter] + "</center>");
            totalP = total(p, totalP);
            if (totalP > 21)
            {
                for (var i=0; i<p.length; i++)
                {
                    value = p[i].substring(0,p[i].length-1);
                    if (value == "A")
                    {
                        totalP = totalP - 10;
                        break;
                    }
                    else if (i == p.length - 1)
                    {
                        document.write("<center><br>You busted. Total = " + totalP + " > 21. Dealer Wins!</center>");
                        break;
                    }
                }
            }
        }

Although the text "You chose to hit." does appear, the subsequent card information fails to display on the webpage after confirming the action. The confirm dialog box showing "You chose to hit." reappears until the player's hand exceeds 21.

If anyone can provide assistance with this issue, it would be greatly appreciated. Despite my efforts in researching online and troubleshooting independently, I suspect that the unreliability and slowness of the document.write function might be causing the problem compared to other sections of JavaScript code.

javascript

Answer 1

Answer №1

Avoid using document.write because it completely replaces the content of the document.

Instead, create an HTML document with various HTML elements where you can insert text.

You can target HTML nodes by their id attribute. For example, if you have a div like this:

<div id="myDiv"></div>

You can then use

var div = document.getElementById("myDiv");

to reference that div in your JavaScript code. You can update the text of that div using

div.innerHTML = "Hello World!";

You can also generate new HTML elements in this manner:

var newDiv = document.createElement("div");
newDiv.innerHTML = "I am a newly created div!";
var oldDiv = document.getElementById("myDiv");
oldDiv.appendChild(newDiv);

After implementing these changes, your HTML document will be updated to:

<div id="myDiv">Hello World!<div>I am a newly created div!</div></div>

Answer 2

Avoid using document.write because it completely replaces the content of the document.

Instead, create an HTML document with various HTML elements where you can insert text.

You can target HTML nodes by their id attribute. For example, if you have a div like this:

<div id="myDiv"></div>

You can then use

var div = document.getElementById("myDiv");

to reference that div in your JavaScript code. You can update the text of that div using

div.innerHTML = "Hello World!";

You can also generate new HTML elements in this manner:

var newDiv = document.createElement("div");
newDiv.innerHTML = "I am a newly created div!";
var oldDiv = document.getElementById("myDiv");
oldDiv.appendChild(newDiv);

After implementing these changes, your HTML document will be updated to:

<div id="myDiv">Hello World!<div>I am a newly created div!</div></div>

Creating a Black Jack game using JavaScript document.write

Answer №1

Similar questions

React developer server is failing to automatically refresh the code

Can you provide the proper syntax for the Jquery done() function?

React Data Filtering Techniques

Exploring the Functionality of Chaining in JQuery and Understanding its Inner Workings

Unable to establish a connection to localhost using Javascript due to net::ERR_CONNECTION_REFUSED error

Is it possible to use v-if in conjunction with a style tag to specify a different source file? Alternatively, is there a more efficient method I

Apply a CSS class to the initial item in each carousel present on a webpage

"Adjusting Material UI Select Size - A Guide to Resizing Your

Are there any alternative methods for clearing form fields following a successful thunk dispatch in React?

The comparison between using multiple Vue.js instances and components, and implementing Ajax tabs

Using discord.js to conveniently set up a guild along with channels that are equipped with custom

What could be preventing this AJAX call from running correctly?

What is the rationale behind TypeScript's decision to permit omission of "this" in a method?

Node.js Axios Returns Bad Request with Status Code 400

Encountering an issue in next.js with dynamic routes: getting a TypeError because the property 'id' of 'router.query' cannot be destructured since it is undefined

Using the getElementById function in javascript to modify CSS properties

Executing a JavaScript function at a specified interval

Can JSON values be multiplied together?

Interested in using jQuery to trigger the f12 key press?

Endless Invocation of Promise Functions in NodeJS