Я пытаюсь изменить стиль кнопки с машинописным текстом - PullRequest
Новая
       0

Я пытаюсь изменить стиль кнопки с машинописным текстом

0 голосов
/ 16 июня 2020

пытаюсь сделать таймер; просто простой таймер HTML. Теперь я пытаюсь сделать так, чтобы первая кнопка (button1) меняла цвет фона кнопки на # 0000FF, если var button1 (переменная, определяющая, что говорит кнопка), является «Пауза» и на # 00FF00 если var button1 - это что-то еще. Вот мой HTML (примечание: я использую angular, поэтому это может выглядеть немного странно): 

<!DOCTYPE html>
<html>
  <div class="screen">
    <div class="timer">
      00:00:00
    </div>

    <div class="buttons">
      <button class="button1" id="buuton" onclick="timeout(40, 1)">
        {{button1}}
      </button>
      &nbsp;
      <button class="button2">
        {{button2}}
      </button>
    </div>
  </div>
</html>

Вот мой машинописный текст (опять же, может выглядеть немного странно): 

timeLeft: number //Time left in milliseconds
currTime: number //Time on stopwatch in milliseconds
button1: string //Button 1
button2: string //Button 2
timeout (ms: number, func: number) {
  setTimeout(() => {
    if (func == 0) {
      null
    } else if (func == 1) {
      if (this.button1 == "Pause") {
        document.getElementById("buuton").style.backgroundColor = "#0000ff"
      } else {
        document.getElementById("buuton").style.backgroundColor = "#00ff00"
      }
    }
  }, ms);
}

А вот мой CSS: 

.timer {
  height: 3.5em;
  line-height: 3em;
  display: block;
  margin-top: 2em;
  margin-bottom: 1em;
  margin-left: 0.33em;
  font-weight: bolder;
}
.buttons {
  height: 1em;
  line-height: 1.5em;
  margin-top: 0.1vh;
  margin-bottom: 2em;
  margin-left: 0.33em;
}
.screen {
  position: fixed;
  height: 93.5vh;
  width: 99vw;
  left: 0.5vw;
  top: 0.5vh;
}

Не знаю, что делаю не так. Не могли бы вы мне помочь? Редактировать 1 (16 июня 2020 г., 10:49:39) - Нет, сообщений об ошибках не было.

1 Ответ

0 голосов
/ 16 июня 2020

Как упоминалось в @CodeMonkey, вместо этого измените прослушиватель событий onclick на (click). При привязке события в Angular, мы подключаем прослушиватель событий, чтобы получать уведомления всякий раз, когда событие запускается . Angular docs

Поскольку вы используете Angular, обновление прослушивателя событий кликов для <button> до (click)="timeout(40, 1)" устраняет проблему. Заключение прослушивателя событий click в круглые скобки означает, что свойство компонента связано с событием click. 

<!DOCTYPE html>
<html>
  <div class="screen">
    <div class="timer">
    00:00:00
  </div>

  <div class="buttons">
    <button class="button1" id="buuton" (click)="timeout(40, 1)">
      {{button1}}
    </button>
    &nbsp;
    <button class="button2">
      {{button2}}
    </button>
  </div>
</div>

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...