Блог

Главная - Вопросы по программированию - JS modal dosent работает с «getElementById»

JS modal dosent работает с «getElementById»

#javascript #html #css #modal-dialog

Вопрос:

Я создал панель администратора с помощью HTML, CSS и JavaScript, и я сделал кнопки для перемещения по меню, но когда я тестирую консоль и меню проигрывателя, которые не работают так, раздел меню не изменился.

Как это выглядит в полноэкранном режиме

И для теста я поставил консольный журнал 123, но это все равно не работает. Может ли проблема в CSS? Или, может быть, проблема в HTML? Потому что в консоли это не дает мне никакой ошибки. Просто очистите консоль Google Chrome.

 const playerMenuButton = document.getElementById('playerMenuButton')
const playerMenu = document.getElementById('playerMenu')

playerMenuButton.addEventListener('click', () => {
        console.log(123)
}); 
 @import url('https://fonts.googleapis.com/css2?family=Open Sansamp;family=Robotoamp;display=swap');


.main-container {
    width: 100%;
    height: 50vh;
    background-color: #000;
    position: relative;
    margin: 0px;
    opacity: 1;
}

.buttons-container{
    height: 44px;
    width: 100%;
    bottom: 0px;
    position: absolute
}

.button {
    width: 120px;
    height: 32px;
    margin-left: 20px;
    background-color: #434343;
    text-decoration: none;
    border: none;
    color: #fff;
    font-size: 16px;
    font-family: 'Open Sans', sans-serif;
    font-family: 'Roboto', sans-serif
}

.chat {
    color:#434343 ;
    background-color: #434343 ;
    text-decoration: none;
    border: none;
    color: #fff;
    width: 100%;
    height: 32px;
    border-radius: 0px;
    outline: none;
}

.div-chat {
    position:absolute;
    margin-left: 20px;
    bottom: 60px;
    width: 193vh;
}

.playerMenu {
    width: 100%;
    height: 50vh;
    background-color: #000;
    transform: translate(00%, -100%);
    opacity: 0;
    
}

.PlayerInfo {
    font-size: 9px;
    margin-top: 5px;
    margin-left: 20px;
}

h1 {
    color: #fff;
    font-family: 'Open Sans', sans-serif;
    font-family: 'Roboto', sans-serif
}

.playerMenu input {
    margin-top: 10px;
    margin-left: 20px;
}

.playerMenu.show {
   opacity: 1;
} 
 <!doctype html>
<html>
  <head>
    <title>AdminPanel | By Richok</title>
    <link rel="stylesheet" href="css/style.css">
  </head>
  <body>
  <div class="main-container">
    <div class="div-chat">
      <input class="chat" type="text"> 
    </div>      
        <div class="buttons-container">
            <button id="" class="button">Console</button>
            <button id="" class="button">chat</button>
            <button id="playerMenuButton" class="button">Player</button>
            <button id="" class="button">Cars</button>
            <button id="" class="button">Capt</button>
            <button id="" class="button">Controls</button>
            <button id="" class="button">AntiCheat</button>
            <button id="" class="button">Test</button>
        </div>
  </div>
  <div id = "playerMenu" class="playerMenu">
    <input class="chat" type="text">
    <div class="PlayerInfo">
      <h1>Name:</h1>
      <h1>Social Club:</h1>
      <h1>



lt;/h1>

      <h1>Phone number</h1>

      <h1>Home:</h1>

      <h1>Warns:</h1>

      <h1>Fraction:</h1>

      <h1>Bussiens</h1>

      <h1>Login</h1>

    </div>


    <div class="buttons-container">

      <button id="" class="button">Console</button>

      <button id="" class="button">chat</button>

      <button id="playerMenuButton" class="button">Player</button>

      <button id="" class="button">Cars</button>

      <button id="" class="button">Capt</button>

      <button id="" class="button">Controls</button>

      <button id="" class="button">AntiCheat</button>

      <button id="" class="button">Test</button>

   </div>


    </div>

  </body>

  <script src="js/app.js"></script>

</html> 







Комментарии:


1.  Повторяющиеся идентификаторы недопустимы.   Пожалуйста,     подтвердите свой HTML    .  


Ответ №1:




Проблема была в css, я добавил position: relative; и z-index: 1; в class .button, так что теперь вы можете добавить к ним событие и щелкнуть без проблем






 const playerMenuButton = document.getElementById('playerMenuButton');
const playerMenu = document.getElementById('playerMenu');

playerMenuButton.addEventListener('click', () => {
        console.log(123)
}); 


 @import url('https://fonts.googleapis.com/css2?family=Open Sansamp;family=Robotoamp;display=swap');


.main-container {
    width: 100%;
    height: 50vh;
    background-color: #000;
    position: relative;
    margin: 0px;
    opacity: 1;
}

.buttons-container{
    height: 44px;
    width: 100%;
    bottom: 0px;
    position: absolute
}

.button {
    width: 120px;
    height: 32px;
    margin-left: 20px;
    background-color: #434343;
    text-decoration: none;
    border: none;
    color: #fff;
    font-size: 16px;
    font-family: 'Open Sans', sans-serif;
    font-family: 'Roboto', sans-serif;
    position:relative;
    z-index:1;
}

.chat {
    color:#434343 ;
    background-color: #434343 ;
    text-decoration: none;
    border: none;
    color: #fff;
    width: 100%;
    height: 32px;
    border-radius: 0px;
    outline: none;
}

.div-chat {
    position:absolute;
    margin-left: 20px;
    bottom: 60px;
    width: 193vh;
}

.playerMenu {
    width: 100%;
    height: 50vh;
    background-color: #000;
    transform: translate(00%, -100%);
    opacity: 0;
    
}

.PlayerInfo {
    font-size: 9px;
    margin-top: 5px;
    margin-left: 20px;
}

h1 {
    color: #fff;
    font-family: 'Open Sans', sans-serif;
    font-family: 'Roboto', sans-serif
}

.playerMenu input {
    margin-top: 10px;
    margin-left: 20px;
}

.playerMenu.show {
   opacity: 1;
} 


 <!doctype html>
<html>
  <head>
    <title>AdminPanel | By Richok</title>
    <link rel="stylesheet" href="css/style.css">
  </head>
  <body>
  <div class="main-container">
    <div class="div-chat">
      <input class="chat" type="text"> 
    </div>      
        <div class="buttons-container">
            <button id="" class="button">Console</button>
            <button id="" class="button">chat</button>
            <button id="playerMenuButton" class="button">Player</button>
            <button id="" class="button">Cars</button>
            <button id="" class="button">Capt</button>
            <button id="" class="button">Controls</button>
            <button id="" class="button">AntiCheat</button>
            <button id="" class="button">Test</button>
        </div>
  </div>
  <div id = "playerMenu" class="playerMenu">
    <input class="chat" type="text">
    <div class="PlayerInfo">
      <h1>Name:</h1>
      <h1>Social Club:</h1>
      <h1>



lt;/h1>

      <h1>Phone number</h1>

      <h1>Home:</h1>

      <h1>Warns:</h1>

      <h1>Fraction:</h1>

      <h1>Bussiens</h1>

      <h1>Login</h1>

    </div>


    <div class="buttons-container">

      <button id="" class="button">Console</button>

      <button id="" class="button">chat</button>

      <button id="playerMenuButton" class="button">Player</button>

      <button id="" class="button">Cars</button>

      <button id="" class="button">Capt</button>

      <button id="" class="button">Controls</button>

      <button id="" class="button">AntiCheat</button>

      <button id="" class="button">Test</button>

   </div>


    </div>

  </body>

  <script src="js/app.js"></script>

</html> 













	Метки: