style.display = "block" wird nicht auf das heißt und Chrom arbeiten

Question

Ich brauche die Form zu verstecken auf

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

vorlegen und zeigen das Spiel "Pacman"

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

Ich bin mit style.display Eigenschaft zu verstecken und die div zu zeigen und die 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 und IE:

aber auf Firefox:

Ich habe beherbergte es auch auf einem Server und überprüft. Aber mit dem gleichen Ergebnis. Was ist los? Überprüfen Sie meinen Code auf Github

Answer 1

Da Sie bereits jQuery haben, ist es nicht sinnvoll, noch einen Ersatz für document.getElementById zu schreiben. Mischen Sie DOM und jQuery nicht so.

Sie wollen wahrscheinlich dieses

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

UPDATE tun: Das ist ein sehr gutes Beispiel für die X/Y-Problem.

HIER ist Ihr Problem:

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

var el = document.getElementById("pacman") 

und später:

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"); 

schafft

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

in Chrome direkt nach dem "sichtbar machen" div! Verwenden Sie setTimeout

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

Answer 2

+1 für mplungjan offenbaren nur jQuery verwenden, um Ihre DOM-Elemente zu manipulieren:

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

Ich schlage vor, immer jQuery besser kennen zu lernen, ist vielleicht hier ein guter Anfang:

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

Answer 3

Der Täter war dieser Code in der init() Funktion:

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

wo Wrapper = div # Pacman. Das Attribut offsetWidth wurde 0, wenn style.display auf "none" gesetzt wurde. Also, Hinzufügen

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

hat den Job gemacht.