Why doesn't this button clicking another button work

Question

I have this button:

<button onclick="click_button1()"><a href="">Calculate SubGhz channel</a></button>

that calls the function:

function click_button1(){
    document.getElementById(converters).click();
}

<button class="collapsible" id="converters">Converters</button>

This button collapses/expands the following div:

<div class="content" id="contentConverters">
   <a name="1"></a>
   <button class="collapsible">Calculate SubGhz channel</button>
   <div class="content">
   <table>
        <tr>
            <td class="labels">Channel:</td>
            <td><input class="labels" type="number" id="page" Value="0"></td>
            <td><input type="button" onclick="CalculateSubGhzPage()" value="Calculate"></td>
        </tr>
    </table>
    <br>
   </div>
</div>

The idea is that I click button X and that button X calls a function that triggers button Y and button Y expands or collapses a div .

My coding is working so far but the problem is that the div only collapses and doesn't expand when I press the button X but if I press button Y directly it works both ways.

Javacript for the collapsible


    var coll = document.getElementsByClassName("collapsible");
          var i;

          for (i = 0; i < coll.length; i++) {
             coll[i].addEventListener("click", function () {
                this.classList.toggle("active");
                var content = this.nextElementSibling;
                if (content.style.display === "block") {
                   content.style.display = "none";
                } else {
                   content.style.display = "block";
                }
             });
          }

Runable example

<!doctype html>
<html>
    <head>
       <meta name="viewport" content="width=device-width, initial-scale=1">

       <title>GBCS Tools</title>

       <style>
          .collapsible {
             cursor: pointer; 
          }

          #converters {
             background-color:#57756f;
          }
          #flags {
             background-color:#57756f;
          }
            q
          .active,
          .collapsible:hover {
             background-color: #555;
          }
        #contentConverters  {
             display: none;
             overflow: hidden;
          }

          .content {
             display: none;
             overflow: hidden;
          }

    .navList {
      background-color: #874d59;
      list-style-type: none;
      height:50px;
      position:fixed;
      z-index: 100;
      /*keep it high*/
      float:right;
    }

    .navList li {
      float: right;
      margin-right:10%;
    }


    .navList a:hover {
      background-color: rgba(255, 255, 255, 0.3);
    }

    .navList a[href="#tools"] {
      padding-top:15px; 
      color:    #c3b0aa;
      background-color: #874d59 ;
    }

    .navList > li {
      position: relative;
    }

    .navList > li > div {
      padding-righ:20%;
      padding-left:auto;
      visibility: hidden;
      position: relative;
      background-color: #8b787b;
      transition: .1s;
      opacity: 0;
    }

    .navList > li:hover > div {
      visibility: visible;
      opacity: 1;
    }

       </style>
    </head>

    <body>
        <ul class="navList">
          <li><a href="#tools"><b>Tools</b></a>
            <div>
              <button onclick="click_button1()"><a href="">Calculate SubGhz channel</a></button>
            </div>
          </li>  
        </ul>


    <div class="container">
    <button class="collapsible" id="converters">Converters</button>
    <div class="content" id="contentConverters">
       <button class="collapsible">Calculate SubGhz channel</button>
       <div class="content">
        <br>
  <p>Someting</p>
        <br>
       </div>
    </div>
</body>
</html>

<script>   
    function click_button1(){
        document.getElementById("converters").click();
    }

      var coll = document.getElementsByClassName("collapsible");
      var i;

      for (i = 0; i < coll.length; i++) {
         coll[i].addEventListener("click", function () {
            this.classList.toggle("active");
            var content = this.nextElementSibling;
            if (content.style.display === "block") {
               content.style.display = "none";
            } else {
               content.style.display = "block";
            }
         });
      }

   </script>

Answer 1

You got typo on document.getElementById

Check this general example:

 function click_button1() { document.getElementById('converters').click(); }

 <button onclick="click_button1()"><a href="#">Calculate SubGhz channel</a></button> <button class="collapsible" id="converters" onclick="alert('click!');">Converters</button>

Answer 2

Nevermind guys i figure it out, thank you all for your help :) :

function click_button1(){
        document.getElementById("converters").click();
        document.getElementById("SubGhz").click();

    }

<button class="collapsible" id="converters">Converters</button>
<div class="content" id="contentConverters">
   <button class="collapsible" id="SubGhz">Calculate SubGhz channel</button>
   <div class="content">
    <br>
    <table>
    </table>
    <br>
   </div>

Why doesn't this button clicking another button work

Question

2 answers

solution1
0 ACCPTED 2019-09-16 09:45:56

solution2
0 2019-09-16 10:17:18

Why doesn't this button clicking another button work

Question

2 answers

solution1 0 ACCPTED 2019-09-16 09:45:56

solution2 0 2019-09-16 10:17:18

solution1
0 ACCPTED 2019-09-16 09:45:56

solution2
0 2019-09-16 10:17:18