使用 Vanilla Javascript 和减量创建硬币翻转和这个

Question

I need to make a coin flip 20x and display the coin, and the results x times each. I am trying to use decrement to determine the coin flip. And then need to display the flip x number of times. I am running into an issue of how to write it using this. and decrement.

const coin = {
    state: 0,
    flip: function () {
        this.state = Math.floor(Math.random() * 2) == 0 ? "tails" : "heads";

        //    0 or 1: use "this.state" to access the "state" property on this object.
    },
    toString: function () {
        if (this.state === 0) {
            sides = "heads";
        } else if (this.state === 1) {
            sides = "tails";
        }
        return sides;

    },
    toHTML: function () {
        const image = document.createElement("img");
        let h1 = document.querySelector("h1");
        h1.append(image);
        if (this.state === 0) {
            image.src = "images/tails.png";
        } else if (this.state === 1) {
            image.src = "image/heads.png";
        }

        return image;
    },
};

function display20Flips() {
    const results = [];
    for (let i = 0; i < 20; i++) {
        coin.flip();
        h3.innerHTML += coin.state;
        results.push(coin.state++);
    }

Answer 1

You can also approach it functionally. This will help you focus on one problem at a time:

 // Store the coin flip state as a boolean (true or false) function randomBoolean () { return Boolean(Math.floor(Math.random() * 2)); } // Convert the boolean state to a "side" string // heads is false, tails is true function asCoinSide (bool) { return bool ? 'tails' : 'heads'; } function createCoinImage (bool) { const side = asCoinSide(bool); const image = document.createElement('img'); image.alt = side; // StackOverflow doesn't have access to your local images, // so this will show an error in the code snippet demo // when the URL is loaded, but will work if the images exist: image.src = `images/${side}.png`; return image; } function displayCoinFlips (count = 20) { const div = document.querySelector('div.coins'); const results = []; for (let i = 0; i < count; i += 1) { // Get a state const state = randomBoolean(); results.push(state); // Use the state to create the image const image = createCoinImage(state); // And append it to the container div div.appendChild(image); } return results; } function displaySummary (states) { const div = document.querySelector('div.summary'); let headsCount = 0; let tailsCount = 0; // Count the heads vs. tails results // Remember: heads is false, tails is true for (const state of states) { if (state) tailsCount += 1; else headsCount += 1; } div.textContent = `Heads: ${headsCount}, Tails: ${tailsCount}`; } const states = displayCoinFlips(); displaySummary(states);

 <div class="coins"></div> <div class="summary"></div>

Answer 2

You had some issues with your code. I fixed them. Still, the code needs to be a little redesigned to have a class Coin and then coin = new Coin() .

 const coin = { state: 0, flip: function() { this.state = Math.floor(Math.random() * 2) == 0 ? "tails" : "heads"; }, toString: function() { if (this.state === 0) { sides = "heads"; } else if (this.state === 1) { sides = "tails"; } return sides; }, toHTML: function() { let h1 = document.querySelector(".container"); const div = document.createElement("div"); if (this.state === "tails") { div.innerText = "images/tails.png"; } else { div.innerText = "image/heads.png"; } h1.append(div); return div; }, }; function displayFlips(n) { const results = []; for (let i = 0; i < n; i++) { coin.flip(); coin.toHTML(); results.push(coin.state); } return results; } console.log(displayFlips(20));

 <div class="container"> </div>