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
15 Replies
there's a working typewriter animation from a tutorial aswell
codepen shows me an error only with the function NewDiv
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.
I have no idea why it does that, I wanna make it inside the code div
the "Just HTML" error only refers to the contents of the HTML box on codepen
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.
if there's another problem with your code, you'll have to be more explicit in what it is @ZrizzyOP
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
okay, so you want someone else to build that for you, or are you looking for tips?
I'm looking to find out why the making of the new div isn't working
ah, that's because the function in your setTimeout isn't defined properly:
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_functionsthanks, and how can the timeout match the other one of the typewriting?
I'd change up the logic a bit for that:
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:
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 donethank you so much
no worries, glad to help 🙂