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
No description
15 Replies
ZrizzyOP
ZrizzyOP•13mo ago
there's a working typewriter animation from a tutorial aswell
ZrizzyOP
ZrizzyOP•13mo ago
codepen shows me an error only with the function NewDiv
No description
Jochem
Jochem•13mo 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
ZrizzyOP•13mo ago
I have no idea why it does that, I wanna make it inside the code div
Jochem
Jochem•13mo ago
the "Just HTML" error only refers to the contents of the HTML box on codepen
Jochem
Jochem•13mo 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.
No description
No description
No description
Jochem
Jochem•13mo ago
if there's another problem with your code, you'll have to be more explicit in what it is @ZrizzyOP
ZrizzyOP
ZrizzyOP•13mo 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
Jochem•13mo ago
okay, so you want someone else to build that for you, or are you looking for tips?
ZrizzyOP
ZrizzyOP•13mo ago
I'm looking to find out why the making of the new div isn't working
Jochem
Jochem•13mo 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
ZrizzyOP•13mo ago
thanks, and how can the timeout match the other one of the typewriting?
Jochem
Jochem•13mo 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
ZrizzyOP•13mo ago
thank you so much
Jochem
Jochem•13mo ago
no worries, glad to help 🙂
Want results from more Discord servers?
Add your server