Can a javascript variable be made local to a specific html element?-CodePudding

As a novice Javascript programmer, I'd like to create an html document presenting a feature very similar to the "reveal spoiler" used extensively in the Stack Exchange sites.

My document therefore has a few <div> elements, each of which has an onClick event listner which, when clicked, should reveal a hiddent text.

I already know that this can be accomplished, e.g., by

<div onclick="this.innerHTML='Revealed text'"> Click to reveal </div>

However, I would like the text to be revealed to be initially stored in a variable, say txt, which will be used when the element is clicked, as in:

<div onclick="this.innerHTML=txt"> Click to reveal </div>

Since there will be many such <div> elements, I certainly cannot store the text to be revealed in a global variable. My question is then:

Can I declare a variable that is local to a specific html element?

CodePudding user response：

Yes you can. HTML elements are essentially just Javascript Objects with properties/keys and values. So you could add a key and a value to an HTML element object.

But you have to add it to the dataset object that sits inside the element, like this:

element.dataset.txt = 'This is a value' // Just like a JS object

A working example of what you want could look like this:

function addAndShowVariable(event) {
  const currentElement = event.currentTarget
  currentElement.dataset.txt = 'This is the extended data'
  
  currentElement.innerHTML  = currentElement.dataset.txt
}

<div onclick="addAndShowVariable(event)">Click to see more </div>

To access the data/variable for the specific element that you clicked on, you have to pass the event object as a function paramater. This event object is given to you automatically by the click event (or any other event).

Of course, in your case you would probably want to add the property/variable on the initial page/component load and only inject or show it on click — essentially splitting the function above into two.

CodePudding user response：

Elements have attributes, so you can put the information into an attribute. Custom attributes should usually be data attributes. On click, check if a parent element has one of the attributes you're interested in, and if so, toggle that parent.

document.addEventListener('click', (e) => {
  const parent = e.target.closest('[data-spoiler]');
  if (!parent) return;
  const currentMarkup = parent.innerHTML;
  parent.innerHTML = parent.dataset.spoiler;
  parent.dataset.spoiler = currentMarkup;
});

<div data-spoiler="foo">text 1</div>
<div data-spoiler="bar">text 2</div>

That's the closest you'll get to "a variable that is local to a specific html element". To define the text completely in the JavaScript instead, one option is to use an array, then look up the clicked index of the spoiler element in the array.

const spoilerTexts = ['foo', 'bar'];
const spoilerTags = [...document.querySelectorAll('.spoiler')];

document.addEventListener('click', (e) => {
  const parent = e.target.closest('.spoiler');
  if (!parent) return;
  const currentMarkup = parent.innerHTML;
  const index = spoilerTags.indexOf(parent);
  parent.innerHTML = spoilerTexts[index];
  spoilerTexts[index] = currentMarkup;
});

<div >text 1</div>
<div >text 2</div>

There are also libraries that allow for that sort of thing, by associating each element with a component (a JavaScript function/object used by the library) and somehow sending a variable to that component.

// for example, with React

const SpoilerElement = ({ originalText, spoilerText }) => {
  const [spoilerShown, setSpoilerShown] = React.useState(false);
  return (
    <div onClick={() => setSpoilerShown(!spoilerShown)}>
      { spoilerShown ? spoilerText : originalText }
    </div>
  );
};
const App = () => (
  <div>
    <SpoilerElement originalText="text 1" spoilerText="foo" />
    <SpoilerElement originalText="text 2" spoilerText="bar" />
  </div>
)

ReactDOM.createRoot(document.querySelector('.react')).render(<App />);

<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<div class='react'></div>