Javascript in Codepen works on desktop not on mobile

Question

Using Codepen.

When the form submit button is pressed, JavaScript instructs my 'result' div to become visible (by removing the 'hidden' attribute):

const form = document.getElementById("form")

form.addEventListener('submit', function(event) {
  const result = document.getElementById("result");

  result.removeAttribute("hidden");

  event.preventDefault();
})

<form id="form">
  <input type="submit" value="Submit">
</form>

<div hidden id="result">Result</div>

Works absolutely fine on Desktop. Press the button and the word 'Result' appears. Doesn't work on mobile - the word doesn't appear.

UPDATE: I should add - this issue is only reproduced on Codepen. When I run this code here on stack overflow on mobile it works fine. So the issue must be Codepen related? I haven't changed any of the Codepen defaults to get this issue

Which mobile browser?

evolutionxbox
– evolutionxbox

2024-04-26 13:28:57 +00:00
Commented Apr 26, 2024 at 13:28 — evolutionxbox
– evolutionxbox, Commented Apr 26, 2024 at 13:28
Android, Chrome

user24195744
– user24195744

2024-04-26 13:38:37 +00:00
Commented Apr 26, 2024 at 13:38 — user24195744
– user24195744, Commented Apr 26, 2024 at 13:38
Please post the codepen - the code works here

mplungjan
– mplungjan

2024-04-29 05:20:11 +00:00
Commented Apr 29, 2024 at 5:20 — mplungjan
– mplungjan, Commented Apr 29, 2024 at 5:20

mplungjan · Accepted Answer · 2024-04-26 13:27:24Z

0

Your script works fine on iPhone - perhaps an Android issue?

Let's however move the preventDefault and change the removeAttribute to setting hidden false which is simpler code

const form = document.getElementById("form")
const result = document.getElementById("result");
form.addEventListener('submit', function(event) {
  event.preventDefault();
  result.hidden = false;
})

<form id="form">
  <input type="submit" value="Submit">
</form>

<div hidden id="result">Result</div>

answered Apr 26, 2024 at 13:27

mplungjan

180k29 gold badges183 silver badges246 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user24195744 Over a year ago

Did you try in Codepen? This snippet also worked for me in Android here on Stack Overflow. Is it something about the iframe that Codepen adds or something...?

user24195744 Over a year ago

And thank you for the tips on simplifying my code

mplungjan Over a year ago

I think we lost or never had your codepen link?

Collectives™ on Stack Overflow

Javascript in Codepen works on desktop not on mobile

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related