Search code examples
eventsradio-buttontimeout

mobile devices dont see radio button onchange

I have 2 buttons on a pop up ad and depending on what they select do totally different things. However they dont seem to work on mobile. I cant figure out and alternative. Also I would like a delay of like 2 sec before the action but im not sure how to use timeout in this situation. I tired to use onkeyup but that did not work nor does onclick.

<div class="modal-content">
<span class="close">&times;</span>                       
<div class="radcen">  
<input type="radio" id="yes" value="Yes" onchange="window.location.href = 'https://www.example.com/';"><label class="free-label four col" for="yes">Yes</label>
<input type="radio"id="no" value="No" onchange="myModal.style.display = 'none'"><label class="basic-label four col" for="no">No</label>
</div>
</div><!-- Modal content -->

and the script

var modal = document.getElementById("myModal");


// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When page loads display pop up
window.onload = function() {
  modal.style.display = "block";
}



// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
Solution 
  • <!DOCTYPE html>
<html>
<body>
<div class="radcen">  
<input type="radio" name="maincov" id="yes" value="Yes"><label class="free-label four col" for="yes">Yes</label>
<input type="radio" name="maincov" id="no" value="No"><label class="basic-label four col" for="no">No</label>
</div>
<div id="myModal" class="modal">
mod content
</div>
<script>
//radio  timeout
let timeout;
var modal = document.getElementById("myModal");
document.getElementById("yes").addEventListener("change", yestime);
document.getElementById("no").addEventListener("change", notime);
function notime(){timeout = setTimeout(no, 300);}
function yestime(){timeout = setTimeout(yes, 300);}
function no(){modal.style.display = "none";}
function yes(){window.location.href = 'https://www.example.com/';}
</script>   
</body>
</html>