0

In my site, everything is working well on the desktop version but when I switch to the mobile version a button only works once. It doesn't do anything after 1 click.

If I press enter it works fine, but pressing on the button won't trigger the button again. I specifically don't want my page to reload.

onClick not working on mobile (touch)

This answer involves reloading the page.

$("#quiz").on('touchstart click', 'button', function(e){
    e.preventDefault(); 
   
});
<h1 class="title">Quote Game!</h1>
<div class="container">
    <form id="quiz" name="quiz" autocomplete="off"><br>
        <container class="cont1">
            <p class="questionp">Which hero does this quote belong to? </p>
            <div class="row">
                <!--<div class="form-group float-label-control">-->
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    <p class="question"  id="questionquote"></p>  
                </div> 

                <div class="col-6 col-lg-2 col-md-2 col-sm-2 col-xs-2 ">
                    <p id = "number_correct" class="green"></p>
                </div>
        
                <script class="score">document.getElementById("number_correct").innerHTML = "Your Score: " + correct;</script>
             
                <div class="col-6 col-lg-2 col-md-2 col-sm-2 col-xs-2">
                    <!-- <img src="transparent.gif" height="90" width="90" class="pull-right"> penguin picture-->
                </div>

                <input class="form-control" id="question1" name="question1" placeholder="Hero Name" onclick="IsEmpty();"  >
                <br> </br>

     
                <!--<input class="answer" id="question1" name="question1"></input><br> </br>-->
       
                <div class="col-6 col-lg-2 col-md-2 col-sm-2 col-xs-2">
                    <!--<input id="button" class="btn btn-primary" type="submit" value="Check" onclick = "check(); ">-->
                    <button id ="button" value="Check" class="btn btn-primary " onclick = "check(); ">Check</button>
                </div>
            </div>
        </container>
    </form>
        
    <div  class="text-center">
        <img id="result" class="correct_answer" src="" height="350" width="90%">
    </div>
</div>
Justin
  • 154
  • 1
  • 17
Alaa
  • 13
  • 1
  • 6
  • 1
    What is mobile mode? – duhaime Jul 26 '18 at 15:49
  • @duhaime opening your browser on a mobile, for example using phonegap if it's not online also you can use google chrome there's a toggle device thingy when inspecting a page, to try and view it as if you're on mobile. – Alaa Jul 26 '18 at 15:51
  • ah, it sounds like you mean the device viewport has a small width. It's uncommon to speak of a "mobile mode", perhaps because mobiles come with all sorts of screen sizes and widths... – duhaime Jul 26 '18 at 18:56
  • also, your code sample has come errors in the console -- if you resolve those others will have an easier time helping you... – duhaime Jul 26 '18 at 18:57

2 Answers2

0

Tried your code under Chrome 68 for Android and the button is working everytime. However, a few hints:

  • Use addEventListener (or jQuery.on()) rather than using inline javascript in HTML.

  • If what you want is to not submit the form after running your code, you can use return false instead of e.preventDefault().

  • I don't get the point on attaching an event handler to the form only to filter it to the button and adding another inline javascript function to the button itself. If what you want is to call two different functions at once, use one function to call both.

Jcey
  • 11
  • 3
  • I've ran the code on chrome mobile mode and two different android devices the button is not clickable it works fine on desktop mode only, are you sure you changed it to mobile? I think it has something to do with it being touch screen. I want it to submit just not reload the page, also do you need the code of the check function I didn't add it, it might be helpful? – Alaa Jul 26 '18 at 16:14
  • I didn't need to change it, I tried it with my smartphone. The default type for the "Button" type is submit, and submitting a form means sending the data to the form action URL. The default action is the current URL, that's why it redirects to the current page. What you need to do is just as @Nils explained, and take care of the data with javascript, without actually submitting the form. – Jcey Jul 26 '18 at 16:38
0

try setting button type to button (instead of submit) that way the button won't be disabled by browser after a click

<button type="button" id ="button" value="Check" class="btn btn-primary " >Check</button>

also, e.preventDefault is not needed anymore and you'll have to submit this form with js if you wan't to

Nils
  • 307
  • 3
  • 10
  • Wouldn't this reload the page whenever I click on the button? – Alaa Jul 26 '18 at 16:26
  • no, type="button" basically make the button useless. also, if you handle the click events with jquery it would be better to call check() in your jquery event handler instead of the onclick attribut – Nils Jul 27 '18 at 12:53
  • $(function(){ $('#button').click(function() { check(); }); }); This is the jquery I used, still nothing changed one click only and now if I press the enter button if im highlighting the text box area it refreshes the page. – Alaa Aug 01 '18 at 19:21