Search code examples
htmlcssamp-htmlamp-bind

amp bind change state with button

I have this code: 

 <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>

I want to change the state of

when the button is clicked but it happens one time. I mean, if i click once the

the color is changed but when i click second time the color is not changed.

Do you have any idea to change the color all the time when the button is clicked?

Solution

  • I found the solution. Just remove the object 'text' on p tag. See below:

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