There is a page with the following content:

<html> <head> <title>List</title> <link type="text/css" rel="stylesheet" href="Style.css"> <script type="text/javascript"> function down(info) { var a = document.getElementById(info); if ( a.style.display === 'none' ) a.style.display = 'block'; else if ( a.style.display === 'block' ) a.style.display = 'none'; } </script> </head> <body> <div class="wrapper"> <div class="droplink"> 1 Animals <a class="socialbutton" onclick='down('Animals');this.innerHTML=="[+]" ? this.innerHTML="[-]" : this.innerHTML="[+]"'>[+]</a> <ul id="Animals" style="display:none"> <li class=str> tiger</li> <li class=str> dog</li> <li class=str> cat</li> </ul> </div> </div> <div class="wrapper"> <div class="droplink"> 2 Humans <a class="socialbutton" onclick='down('Humans');this.innerHTML=="[+]" ? this.innerHTML="[-]" : this.innerHTML="[+]"'>[+]</a> <ul id="Humans" style="display:none"> <li class=str> russians</li> <li class=str> germans</li> <li class=str> americans</li> </ul> </div> </div> <div class="wrapper"> <div class="droplink"> 3 Planes <a class="socialbutton" onclick='down('Planes');this.innerHTML=="[+]" ? this.innerHTML="[-]" : this.innerHTML="[+]"'>[+]</a> <ul id="Planes" style="display:none"> </ul> </div> </div> </body> </html>

It looks like this:

 1 Animals [+] 2 Humans [+] 3 Planes [+]

The list expansion function is presented above (down ()). My expected behavior: when you click on the plus pops up the contents. The plus icon itself will change to a minus, when clicked, the list will be removed back. And so for each plus separately.

I am a new person in javascript, so I don’t understand why when I click on the plus, the list does not open?

    1 answer 1

    The problem is solved as follows: A conflict occurred within the line:

     ...onclick='down('Humans');this.innerHTML=="[+]" ?...

    those. single quotes around the edges of Humans broke the onclick attribute structure. The task was solved by replacing these quotes with double quotes.