JSFiddle - React, Tailwind, and code Playground

by wisegorilla

HTML

<div class="signupContainer">


       		
                
                <h1 class="spin">Gewinne dein Oster-Geschenk!</h1>
                <p>Gib deine E-Mail-Adresse ein, um dir dein Geschenk zu sichern!*
<br><br>
*Minis sind von der Aktion ausgeschlossen</p>

                                
                  <span>
                  	<input type="email" name="email" value="" data-placement="bottom" title="" id="email" placeholder="E-Mail" class="email" data-original-title="Bitte verwende eine gültige E-Mail-Adresse">
                  </span>
 
                  <div class="action-group">
                  <button class="spinBtn"><i class="fa fa-spinner" aria-hidden="true"></i>Drehen!</button>
                  <br>
                  <a href="javascript:;" class="closeWheel">Schließen</a>

                  <span class="spinTrigger"></span>
                  </div>

 
        
        </div>

JavaScript

window.addEventListener('load', () => {
const submitWrap = document.querySelector('.signupContainer .action-group');
const spinBtn = document.querySelector('.spinBtn');
const acceptText = 'Ich stimme zu, Benachrichtigungen von MICARAA zu erhalten.*'

const acceptInfo = 'MICARAA verpflichtet sich, deine Privatsphäre zu schützen und zu respektieren. Du kannst diese Benachrichtigungen jederzeit abbestellen. Weitere Informationen zum Abbestellen, zu unseren Datenschutzverfahren und dazu, wie wir deine Privatsphäre schützen und respektieren, findest du in unserer Datenschutzrichtlinie.';

const checkbox = `
<div>
  <input type="checkbox" id="spin-accept" name="spin-accept" required>
  <label for="spin-accept">Ich stimme zu, Benachrichtigungen von MICARAA zu erhalten.*</label>
</div>
`;

spinBtn.disabled = true;

submitWrap.insertAdjacentHTML('beforebegin', checkbox);
const accept = document.getElementById('spin-accept');

accept.addEventListener('change', () => {
console.dir(spinBtn);
  if (accept.checked == true){
   spinBtn.disabled = false;
  } else {
    spinBtn.disabled = true;
  }
})

})