Kevin Powell - Community•3mo ago

Where to store data awaiting to be put into the html

Hey, what is the recommended way to store data awaiting to be inserted into the html? for example, let's say when i click a button, the text inside changes. Where would it be appropriate to store that awaiting value?

<button id="button">Not clicked</button>

<button id="button">Not clicked</button>

const button = document.getElementById("button");

button.addEventListener("click", () => button.textContent = 'Clicked')

const button = document.getElementById("button");

button.addEventListener("click", () => button.textContent = 'Clicked')

obviously button.textContent = 'Clicked' would be inefficient on a larger scale so putting it in a variable could be good, however something about that doesn't seem right, especially on a larger scale

const button = document.getElementById("button");
const buttonClickedText = "Clicked";

button.addEventListener("click", () => button.textContent = buttonClickedText)

const button = document.getElementById("button");
const buttonClickedText = "Clicked";

button.addEventListener("click", () => button.textContent = buttonClickedText)

You could store the value in a data attribute too which would allow easy editing without editing the javascript, but i feel that could pose security risks?

<button id="button" data-clicked-text="Clicked">Not clicked</button>

<button id="button" data-clicked-text="Clicked">Not clicked</button>

const button = document.getElementById("button");
const buttonClickedText = button.getAttribute("data-clicked-text")

button.addEventListener("click", () => button.textContent = buttonClickedText)

const button = document.getElementById("button");
const buttonClickedText = button.getAttribute("data-clicked-text")

button.addEventListener("click", () => button.textContent = buttonClickedText)

I know that you can use things like template for things too but I’m more referring to use cases like this example. i'd appreciate any insight, thanks in advance.

11 Replies

ἔρως•3mo ago

it VEEEEEEEEEEEEEEEEEEERY much depends many websites have some internationalization/internationalisation method, which changes how you do things but any of the 3 you've listed is fine also, why are you worried with "at scale"? are you going to update the text of 20000 elements?

Jochem•3mo ago

Another good reason to call it i18n

ἔρως•3mo ago

not everybody knows what it means also, he's a beginner but yes, it's a very good reason to abbreviate it

snxxwyyOP•3mo ago

Ah, what sort of things would it change? Also when I say “at scale”, storing it in a variable doesn’t sound that efficient or dynamic, it might be which would be good, but it doesn’t sound it

ἔρως•3mo ago

it really depends on what you are trying to do

snxxwyyOP•3mo ago

How about in the example situation with awaiting button text? Or on a larger scale, you could have a paragraph and image changing when you click a tab. Let’s say there’s three tabs you’d need a place to store 4 values. At that point data attributes wouldn’t be a good fit because there’d be too many of them on the element

ἔρως•3mo ago

you pre-render everything

snxxwyyOP•3mo ago

By that do you mean have the ones that aren’t active display none?

ἔρως•3mo ago

yes

snxxwyyOP•3mo ago

ah okay that makes sense. thanks for the help

ἔρως•3mo ago

you're welcome

Gaming

Programming

Where to store data awaiting to be put into the html