Discussion on: JavaScript Should Be Your Last Resort

View post

Replies for: When your starting with a fresh or very well defined code base sure, you can federated your class names, your animations, your style libraries etc...

What would happen if you took your JS display:none function to a legacy project with a x style JS framework that has certain kinds of tools to style DOM elements? You seem to know exactly what happens with CSS in this case so I expect you to know the answer to JS things as well.

if there is a conflict like repeated function names etc it's very easyto debug, more often than not the browser will immediately tell you

How about you press F12 right now, open the console, and declare two JS functions with the same name into the window. Let me know what the error message says.

Bradley Morgan Clonan • Mar 7 '21 • Edited

So I tried it, and JS is alot easer to debug than css.

<!DOCTYPE html>
<html>
<style>

#pageHeading {
display : none;
}


#pageHeading {
display : block;
}
</style>
<body>

<h1 id="pageHeading">Hide Me Now</h1>

<button onclick="myHideDomElementFunction('#pageHeading')">Try it</button>

<script>

const myHideDomElementFunction = targetElement => document.querySelector(targetElement).style.display = "none";

const myHideDomElementFunction = targetElement => document.querySelector(targetElement).style.display = "none";

</script>

</body>
</html>

Otto Rask • Mar 8 '21

Easier how? I am not certain how that example should be read or executed to validate your point?