Burger only works on double click, what should I do?

Question

HTML

There is a code where in the nav by condition - if you click on the burger icon, links appear, but for some reason it only works for me with a double click.

Here is the code in JavaScript:

menu.onclick = function myFunction() {
  let x = document.getElementById('myTopnav');

  if (x.className === 'menu') {
    x.className += "responsive";
  } else {
    x.className = 'menu';
  }
}

// responsive - доп класс, который добавляется к nav
// myTopnav - доп класс в ul ( ссылки содержаться в li)

Answer 1

Add code to the page:

<script type="text/javascript" src="//code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
$(function() {
      $('form').submit(function(e) {
        var $form = $(this);
        $.ajax({
          type: $form.attr('method'),
          url: $form.attr('action'),
          data: $form.serialize()
        }).done(function() {
          console.log('success');
        }).fail(function() {
          console.log('fail');
        });
        //отмена действия по умолчанию для кнопки submit
        e.preventDefault(); 
      });
    });
</script>

And the code without jQuery, only works in fresh browsers:
Suddenly someone needs it.

Answer 2

and the classes don't change at all?
try

x = document.querySelector('#myTopnav')
x.classList.toggle('responsive')

instead if/else

Answer 3

Burger only works on double click, what should I do?

What, what ... To make it work with a single one, what else!
Probably so:

menu.onclick = function(){
  let x = document.getElementById('myTopnav');
  if(x.className == 'menu')
    x.className += ' responsive'; //прабэлъ?
  else x.className = 'menu';
  return false;
}