0

I made a post last night about centering the text and the button itself and I appreciate getting great feedback that solved the problem. Now I'm having a different issue, the button wont function on mobile for some reason? It was working fine last night when I tested it out but just now when I tried to apply it on another page it wasn't functioning on mobile. The button appears on mobile but it just wont do anything upon clicking it. There's no issue like this on desktop though, so I'm a bit confused. I'll paste the entire code below.

Take a look and see if you can help,

Thanks.`

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#more {display: none;}
</style>
</head>
<body>


<span id="dots"></span><span id="more" style=color:black;>Example Text</span></p>
   <div style="text-align:center"> <button onclick="myFunction()" id="myBtn" style=color:white;background-color:black;>Lyrics</button></div>

<script>
function myFunction() {
  var dots = document.getElementById("dots");
  var moreText = document.getElementById("more");
  var btnText = document.getElementById("myBtn");

  if (dots.style.display === "none") {
    dots.style.display = "inline";
    btnText.innerHTML = "Lyrics"; 
    moreText.style.display = "none";
  } else {
    dots.style.display = "none";
    btnText.innerHTML = "Read less"; 
    moreText.style.display = "block";
   moreText.style.textAlign = "center";
 //  btnText.parentElement.style.textAlign = "center";
  }
}
</script>

</body>
</html>

`

Adrian
  • 63
  • 8
  • why don;t you have quotes around your style attribute on the button? – epascarello Oct 02 '18 at 03:44
  • I worked briefly with webviews in the past, and one issue that popped up is that (and this was different in ios and android) in one of them onclick wasn't fired (I had to use ontouchstart). On the other one of them, both were fired, so using both onclick and ontouchstart meant the callback was invoked twice. Because the webview was just an experiment I never fully solved this, but this link seems mildly interesting: https://joshtronic.com/2015/04/19/handling-click-and-touch-events-on-the-same-element/ – rsalmeidafl Oct 02 '18 at 03:45
  • I have run your code on my local machine, and in both desktop and mobile, it works just fine. – Jiachen Guo Oct 02 '18 at 03:46
  • I took those out because when quotes were inserted the rest of the code appeared red - and I'm not too familiar with coding but I'm pretty sure that indicates an error. So when I took them out, I got no error message. Again - I'm not familiar with coding at all. It just seemed to work when i removed them. Hope that answered your question. – Adrian Oct 02 '18 at 03:47
  • Jiachen, I'll paste a link to my page where the button is present and could you see if it's working on your end? It's not on mine (on mobile), here is the link: https://real97entertainment.com/pages/lil-pump-feat-kanye-west-and-adele-givens-i-love-it – Adrian Oct 02 '18 at 03:50
  • rsalmeidafl, I read on that before but I'm not sure how I would implement that into the code. Thanks for your input. – Adrian Oct 02 '18 at 03:54
  • @Adrian assuming your code works on desktop, you could start by simply putting `ontouchstart="myFunction()"` and see it this makes it work on mobile. If it does, then at least you now it is related to the "click" behaving different on mobile. If it doesn't, then what I posted is not useful and the problem lies somewhere else ;-) Either way, a correct solution (on web, iOS and android) will likely require you to code more on the lines of what GMaiolo's suggested. So it may take some extra time now before you understand everything, but it will pay off :-) – rsalmeidafl Oct 02 '18 at 04:44
  • @rsalmeidafl, would I be inserting this on any line or removing something in the code and replacing it with what you have provided? – Adrian Oct 02 '18 at 04:55
  • just put it beside onclick, so your button will be something like ` – rsalmeidafl Oct 02 '18 at 05:05
  • Didn't seem to work :/ – Adrian Oct 02 '18 at 05:36

1 Answers1

1

You have a couple of problems with your HTML, I'll comment them below:

<span id="dots"></span>
<!-- no quotes in the style attribute -->
<span id="more" style=color:black;>Example Text</span>
<!-- closing inexistent p tag -->
</p>
<div style="text-align:center">
  <!-- no quotes in the style attribute -->
  <button onclick="myFunction()" id="myBtn" style=color:white;background-color:black;>Lyrics</button>
</div>

Once fixed all of the above, I'll mention that it's a bad practice to use onclick, and you should use Element.addEventListener with the click event like so:

var btn = document.getElementById("myBtn")
btn.addEventListener("click", myFunction)

All that said, here's a working JSFiddle

GMaiolo
  • 4,207
  • 1
  • 21
  • 37
  • Hey GMaiolo, I appreciate you taking a look and including the code. I entered this into my website and the button seems to work in regards to "Clicking" but the design of the button is scrapped and it won't show the "Example Text" that is hidden. If you want to see how your code looks on mobile here's the link: https://real97entertainment.com/pages/lil-pump-feat-kanye-west-and-adele-givens-i-love-it – Adrian Oct 02 '18 at 04:12
  • You can add the styles you want and change them as you please. – GMaiolo Oct 02 '18 at 04:22
  • The design in your code is how I want it, and it's the same I used - but when I entered the code it came out different and the functionality of the button does not work. – Adrian Oct 02 '18 at 04:24
  • Do not copy paste, try to understand what's going on and change accordingly. My answer was explanatory for you to understand how to do what you need, but not a step-by-step guide. – GMaiolo Oct 02 '18 at 04:28
  • Ah I see. Well I'm not familiar with coding at all so I would sorta need a step-by-step :/ preferably within HTML and not using CSS or JS. – Adrian Oct 02 '18 at 04:30
  • 1
    Please check the rules regarding [what to ask and what to expect here](https://stackoverflow.com/help/on-topic) – GMaiolo Oct 02 '18 at 04:45