Не отрабатывает функция

@pavel666228 · Регистрация: 17.12.2016

Author24 — интернет-сервис помощи студентам

Добрый,

Собственно делал свое меню и проблема в том что при нажатии на кнопку ничего не отрабатывает.

HTML5

    <nav class="mobile">
        <div class="mobile__menuToggle">
           <img src="https://www.cyberforum.ru/img/menu.svg">
                <input id="mob-radio" type="button" value="GO" />
        </div>
        <ul class="mobile__mobile-menu">
            <li><a href="#"> Home</a></li>
            <li><a href="#">Features</a></li>
            <li><a href="#">Pricing</a></li>
            <li><a href="#">Pages</a></li>
        </ul>
    </nav>

Пробовал еще так

HTML5

1	<input id="mob-radio" type="button" value="GO" onclick="change()" />

CSS

  .mobile{
    display: block;
  }
 
  .mobile__menuToggle{
    position: fixed;
    top: 13px;
    left: 10px;
    z-index: 1;
  }
 
 
  #mob-radio {
    visibility: hidden;
    left: -3px;
    top: 4px;
    width: 38px;
    height: 24px;
    position: absolute;
    z-index: 5;
  }

Javascript

   document.getElementById('mob-radio').onclick = change;
    function change() {
        var element = document.getElementsByClassName('mobile__mobile-menu');
        element[0].style.display = 'block';
    }

@Qwerty_Wasd · 13.01.2019, 14:23

pavel666228, а что должно происходить?

@amr-now · 13.01.2019, 14:40

Насколько понимаю, для начала менюшка должна выпасть.
Тут и классы перепутаны.

PHP/HTML

<!DOCTYPE HTML>
<html>
 
<head>
    <meta charset="utf-8">
    <style>
        .mobile__menuToggle{
            position: fixed;
            top: 13px;
            left: 10px;
            z-index: 1;
  }
        .mobile__mobile-menu{
            display: none;
            position: absolute;
            background-color: antiquewhite;
            border: 1px solid gray;
            width: 80px;
            left: 0px;
            top: 20px;
            z-index: 5;
            list-style: none;
        }
    </style>
</head>
 
<body>
    <nav class="mobile">
        <div class="mobile__menuToggle">
            <img src="https://www.cyberforum.ru/img/menu.svg">
            <input id="mob-radio" type="button" value="GO" />
        </div>
        <ul class="mobile__mobile-menu">
            <li><a href="#">Home</a></li>
            <li><a href="#">Features</a></li>
            <li><a href="#">Pricing</a></li>
            <li><a href="#">Pages</a></li>
        </ul>
        <div>Текст Текст Текст Текст Текст Текст Текст Текст Текст </div>
    </nav>
    <script>
        document.getElementById('mob-radio').onclick = change;
        function change() {
            var element = document.getElementsByClassName('mobile__mobile-menu');
            if (element[0].style.display === "block")
                element[0].style.display = "none";
            else
                element[0].style.display = "block";
        }
    </script>
</body>
</html>

@Qwerty_Wasd dev - investigator 2151 / 1496 / 651 Регистрация: 16.04.2016 Сообщений: 3,696
	13.01.2019, 14:23	2
	pavel666228, а что должно происходить? 0

	13.01.2019, 14:40

Не отрабатывает функция

Решение