Nesting JavaScript strings inside an HTML onclick attribute

Question

This code explains my problem best:

<html>
<head>
  <script>
   function showDiv (divId, dat){
     document.getElementById(divId).innerHTML = dat ;
     document.getElementById(divId).style.display = "block" ;
   }
  </script>
</head>
<body>
  <div onclick="showDiv(1, '<div onclick='showDiv(2, 'test C');'>test B</div>')">test A</div>
  <div id="1" style="display:none;"></div>
  <div id="2" style="display:none;"></div>
</body>
</html>

When I click "test A", I get: Uncaught SyntaxError: missing ) after argument list.

I think using addEventListener() instead of an inline event would help here. — mykaf
– mykaf, Commented Nov 7, 2024 at 17:20

Tejasvi Singh · Accepted Answer · 2024-11-07 17:30:18Z

1

you can use &quot for double quotes and &#39 for single quotes inside "showDiv()"

hope it helps

answered Nov 7, 2024 at 17:30

Tejasvi Singh

92 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

kazcfz · Accepted Answer · 2024-11-07 17:33:57Z

As mykaf commented, addEventListener("click", (event) => {}); would achieve the same and is generally neater. So as onclick = (event) => {};

You can still use HTML inline onclick using backticks (`) like so: <div onclick="showDiv(1, `<div onclick='showDiv(2, 'test C');'>test B</div>`)">test A</div>

<html>

<head>
  <script>
    function showDiv(divId, dat) {
      document.getElementById(divId).innerHTML = dat;
      document.getElementById(divId).style.display = "block";
    }
  </script>
</head>

<body>
  <div onclick="showDiv(1, `<div onclick='showDiv(2, 'test C');'>test B</div>`)">test A</div>
  <div id="1" style="display:none;"></div>
  <div id="2" style="display:none;"></div>
</body>

</html>

Andy · Accepted Answer · 2024-11-07 17:54:04Z

It might be easier to hide the elements you don't want to see in the first instance and then reveal them when their sibling is clicked.

Note: using method the element ids must be strings.

Use a class to hide the elements, and remove the class when you want them shown
Use a data attribute to indicate what element should be shown.
Use event delegation - attach a listener to a parent element, and then listen for events from its children as they "bubble up" the DOM.

// Get the group container
const container = document.querySelector('.container');

// Add an event listener to it which calls `handleClick`
// when clicked
container.addEventListener('click', handleClick);

// Function accepts the event
function handleClick(e) {

  // If the element that was clicked has a [data-show] attribute
  if (e.target.closest('[data-show]')) {

    // Grab that show value from the element's dataset
    const nextId = e.target.dataset.show;
    
    // Used that value to get the element with that ID, and then remove
    // its hidden class
    document.querySelector(`#${nextId}`).classList.remove('hidden');
  }
}

.hidden {
  display: none;
}

<div class="container">
  <div data-show="one">Test Zero</div>
  <div id="one" data-show="two" class="hidden">Test One</div>
  <div id="two" class="hidden">Test Two</div>
</div>

If you know that the next element is the one immediately below the one you're clicking on you can make the markup tidier and the code shorter.

// Get the group container
const container = document.querySelector('.container');

// Add an event listener to it which calls `handleClick`
// when clicked
container.addEventListener('click', handleClick);

// Function accepts the event
function handleClick(e) {
  
  // Grab the next element sibling of the current element,
  // and remove its hidden class
  if (e.target.nextElementSibling) {
    e.target.nextElementSibling.classList.remove('hidden');
  }
}

.hidden {
  display: none;
}

<div class="container">
  <div>Test Zero</div>
  <div class="hidden">Test One</div>
  <div class="hidden">Test Two</div>
</div>

Additional documentation

Arbel Groshaus · Accepted Answer · 2024-11-07 18:28:30Z

Your code is cursed but I understand what you're trying to do. Every time you do a recursive div you need to do these escapes:

JS escape: " becomes \" (JS can also use ' and `, but for simplicity let's stick with ") and \ becomes \\

HTML escape: " becomes " and & becomes &

Therefore the code you need is:

<div onclick="showDiv(1, "<div onclick=\"showDiv(2, \&quot;test C\&quot;)\">test B</div>")">test A</div>

Here's how you would add a fourth layer!

<html>
<head>
  <script>
   function showDiv (divId, dat){
     document.getElementById(divId).innerHTML = dat ;
     document.getElementById(divId).style.display = "block" ;
   }
  </script>
</head>
<body>
  <div onclick="showDiv(1, &quot;<div onclick=\&quot;showDiv(2, &amp;quot;<div onclick=\\&amp;quot;showDiv(3, \\&amp;amp;quot;test D\\&amp;amp;quot;)\\&amp;quot;>test C</div>&amp;quot;)\&quot;>test B</div>&quot;)">test A</div>
  <div id="1" style="display:none;"></div>
  <div id="2" style="display:none;"></div>
  <div id="3" style="display:none;"></div>
</body>
</html>

(This is obviously not very readable — this is why inline JS is not used very often)

Collectives™ on Stack Overflow

Nesting JavaScript strings inside an HTML onclick attribute

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related