Mi codigo actual
<div class="all_steps">
<a data-clickado="false" class="step_block" href="https://www.youtube.com/channel/" target="_blank" rel="nofollow noreferer" data-clickado="false">
<div style="background-image:url('https://i.imgur.com/DhSqcGy.png')" class="step_left"></div>
<div class="step_content"><h2 style="text-align:left;">Subscribe</h2>
<p style="text-align:left;">Subscribe to <?php echo $refername; ?> to proceed.</p>
</div><div class="step_arrow"></div>
</a>
<br>
<a data-clickado="false" class="step_block" href="https://twitter.com/intent/follow?" target="_blank" rel="nofollow noreferer">
<div style="background-image:url('https://i.imgur.com/TlYkMkc.png')" class="step_left"></div>
<div class="step_content"><h2 style="text-align:left;">Follow</h2><p style="text-align:left;">Follow <?php echo $refername; ?> to proceed.</p></div><div class="step_arrow"></div></a> </div>
<br>
<form action="<?php echo $result["shortenedUrl"] ?>">
<button id="buttone" disabled="true" style="background-color:#26a69a;" target="_blank" class="btn waves-effect waves-light" type="submit" name="action">Proceed to target site</button>
</form>
<div class="card_share">
</div>
</div>
</section>
<?php
require('inc/service.php');
require('inc/footer.php');
?>
<script language="javascript">
window.addEventListener('load', () => {
// Cuando la pagina termine de cargar, anadimos los eventos a los botones.
document.querySelectorAll('a[data-clickado]').forEach(el => {
el.addEventListener('click', activar);
});
});
function activar(e){
let salir = false;
e.target.dataset.clickado = true; // Guardamos el data para saber que el boton ha sido activado
document.querySelectorAll('a[data-clickado]').forEach(el => {
if (!salir && el.dataset.clickado === 'false') {
salir = true; // En caso en que falte un boton por activar avisamos a la variable
}
});
if (!salir) document.querySelector('#buttone').disabled = false; //activamos el boton si esta todo bien
}
</script>