Кнопка запуска / остановки не работает должным образом

#javascript #button

#javascript #кнопка

Вопрос:

Я недавно начал изучать JavaScript, и я хотел бы создать кнопку с функцией, которая изменяет innerHTML по щелчку. При первом щелчке он изменяет текст, но после этого ничего. Есть идеи, как я мог это исправить? Вот код до сих пор:

 let Button = document.getElementById("Btn");

Button.onclick = function change() {

  let turnedOn = false;
  if (Boolean(turnedOn) == false) {
    Button.innerHTML = "START";
    turnedOn = true;
  } else {
    Button.innerHTML = "STOP";
    turnedOn = false;
  }
}

 <Button id="Btn">STOP</button>

Развернуть фрагмент

1. Когда вы вызываете функцию onclick, вы turnedOn каждый раз устанавливаете значение false, и, следовательно, первое if значение всегда будет true. Переместите turnedOn переменную за пределы onclick функции. Кроме того, нет причин принуждать turnedOn , Boolean() поскольку это уже логическое значение.

Ответ №1:

Вы должны установить turnedOn флаг вне метода click, иначе он всегда будет false при щелчке.

Также вы устанавливаете флаг turnedOn внутри if-else инструкции обратным образом.

Примечание: поскольку вы меняете только текст, вы можете использовать textContent

 const button = document.getElementById("btn")
let turnedOn = false

button.addEventListener('click', e => {
  if (turnedOn) {
    turnedOn = false
    e.currentTarget.textContent = 'Start'
  } else {
    turnedOn = true
    e.currentTarget.textContent = 'Stop'
  }
})

 <button id="btn">Start</button>

Развернуть фрагмент

Ответ №2:

Проблема в том, что вы устанавливаете для переменной turnedOn значение false в начале функции.

Вы можете просмотреть HTML, чтобы узнать, каково текущее состояние кнопки, а затем решить, включить или выключить кнопку.

 <button id="Btn">START</button>


<script>
    let Button = document.getElementById("Btn");

    Button.onclick = function change () {
    if(Button.innerHTML == "START")
    {
        Button.innerHTML = "STOP";
    }
    else
    {
        Button.innerHTML = "START";
    }
    }
</script>

Развернуть фрагмент

Ответ №3:

Использование javascript и do’nt jquery

 <button id="btnTest" onclick="myclick()">Click OFF</button>

    <script>
        function myclick() {
            var btnTest = document.getElementById("btnTest"); 
            if(btnTest.innerHTML == "Click OFF"){
                btnTest.innerHTML = "Click ON";
            } else {
                btnTest.innerHTML = "Click OFF";
            }
        }
    </script>

Ответ №4:

Проблема в том, что ваша turnedOn переменная существует только в функции обработчика щелчков. Таким образом, он снова устанавливается на то же значение при каждом нажатии. Вы могли бы создать глобальную переменную или :-

Создайте небольшой ToggleButton объект. Чтобы инкапсулировать логику для переключения кнопки. Он может переключаться сам или другие элементы могут переключать его.

 <html>
    <body>
        <button id="toggleButt">Toggle</button>
        <button id="toggleOtherButt">Toggle</button>
    </body>
    <script>

        function ToggleButton(elem) {
            this.elem = elem;
            this.on = false;
            this.render();
            elem.addEventListener("click", () => this.toggle());
        }

        ToggleButton.prototype.toggle = function() {
            this.on = !this.on;
            this.render();            
        }

        ToggleButton.prototype.render = function() {
            this.elem.textContent = (this.on) ? "On" : "Off";
        }

        const but = new ToggleButton(document.getElementById("toggleButt"));

        document.getElementById("toggleOtherButt").addEventListener("click", () => but.toggle());
    </script>
</html>

1. зачем усложнять то, что просто?

2. Конечно, я согласен, что это более сложный ответ, чем другой, но, поскольку вы уже указали, я просто предоставляю альтернативу. Надеюсь, что OP может узнать, как такая функциональность может стать многоразовой.