Pages Menu Stijit.com
Twitter
Categories Menu

Textarea и 4 чекбокса которые меняют ее стили через javascript

Сделать textarea и 4 чекбокса, клик на каждый чекбокс применяет соответствующее форматирование, повторный клик убирает его.

    Статусы чекбоксов должны быть следующими:

  • Сделать красным
  • Сделать жирным
  • Зачеркнуть текст
  • Сменить фон
<!doctype html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
</head>
<body>

  <style>
    .apply-red { color: red; }
    .apply-bold { font-weight: bold; }
    .apply-crossed { text-decoration: line-through; }
    .apply-background { background-color: silver; }
  </style>

  <p>Клик на каждый checkbox применяет соответствующее форматирование, повторный клик убирает его</p>
  <textarea name="message" cols="70" rows="3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae consequuntur</textarea>
  <p><input type="checkbox" id="red" name="a" value="Сделать красным"><label for="red">Сделать красным</label></p>
  <p><input type="checkbox" id="bold" value="Сделать жирным"><label for="bold">Сделать жирным</label></p>
  <p><input type="checkbox" id="crossed" value="Зачеркнуть текст"><label for="crossed">Зачеркнуть текст</label></p>
  <p><input type="checkbox" id="background" value="Сменить фон"><label for="background">Сменить фон</label></p>

  <script>

var text = document.querySelector("textarea"),
    checkboxRed = document.getElementById("red"),
    checkboxBold = document.getElementById("bold"),
    checkboxCrossed = document.getElementById("crossed"),
    checkboxBackground = document.getElementById("background");

checkboxRed.onclick = function textRed() {
  console.log(text);
  console.log(text.className);
  console.log(checkboxRed.checked);
  if (checkboxRed.checked == true) {
    previousState = text.className;
    text.className += " apply-red";
  } else {
    text.className = previousState;
  }
};
checkboxBold.onclick = function textBold() {
  if (checkboxBold.checked == true) {
    previousState2 = text.className;
    text.className += " apply-bold";
  } else {
    text.className = previousState2;
  }
};
checkboxCrossed.onclick = function textCrossed() {
  if (checkboxCrossed.checked == true) {
    previousState3 = text.className;
    text.className += " apply-crossed";
  } else {
    text.className = previousState3;
  }
};
checkboxBackground.onclick = function textBackground() {
  if (checkboxBackground.checked == true) {
    previousState4 = text.className;
    text.className += " apply-background";
  } else {
    text.className = previousState4;
  }
};

</script>
</body>
</html>

Второй вариант — реализация с помощью функции с использованием вырезания символов из строки javascript

<!doctype html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
</head>
<body>

  <style>
    .apply-red { color: red; }
    .apply-bold { font-weight: bold; }
    .apply-crossed { text-decoration: line-through; }
    .apply-background { background-color: silver; }
  </style>

  <p>Клик на каждый checkbox применяет соответствующее форматирование, повторный клик убирает его</p>
  <textarea name="message" cols="70" rows="3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae consequuntur</textarea>
  <p><input type="checkbox" id="apply-red" name="a" value="Сделать красным" onclick="textUpdate(this.id);"><label for="apply-red">Сделать красным</label></p>
  <p><input type="checkbox" id="apply-bold" value="Сделать жирным" onclick="textUpdate(this.id);"><label for="apply-bold">Сделать жирным</label></p>
  <p><input type="checkbox" id="apply-crossed" value="Зачеркнуть текст" onclick="textUpdate(this.id);"><label for="apply-crossed">Зачеркнуть текст</label></p>
  <p><input type="checkbox" id="apply-background" value="Сменить фон" onclick="textUpdate(this.id);"><label for="apply-background">Сменить фон</label></p>

  <script>

function textUpdate(id) {
  var text = document.querySelector("textarea"),
  checkbox = document.getElementById(id),
  classes = ["apply-red", "apply-bold", "apply-crossed", "apply-background"];
  console.log(text); //Смотрим в консоли как меняется класс текстэрии
  console.log(checkbox.checked); //Смотрим статус чекбокса

if (checkbox.checked == true) {
  for (var i = 0; i < classes.length; i++) {
    if (id == classes[i]) {
      text.className += " " + classes[i];
    }
  }
} else {
    var index = text.className.indexOf(id);
    if (index != -1) {
      var a = text.className.substr(0, index) + text.className.substr(index + id.length); //Вырезаем части строки с классами текстэрии: от начала строки до позиции с которой начинается текущий класс + от позиции конца текущего класса до конца строки. Названия классов текстэрии точно совпадают с названиями id чекбоксов
      text.className = a;
      console.log(index + id.length); //Смотрим позицию конца названия класса
    }
  }
}

</script>
</body>
</html>

Оставить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *