Переключение назад и вперед между стилями onClick () - переключение регистра - PullRequest
Новая
       12

Переключение назад и вперед между стилями onClick () - переключение регистра

2 голосов
/ 01 июня 2019

На этой странице:

http://javascript.drawyourpets.com/

Я пытаюсь переключаться между стилями каждый раз, когда пользователь нажимает кнопку.

Я использую коммутатор в соответствии с кодом из этого решения : 

function changeColor() {
  let theToggle = document.getElementById("change-color");
  theToggle.toggleStatus = "on";
  switch (theToggle.toggleStatus) {
    case "on":
      theToggle.toggleStatus = "off";
      theToggle.style.color = "purple";
      theToggle.style.backgroundColor = "yellow";
      break;
    case "off":
      theToggle.toggleStatus = "on";
      theToggle.style.color = "yellow";
      theToggle.style.backgroundColor = "purple";
      break;
  }
}
#change-color {
  width: 100px;
  height: 100px;
  color: yellow;
  background-color: purple
}
<div class="column">
  <button id="change-color" onclick="changeColor()">Change Color</button>
</div>

Это меняет цвет фона в первый раз, но работает только один раз - он должен меняться при каждом нажатии.

Я не очень знаком с распределительными шкафами, может, что-то не так с ним?

Ответы [ 3 ]

4 голосов
/ 01 июня 2019

Это не проблема переключения.

Прежде всего, toggleStatus не является свойством.

И, во-вторых, каждый раз, когда функция запускается, theToggle.toggleStatus = "on"; всегда устанавливает свойство втак вот почему коммутатор работает только для 'on'

, вы можете сделать что-то вроде этого: 

var  toggleStatus = "on";

function changeColor() {
  let theToggle = document.getElementById("change-color");
  switch (toggleStatus) {
    case "on":
      toggleStatus = "off";
      theToggle.style.color = "purple";
      theToggle.style.backgroundColor = "yellow";
      break;
    case "off":
      toggleStatus = "on";
      theToggle.style.color = "yellow";
      theToggle.style.backgroundColor = "purple";
      break;
  }
}
#change-color {
  width: 100px;
  height: 100px;
  color: yellow;
  background-color: purple
}
<div class="column">
  <button id="change-color" onclick="changeColor()">Change Color</button>
</div>

Один простой способ сделать все это - просто переключить класс

пример: 

function changeColor() {
  let theToggle = document.getElementById("change-color");
  theToggle.classList.toggle('active')
}
#change-color {
  width: 100px;
  height: 100px;
  color: yellow;
  background-color: purple
}

#change-color.active {
  color: purple;
  background-color: yellow;
}
<div class="column">
  <button id="change-color" onclick="changeColor()">Change Color</button>
</div>
2 голосов
/ 01 июня 2019

Нет элемента toggleStatus в вашем HTML-элементе.Одним из подходов будет использование jQuery toggleClass(); или, если вы хотите сделать это в чистом js, вы можете добавить атрибут data с именем status для управления регистром переключения.

Это один из возможных способов.делать в чистом JavaScript. 

function changeColor() {
  let theToggle = document.getElementById("change-color");
  let toggleStatus = theToggle.dataset.status;
  switch (toggleStatus) {
    case "on":
      theToggle.dataset.status = "off";
      theToggle.style.color = "purple";
      theToggle.style.backgroundColor = "yellow";
      break;
    case "off":
      theToggle.dataset.status = "on";
      theToggle.style.color = "yellow";
      theToggle.style.backgroundColor = "purple";
      break;
  }
}
#change-color {
  width: 100px;
  height: 100px;
  color: yellow;
  background-color: purple
}
<div class="column">
  <button id="change-color" data-status="on" onclick="changeColor()">Change Color</button>
</div>
1 голос
/ 01 июня 2019

Поскольку toggleStatus не является «реальным» свойством элемента DOM #change-color, каждый раз, когда вы устанавливаете свойство в функции: changeColor() в «on», оно обрабатывается как новый экземпляр, и поэтому не наследует предыдущую историю или свойства последнего вызова.

Вы можете исправить это, объявив свойство вне этой функции следующим образом: 

const theToggle = document.getElementById("change-color");
theToggle.toggleStatus = "on";

function changeColor() {
  switch (theToggle.toggleStatus) {
    case "on":
      theToggle.toggleStatus = "off";
      theToggle.style.color = "purple";
      theToggle.style.backgroundColor = "yellow";
      break;
    case "off":
      theToggle.toggleStatus = "on";
      theToggle.style.color = "yellow";
      theToggle.style.backgroundColor = "purple";
      break;
  }
}

Таким образом, ваше пользовательское свойство «удерживается» в браузере и может быть изменено и унаследовано DOM, если оно установлено.

пример: 

const theToggle = document.getElementById("change-color");
theToggle.toggleStatus = "on";

function changeColor() {
  switch (theToggle.toggleStatus) {
    case "on":
      theToggle.toggleStatus = "off";
      theToggle.style.color = "purple";
      theToggle.style.backgroundColor = "yellow";
      break;
    case "off":
      theToggle.toggleStatus = "on";
      theToggle.style.color = "yellow";
      theToggle.style.backgroundColor = "purple";
      break;
  }
}
#change-color {
  width: 100px;
  height: 100px;
  color: yellow;
  background-color: purple
}
<div class="column">
  <button id="change-color" data-status="on" onclick="changeColor()">Change Color</button>
</div>
...