How to I make the text to change if i click on the screen

Profile

footer text

How to I make the text to change if i click on the screen

I'm trying to figure out how to make a dialogue system that shows the text and after you click it removes all the text in the box and new text appears in its place. (I want to be able to do this multiple times)

var container = document.querySelector(".text");

var speeds = {
  pause: 400,
  slow: 120,
  normal: 50,
  fast: 20,
  superFast: 10
};

var textLines = [{
    speed: speeds.slow,
    string: "this is a test"
  },
  {
    speed: speeds.pause,
    string: "",
    pause: true
  },
  {
    speed: speeds.normal,
    string: "pls help me"
  },
  {
    speed: speeds.fast,
    string: "idk what im doing",
    classes: ["red"]
  },
  {
    speed: speeds.normal,
    string: ":("
  }
];


var characters = [];
textLines.forEach((line, index) => {
  if (index < textLines.length - 1) {
    line.string += " ";
  }

  line.string.split("").forEach((character) => {
    var span = document.createElement("span");
    span.textContent = character;
    container.appendChild(span);
    characters.push({
      span: span,
      isSpace: character === " " && !line.pause,
      delayAfter: line.speed,
      classes: line.classes || []
    });
  });
});

function revealOneCharacter(list) {
  var next = list.splice(0, 1)[0];
  next.span.classList.add("revealed");
  next.classes.forEach((c) => {
    next.span.classList.add(c);
  });
  var delay = next.isSpace && !next.pause ? 0 : next.delayAfter;

  if (list.length > 0) {
    setTimeout(function() {
      revealOneCharacter(list);
    }, delay);
  }
}


setTimeout(() => {
  revealOneCharacter(characters);
}, 600)

const btn = document.getElementById('btn');

html,
body {
  height: 100%;
  width: 100%;
}

.text span {
  opacity: 0;
}

.text span.revealed {
  opacity: 1;
}

.text span.green {
  color: #27ae60;
}

.text span.red {
  color: #ff0000;
}

body {
  background: #3498db;
  padding: 3em;
  font-family: 'Sora', monospace;
}

.text {
  font-size: 6vw;
  word-spacing: 0.2em;
  margin: 0 auto;
  background: #fff;
  padding: 1em;
  border-bottom: 1vw solid #0e6dad;
  position: relative;
  line-height: 1.2em;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>replit</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <div class="text">
  </div>
  <button id="textchanger"> continue </button>

  <script src="script.js">
    }
  </script>

  <script src="https://replit.com/public/js/replit-badge.js" theme="blue" defer></script>



</body>

</html>

so far all I'm able to make from this is a single phrase appear on the screen and that's about it. to change it, I have to go in manually.

Comments:

2023-01-18 23:10:02

Put the code that starts displaying the message in a function. Then call that function in an event listener for the click event.

2023-01-18 23:10:02

You can wrap the textLiines array in another level of array. Select one of them at random and display that.

Answers(1) :

I make (almost) all the js from scratch because it would have been really hard to refactor your code in order to achieve what you want, what I've done seems to work, it is pretty straightforward :

const container = document.querySelector(".text");
const btn = document.querySelector("#textchanger");

// rename speeds in delays which is more coherant
const delays = {
  slow: 120,
  normal: 50,
  fast: 20,
  superFast: 10
};

const textLines = [
  {
    delay: delays.slow,
    string: "this is a test"
  },
  {
    delay: delays.normal,
    string: "pls help me"
  },
  {
    delay: delays.fast,
    string: "idk what im doing",
    classes: ["red"]
  },
  {
    delay: delays.normal,
    string: ":("
  }
];

const revealLine = (lineIndex = 0) => {
  const line = textLines[lineIndex]
  let charIndex = 0

  const nextChar = () => {
    const char = line.string[charIndex]
    const span = document.createElement('span')

    span.textContent = char
    span.classList.add(...(line.classes ?? []))

    container.appendChild(span)

    charIndex++

    if (charIndex < line.string.length)
      setTimeout(nextChar, line.delay);
    else if (lineIndex + 1 < textLines.length) {
      const cb = () => {
        // remove this listener to display the next one
        btn.removeEventListener('click', cb)

        // clear the container
        Array.from(container.children).forEach(el => el.remove())

        // reveal the next line
        revealLine(lineIndex + 1)
      }

      btn.addEventListener('click', cb)
    }
  }

  nextChar()
}

revealLine()

html,
body {
  height: 100%;
  width: 100%;
}

.text span.green {
  color: #27ae60;
}

.text span.red {
  color: #ff0000;
}

body {
  background: #3498db;
  padding: 3em;
  font-family: 'Sora', monospace;
}

.text {
  font-size: 6vw;
  word-spacing: 0.2em;
  margin: 0 auto;
  background: #fff;
  padding: 1em;
  border-bottom: 1vw solid #0e6dad;
  position: relative;
  line-height: 1.2em;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
</head>
<body>
  <div class="text">
  </div>
  <button id="textchanger"> continue </button>
</body>
</html>

Questions & Answers