AMP Tap-Ereignis Ändern Sie den Inhalt des Attributs Wert

Question

Hallo!

Ich benutze Amp-Bind-Methode. Ich verfolge den Klick eines Knopfes. Ich rufe das modale Fenster auf. Damit alles in Ordnung. Als nächstes möchte ich den Inhalt des Eingabewertattributs ändern. Nimm den Wert von der Schaltfläche, die das Ereignis ausgelöst hat.

Mein Code:

.amp-lightbox { 
 
    background: rgba(0, 0, 0, 0.8); 
 
} 
 

 
.amp-lightbox__content { 
 
    background-color: #fff; 
 
    position: absolute; 
 
    top: 50%; 
 
    transform: translate(-50%, -50%); 
 
    left: 50%; 
 
    max-width: 550px; 
 
    width: 90%; 
 
}

<script async src="https://cdn.ampproject.org/v0.js"></script> 
 
<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script> 
 
<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script> 
 
<script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script> 
 

 
<amp-lightbox id="amp-lightbox" layout="nodisplay" class="amp-lightbox"> 
 
    <div class="amp-lightbox__content"> 
 
    <form id="form-modal" action-xhr="amp-mail.php" target="_top" method="post"> 
 
     <input type="text" name="id" [value]="customvalue"> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure 
 
     dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
    </form> 
 
    </div> 
 
</amp-lightbox> 
 

 
<button value="2654" on="tap:amp-lightbox, AMP.setState({customvalue: event.value})" class="button">Order</button>

werde ich viele Knöpfe haben, und ein modales Fenster. Ich muss einen Wert von der Schaltfläche nehmen, die das Ereignis verursacht hat, und es in das modale Fensterelement schreiben. Wie kann ich das tun?

Vielen Dank im Voraus!

Answer 1

Um den Wert einer Schaltfläche (oder ein anderes Element angeklickt) verwenden Sie diesen Code zu erhalten:

<button id="test" value="1234" onclick="recover(value,id)">Lorem</button> 
 
<script> 
 
    function recover(value,id) { 
 
    alert(value); 
 
    document.getElementById(id).value = "Your value HERE"; 
 
    } 
 
</script>

Answer 2

Ich bin nicht wirklich sicher, wenn Sie value als Attribut für button verwenden können Es gibt keine Erwähnung in der docs. Wenn Sie jedoch mehrere Schaltflächen verwenden möchten, können Sie den Wert für jede Schaltfläche einfach direkt im festgelegten Status festlegen.

.amp-lightbox { 
 
    background: rgba(0, 0, 0, 0.8); 
 
} 
 

 
.amp-lightbox__content { 
 
    background-color: #fff; 
 
    position: absolute; 
 
    top: 50%; 
 
    transform: translate(-50%, -50%); 
 
    left: 50%; 
 
    max-width: 550px; 
 
    width: 90%; 
 
}

<script async src="https://cdn.ampproject.org/v0.js"></script> 
 
<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script> 
 
<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script> 
 
<script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script> 
 

 
<amp-lightbox id="amp-lightbox" layout="nodisplay" class="amp-lightbox"> 
 
    <div class="amp-lightbox__content"> 
 
    <form id="form-modal" action-xhr="amp-mail.php" target="_top" method="post"> 
 
     <input type="text" name="id" [value]="customvalue"> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure 
 
     dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
    </form> 
 
    </div> 
 
</amp-lightbox> 
 

 
<button on="tap:amp-lightbox, AMP.setState({customvalue: '2654'})" class="button">Order 2654</button> 
 

 
<button on="tap:amp-lightbox, AMP.setState({customvalue: '2655'})" class="button">Order 2655</button> 
 

 
<button on="tap:amp-lightbox, AMP.setState({customvalue: '2656'})" class="button">Order 2656</button>