html - Refactoring Javascript Function inside a Function -
i tips on refactoring following code, honest, it's not complex i'm still learning best practices , conventions.
html:
<div class="joke-container"> <div class="joke-text"> "this boring static joke" </div> <div class="joke-control"> <button type="button" value="random">random</button> </div> </div>
js:
const jokes = [ '"this funny joke"', '"this super crazy joke"', '"omfg random"' ]; const randomjokebutton = document.queryselector( "button[type=button][value=random]" ); function randomjoke(jokes) { return (joke = jokes[math.floor(math.random() * jokes.length)]); } function printjoke(joke) { let joketext = document.queryselector(".joke-text"); return (joketext.textcontent = joke); } randomjokebutton.addeventlistener("click", () => { printjoke(randomjoke(jokes)); });
scss:
@mixin center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .joke-container { @include center; background: white; padding: 40px; width: 900px; } .joke-text { margin-bottom: 20px; } body { background: papayawhip; } button { background: papayawhip; border: 0; padding: 8px; min-width: 100px; }
so part i'm not sure is:
randomjokebutton.addeventlistener("click", () => { printjoke(randomjoke(jokes)); });
basically, way call function inside function argument doesn't make me happy, maybe it's correct way don't know, maybe should place inside variable?.
i have codepen project.
wiki
Comments
Post a Comment