Мой sidenav цвет не меняется с помощью кнопки (onclick) - PullRequest
Новая
       12

Мой sidenav цвет не меняется с помощью кнопки (onclick)

1 голос
/ 04 июня 2019

Я создал JS Script, который изменяет фон моего бокового меню, нажимая кнопку, но это ничего не меняет 

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">

   function toggle_visibility() {
      var e = document.getElementById('on');
      if(e.style.display == 'none')
         e.style.display = 'block';
      else
         e.style.display = 'none';

       var f = document.getElementById('off');
       if(f.style.display =='block')
           f.style.display = 'none';
           else
           f.style.display = 'block';

      var g = document.getElementById('sidenav');
      if(g.style.background == '#F5F5F5') {
         g.style.background = '#252525';
      }
      if(g.style.background == '#252525') {
         g.style.background = '#F5F5F5';
      }
   }
</script>
</head>
<body id='body'>
   <div id="sidenav" style="background: #F5F5F5">
<div class="btn-area" onclick="toggleNav()">&#9776</div>

<ul>

      <div class="button">
            <button onclick="changeColor(); backgroundHiding(); toggle_visibility();" class="lightbutton">
               <span id="on">Turn Off the lights</span>
               <span id="off" style="display: none">Turn On the lights</span>
            </button>
            </div>
</ul>

   </div>
</body>
</html>

Я ожидал, что это изменит мой фон на id='sidenav', но это ничего не изменило ... Буду признателен, если кто-нибудь поможет мне СВП

Ответы [ 3 ]

0 голосов
/ 04 июня 2019

Так что вы можете сделать это, немного изменив свой стиль и JS. Просто используйте g.classList.toggle('lights-on'). Создание классов лучше, чем встроенные стили. Убедитесь, что вы указали sidenav начальный класс lights-on.

Вот полный код: 

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">

   function toggle_visibility() {
      var e = document.getElementById('on');
      if(e.style.display == 'none')
         e.style.display = 'block';
      else
         e.style.display = 'none';

       var f = document.getElementById('off');
       if(f.style.display =='block')
           f.style.display = 'none';
           else
           f.style.display = 'block';

      var g = document.getElementById('sidenav');
      g.classList.toggle('lights-off'); //<--- here is the toggle instead of your ifs
   }

</script>
</head>
<body id='body'>
   <div id="sidenav" class="lights-on"> <!-- make sure you add this class -->
<div class="btn-area" onclick="toggleNav()">&#9776</div>

<ul>

      <div class="button">
            <button onclick="changeColor(); backgroundHiding(); toggle_visibility();" class="lightbutton">
               <span id="on">Turn Off the lights</span>
               <span id="off" style="display: none">Turn On the lights</span>
            </button>
            </div>
</ul>

   </div>
</body>
</html>

и ваша таблица стилей должна выглядеть примерно так: 

.lights-on {
  background-color: #f5f5f5;
}

.lights-off {
  background-color: #252525;
}

в качестве дополнительного примечания. Я бы предложил использовать согласованные имена для ваших методов, поэтому toggle_visibility() должно быть toggleVisibility().

0 голосов
/ 04 июня 2019

Проблема в том, что оператор if внутри функции toggle_visibility 

if(g.style.background == '#F5F5F5')

.background не относится только к цвету.Он может содержать до восьми отдельных свойств.

Например, если вы зарегистрируете это 

console.log(g.style.background);

, вы увидите следующую строку

rgb (245, 245, 245) нет повторной прокрутки 0% 0%

в консоли.

Это означает, что сравнение if(g.style.background == '#F5F5F5') никогда не будет верным.

Более тогокак вы можете видеть из приведенного выше, он возвращает значение rgb вместо шестнадцатеричного числа, поэтому вам нужно сначала преобразовать цвет в шестнадцатеричный.Есть удобная библиотека, которая делает эту работу w3color

Вот полный пример: 

function toggle_visibility() {
  var e = document.getElementById('on');
  if (e.style.display == 'none')
    e.style.display = 'block';
  else
    e.style.display = 'none';

  var f = document.getElementById('off');
  if (f.style.display == 'block')
    f.style.display = 'none';
  else
    f.style.display = 'block';


  var g = document.getElementById('sidenav');

  if (w3color(g.style.backgroundColor).toHexString().toUpperCase() == '#F5F5F5') {
    g.style.backgroundColor = '#252525';
  } else
  if (w3color(g.style.backgroundColor).toHexString().toUpperCase() == '#252525') {
    g.style.backgroundColor = '#F5F5F5';
  }
}
<script src="https://www.w3schools.com/lib/w3color.js"></script>
<div id="sidenav" style="background-color: #F5F5F5">
  <div class="btn-area" onclick="toggleNav()">&#9776</div>
  <ul>

    <div class="button">
      <button onclick="; toggle_visibility();" class="lightbutton">
               <span id="on">Turn Off the lights</span>
               <span id="off" style="display: none">Turn On the lights</span>
            </button>
    </div>
  </ul>
</div>
0 голосов
/ 04 июня 2019

используйте console.log(g.style.background), и вы увидите, что g.style.background возвращает значение rgb, а не значение HEX, как вы ожидаете. Итак, ваш код не работает здесь: 

  var g = document.getElementById('sidenav');
  if(g.style.background == '#F5F5F5') {
     g.style.background = '#252525';
  }
  if(g.style.background == '#252525') {
     g.style.background = '#F5F5F5';
  }
...