HTML + Javascript Нажмите кнопку еще раз, чтобы отменить

Question

Мне было интересно, как можно заставить кнопку отменить что-то тоже после ее нажатия. В моем сценарии просто простое форматирование текста (цвет, размер и т. Д.), Когда вы впервые щелкаете по нему, он форматирует текст, как описано в Javascript, но я хотел бы добавить функцию, которая при повторном щелчке по ней отменяет .

`<script>    
function myFunction(){    
  document.getElementById("demo").style.fontsize="25px";
  document.getElementById("demo").style.color="#3AF702";
  document.getElementById("demo").style.backgroundcolor="red";    
}    
</script>`

<button type="change" onclick="myFunction()">Change!</button>

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

Answer 1

Самый простой способ сделать это - добавить и удалить класс

<style>
  .change {
    font-size: 25px;
    color: #3AF702;
    background-color="red"
  }
</style>
<script>
  var x = 0;

  function myFunction() {
    if (x == 0) {
      document.getElementById("demo").classList.add("change");
      x = 1;
    } else {
      document.getElementById("demo").classList.remove("change");
      x = 0;
    }
  }
</script>

<button type="change" onclick="myFunction()">Change!</button>

Answer 2

<script>    
var flag = true;
function myFunction(){
  let el = document.getElementById("demo");
  el.style.fontsize = flag ? "25px" : "";
  el.style.color= flag ? "#3AF702" : "";
  el.style.backgroundcolor=flag ? "red" : "";   
  flag = !flag; 
}    
</script>`

<button type="change" onclick="myFunction()">Change!</button>

Answer 3

Создайте объект, который хранит начальные значения вашей кнопки и переменную, в которой хранится ее состояние.

var state = 0;
var backup = {};
backup.fontSize = document.getElementById("demo").style.fontsize;
backup.color = document.getElementById("demo").style.color;
backup.background = document.getElementById("demo").style.backgroundcolor;

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

function myFunction() {
  if (state == 0) {
    document.getElementById("demo").style.fontsize = "25px";
    document.getElementById("demo").style.color = "#3AF702";
    document.getElementById("demo").style.backgroundcolor = "red";
    state = 1;
  } else {
    document.getElementById("demo").style.fontsize = backup.fontSize;
    document.getElementById("demo").style.color = backup.color;
    document.getElementById("demo").style.backgroundcolor = backup.background;
    state = 0;
  }
}

Answer 4

var flag = true;
function myFunction(){
  var x = document.getElementById("demo");
  if (flag) {
    x.style.backgroundColor = "red";
    x.style.color="#3AF702";
    x.style.fontSize="25px"
  } else {
    x.style.backgroundColor = "blue";
    x.style.color="#dddddd";
    x.style.fontSize="10px"
  } 
 flag = !flag
}

Answer 5

function myFunction(){
  demo.className = demo.className ? "" : "style"
}

.style {
    font-size: 25px;
    color: red;
    background: blue;
}

<p id="demo">Hi!</p>
<button type="change" onclick="myFunction()">Change!</button>