Изменение состояния усилителя с помощью кнопки

У меня есть этот код:

 <style amp-custom>

  .plus, .mius {
    width: 50px;
    height: 50px;
   }

   .plus {background-color: blue;}
   .mius {background-color: green;}

</style>
<body>
<amp-state id="text">
  <script type="application/json">
    {
      "textspan1": "plus"
    }
  </script>
</amp-state>

     <p [text]="text.textspan1=='plus'?'mius':'plus'" 
     [class]="text.textspan1=='plus'?'mius':'plus'" class="plus"></p>

    <button on="tap:AMP.setState({textspan1: (textspan1 == 'plus' ? 'mius' : 
    'plus')})">puls</button>

</body>

Я хочу изменить состояние

когда кнопка нажата, но это происходит один раз. Я имею в виду, если я нажму один раз

цвет меняется, но когда я нажимаю второй раз, цвет не меняется.

У вас есть идея менять цвет все время, когда кнопка нажата?

Источник

2 ответа

Решение

Я нашел решение. Просто удалите объект "текст" на теге p. Увидеть ниже:

   <p [text]="textspan1=='plus'?'mius':'plus'" 
      [class]="textspan1=='plus'?'mius':'plus'" class="plus"></p>
Источник

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

<button on="tap:AMP.setState({toggled: !toggled})">toggle</button>

Государство отрицает себя каждый раз, когда на него нажимают.

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

<p [text]="toggled ? 'mius' : 'plus'" 
   [class]="toggled ? 'mius' : 'plus'" class="plus">plus</p>

Примечание: вам не нужно инициализировать каждое состояние с <amp-state> тег. Это необходимо, только если вам нужен доступ к сохраненным значениям даже без какого-либо взаимодействия.

Источник

Будет ли этот код работать?

function changeColor() {
  runFunction0 = runFunction;
  runFunction = runFunction0 + 1;

  if (runFunction / 2 != Math.round(runFunction / 2)) {
    document.getElementById("area").className = "mius";
  } else
  if (runFunction / 2 == Math.round(runFunction / 2)) {
    document.getElementById("area").className = "plus";
  }

}

var runFunction0
var runFunction = 0;
.plus,
.mius {
  width: 50px;
  height: 50px;
}

.plus {
  background-color: blue;
}

.mius {
  background-color: green;
}
<body>
  <amp-state id="text">
    <script type="application/json">
      {
        "textspan1": "plus"
      }
    </script>
  </amp-state>

  <p id="area" [text]="text.textspan1=='plus'?'mius':'plus'" [class]="text.textspan1=='plus'?'mius':'plus'" class="plus"></p>

  <button on="tap:AMP.setState({textspan1: (textspan1 == 'plus' ? 'mius' : 
    'plus')})" onclick="changeColor();">puls</button>

</body>

Источник
Другие вопросы по тегам