Creating Coin Flip using Vanilla Javascript and decrement and this

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>