Kevin Powell - Community•8mo ago

I wanna make a span inside the html code, and make it changeable in js, only some editable

I wanna make a command-line like part of my CHARITY escape room. codepen: https://codepen.io/Zrizzy/pen/LYMwqJM

Zrizzy

CodePen

Charity escape room

...

15 Replies

ZrizzyOP•8mo ago

there's a working typewriter animation from a tutorial aswell

ZrizzyOP•8mo ago

codepen shows me an error only with the function NewDiv

Jochem•8mo ago

it's saying that only the contents of the body tag goes in the HTML field. If you need to add any external libraries through link tags or script tage, you have to hit the little settings wheel and add them in there.

ZrizzyOP•8mo ago

I have no idea why it does that, I wanna make it inside the code div

Jochem•8mo ago

the "Just HTML" error only refers to the contents of the HTML box on codepen

Jochem•8mo ago

Your HTML in Codepen looks like the first image, it needs to look like the second image, but only in codepen. Then you add the links to the font back into the settings like in the third screenshot. That's all the "Just HTML" error means though, it's just a codepen setup thing.

Jochem•8mo ago

if there's another problem with your code, you'll have to be more explicit in what it is @ZrizzyOP

ZrizzyOP•8mo ago

It needs to look like the first image (the are you a hacker one) but the user will be able to answer after the automatic line, and based on that, I'm making something

Jochem•8mo ago

okay, so you want someone else to build that for you, or are you looking for tips?

ZrizzyOP•8mo ago

I'm looking to find out why the making of the new div isn't working

Jochem•8mo ago

ah, that's because the function in your setTimeout isn't defined properly:

setTimeout(() => {
  const newDiv = document.createElement("div");
  const newContent = document.createTextNode("C:UsersUser> ");

  newDiv.appendChild(newContent);
  container.appendChild(newDiv);
  newSpan.style.cssText =
    "width: 50vw; height: 50vh; background-color:blue; font-size: clamp(35px, 2rem, 50px); font-family: 'Handjet', sans-serif; color: white;";
}, 5000);

setTimeout(() => {
  const newDiv = document.createElement("div");
  const newContent = document.createTextNode("C:UsersUser> ");

  newDiv.appendChild(newContent);
  container.appendChild(newDiv);
  newSpan.style.cssText =
    "width: 50vw; height: 50vh; background-color:blue; font-size: clamp(35px, 2rem, 50px); font-family: 'Handjet', sans-serif; color: white;";
}, 5000);

you were using an arrow function and a regular function keyword, that's not how that works the reason it wasn't giving you an error, was because you were defining an arrow function that then as its only action defined a new function called newDiv in its own scope, then returned that function to the calling context, which then just discarded it give this one a read if you want to know more: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

ZrizzyOP•8mo ago

thanks, and how can the timeout match the other one of the typewriting?

Jochem•8mo ago

I'd change up the logic a bit for that:

const container = document.querySelector(".fake-code");
const text1 = "Are you the new white hat hacker? Y/N";

function newDiv() {
  const newDiv = document.createElement("div");
  const newContent = document.createTextNode("C:UsersUser> ");

  newDiv.appendChild(newContent);
  container.appendChild(newDiv);
  newSpan.style.cssText =
    "width: 50vw; height: 50vh; background-color:blue; font-size: clamp(35px, 2rem, 50px); font-family: 'Handjet', sans-serif; color: white;";
}

function textTypingFx(object, text, i = 0) {
  object.textContent += text[i];

  if (i == text.length - 1) {
    newDiv();
    return;
  }
  setTimeout(() => textTypingFx(object, text, i + 1), 100);
}
setTimeout(() => textTypingFx(container, text1), 100);

const container = document.querySelector(".fake-code");
const text1 = "Are you the new white hat hacker? Y/N";

function newDiv() {
  const newDiv = document.createElement("div");
  const newContent = document.createTextNode("C:UsersUser> ");

  newDiv.appendChild(newContent);
  container.appendChild(newDiv);
  newSpan.style.cssText =
    "width: 50vw; height: 50vh; background-color:blue; font-size: clamp(35px, 2rem, 50px); font-family: 'Handjet', sans-serif; color: white;";
}

function textTypingFx(object, text, i = 0) {
  object.textContent += text[i];

  if (i == text.length - 1) {
    newDiv();
    return;
  }
  setTimeout(() => textTypingFx(object, text, i + 1), 100);
}
setTimeout(() => textTypingFx(container, text1), 100);

instead of having two timeouts running (not that that's an issue in and of itself), you define the newdiv function, then call it when you are done with the textTypingFx calls alternatively if you want a little delay, change that if statement like this:

  if (i == text.length - 1) {
    setTimeout(newDiv, 100);
    return;
  }

  if (i == text.length - 1) {
    setTimeout(newDiv, 100);
    return;
  }

note the lack of calling parentheses after newDiv in the setTimeout. You're just passing it a function to call after the timeout another alternative would be to do the math for the length of text1 and the delay, then set that as the timeout, but that's much hackier than just calling the function when you're done

ZrizzyOP•8mo ago

thank you so much

Jochem•8mo ago

no worries, glad to help 🙂

Gaming

Programming

I wanna make a span inside the html code, and make it changeable in js, only some editable