Question 414225 in Javascript Question posted in
A very good W3school tutorial can be found here.

javascript function arguments apostrophe

The simple 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>

the argument by onclick function contains a functions with arguments (strings).
doesn’t work like that.
I think the apostrophes are the problem.
pls help. thx

my code above explains my problem best

Tags:

4

Answers


  1. 0

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

    hope it helps

    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
  3. 0

    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.

    1. Use a class to hide the elements, and remove the class when you want them shown

    2. Use a data attribute to indicate what element should be shown.

    3. 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

    Login or Signup to reply.
  4. 0

    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 &quot; and & becomes &amp;

    Therefore the code you need is:

    <div onclick="showDiv(1, &quot;<div onclick=&quot;showDiv(2, &amp;quot;test C&amp;quot;)&quot;>test B</div>&quot;)">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)

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search