0

I need to hide the form on submit

<form id="details_form" class="form-horizontal" role="form">

and show the game "pacman" 

<div id="pacman"></div>

I'm using style.display property to hide and show the div and the form

$(document).ready(function() {

_("pacman").style.display = "none";

$("form").submit(function(e) {
    _("details_form").style.display = "none";
    if(_("details_form").style.display === "none"){
        _("pacman").style.display = "block";
    }
    return false; // prevents page refresh! :) yay!!
});
});

On Chrome and IE: it doesn't work!

but, on Firefox: works as expected

I've also hosted it on a server and checked. But with the same result. What's happening? Check my code on Github

Srichakradhar
  • 1,535
  • 1
  • 12
  • 24

3 Answers3

1

Since you already have jQuery, it is not useful to write yet another substitute for document.getElementById. Do not mix DOM and jQuery like that.

You likely want to do this

$(function() {
   $("#pacman").hide();
   $("#details_form").on("submit",function(e) {
     e.preventDefault(); // cancel form submission
     $(this).hide();
     $("#pacman").show();
   });
});

UPDATE: This is a very good example of the X/Y problem.

HERE is your issue:

<div id="pacman"></div>

var el = document.getElementById("pacman")

and later:

 blockSize = wrapper.offsetWidth / 19,  // <<<<< this is 0 on some browsers
 canvas    = document.createElement("canvas");

 canvas.setAttribute("width", (blockSize * 19) + "px");
 canvas.setAttribute("height", (blockSize * 22) + 30 + "px");

creates 

<div id="pacman" style="display: block;"><canvas width="0px" height="30px"></canvas></div>

in Chrome right after you "unhide" the div! Use setTimeout to reveal

How do I retrieve an HTML element's actual width and height?

Community
  • 1
  • 1
mplungjan
  • 169,008
  • 28
  • 173
  • 236
  • Why not to mix? A mixed code also have to be solution. Since I don't see any problem in the OP code. – Bhojendra Rauniyar Apr 20 '16 at 05:59
  • I HIGHLY recommend to NOT add existing functionality but standardise. Why use a getElementById replacement when you already have jQuery - not to mention `_` is used by another framework which as you can see from the comments already confused people. – mplungjan Apr 20 '16 at 06:01
  • when I use e.preventDefault(), I lose form validation. So, I return false to prevent a page refresh. Even the above method is not showing the game canvas. Is there a problem with the initialization? 'cuz when I comment $("#pacman").hide(); it shows up well..! – Srichakradhar Apr 20 '16 at 06:03
  • Yeah, I agree. But OP has used own function `_` and seems to be fine for me. – Bhojendra Rauniyar Apr 20 '16 at 06:03
  • the same approach works perfectly well when I don't hide it and after I play the game, once. – Srichakradhar Apr 20 '16 at 06:05
0

+1 for mplungjan just use jQuery to manipulate your DOM elements:

$(document).ready(function() {
            $("#pacman").hide();
            $("form").submit(function(e) {
                $("#details_form").hide();
                if($("#details_form").hide()){
                    $("#pacman").show();
                }
                return false; // prevents page refresh! :) yay!!
            });
        });

I suggest getting to know jQuery better, possibly here is a good start:

  1. https://learn.jquery.com/effects/intro-to-effects/
  2. https://learn.jquery.com/using-jquery-core/manipulating-elements/
0

The culprit was this code in the init() function:

blockSize = wrapper.offsetWidth / 19,
canvas    = document.createElement("canvas");        
canvas.setAttribute("width", (blockSize * 19) + "px");
canvas.setAttribute("height", (blockSize * 22) + 30 + "px");

where, wrapper = div#pacman. The offsetWidth attribute became 0 when style.display was set to "none". So, adding

window.setTimeout(function(){_("pacman").style.display = "none";}, 100);

did the job.

Srichakradhar
  • 1,535
  • 1
  • 12
  • 24