JavaScript全局变量不变吗？！

Question

I am working on the Odin project's javascript/jquery project to make an etcha sketch(of sorts). 我正在Odin项目的javascript / jquery项目上制作一个etcha草图。 Initially the webpage loads fine, but when I attempt to change the size of the "gridval" with a prompt, only the box sizes change but not how many boxes fill the given space. 最初，网页可以很好地加载，但是当我尝试通过提示更改“ gridval”的大小时，仅框的大小会更改，而填充给定空间的框却不会更改。

Thanks for your help in advance. 感谢您的帮助。

HTML 的HTML

<!DCOTYPE html>
<html>
<head>
    <title>Java Project</title>
    <link rel="icon" href="https://www.codementor.io/assets/page_img/learn-javascript.png">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script src="js/script.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

</head>
<body>
    <button class="clear_button">Clear screen</button>
    <div id="container"></div>
    <script>creategrid();</script>
    <script>hovereffect();</script>
</body>
</html>

CSS 的CSS

#container{
    width:400px;
    height:400px;
    background-color: #fc6;
}
.box{
    width:52px;
    height:52px;
    display:inline-block;
    margin: 1px;
    background-color: #f86;
}
.clear_button{
    background-color: #fc6;
    color: #ffe;
    border:none;
    border-radius: 2px;
    padding: 10px;
    margin: 10px;
}
.clear_button:hover{
    background-color: #426;
}

JavaScript 的JavaScript

gridval = 16;
function creategrid(){
    $(document).ready(function(){
        //make grid code
        for(var x = 0; x < gridval; x++){
            for(var y = 0; y < gridval; y++){
                var box = $("<div class='box'></div>");
                box.appendTo('#container');
            }
        }
        var width_height = 400/gridval - 2;
        var box_class = document.querySelectorAll(".box");
        for(var i = 0; i < box_class.length; i++){
            box_class[i].style.width = width_height;
            box_class[i].style.height = width_height;
        }
        //clear button code
        $(".clear_button").click(function(){
            $(".box").css("background-color", "#f86");
            var val = gridval;
            gridval = prompt("Please enter a value between 2 and 100 for the grid size!", val);

            if(gridval != null) {
                var width_height = 400/gridval - 2;
                var box_class = document.querySelectorAll(".box");
                for(var i = 0; i < box_class.length; i++){
                    box_class[i].style.width = width_height;
                    box_class[i].style.height = width_height;
                }
            }
        });
    });
}
//hover effect code
function hovereffect(){
    $(document).ready(function(){
        $(".box").hover(function(){
            $(this).css("background-color", "#0ba");
        }, function(){
            $(this).css("background-color", "#9dd");
        });
    });
}

Answer 1

Your code needs a total reform, see the comments: 您的代码需要全面改革，请参阅注释：

 //The ready event will only be triggred once; on your page load. $(function() { //Default value var gridval = 16; /** * Create the grid */ function createGrid(gridval) { //make grid code for (var x = 0; x < gridval; x++) { for (var y = 0; y < gridval; y++) { var box = $("<div class='box'></div>"); box.appendTo('#container'); } } var width_height = (400 / gridval) - 2; var box_class = document.querySelectorAll(".box"); for (var i = 0; i < box_class.length; i++) { box_class[i].style.width = width_height+'px'; //You needed +'px' here box_class[i].style.height = width_height+'px'; //You needed +'px' here } } //Execute the function on load createGrid(gridval); //Event delegation on since your elements will be created dynamically $(document).on({mouseenter: function() { $(this).css("backgroundColor", "#0ba");//backgroundColor instead of background-color }, mouseleave: function() { $(this).css("backgroundColor", "#9dd"); }}, ".box"); //clear button code $(".clear_button").click(function() { //$(".box").css("backgroundColor", "#f86"); // you don't need this all the elements will be removed! var val = gridval; gridval = prompt("Please enter a value between 2 and 100 for the grid size!", val); if (gridval != null) { //Empty the container $("#container").empty(); createGrid(gridval); } }); });

 #container { width: 400px; height: 400px; background-color: #fc6; } .box { width: 52px; height: 52px; /* Remove inline block */ display: block; /* Add float*/ float:left; margin: 1px; background-color: #f86; } .clear_button { background-color: #fc6; color: #ffe; border: none; border-radius: 2px; padding: 10px; margin: 10px; } .clear_button:hover { background-color: #426; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button class="clear_button"> Clear screen</button> <div id="container"></div>

JavaScript全局变量不变吗？！

问题描述

1 个解决方案

解决方案1
0 2016-07-21 01:25:53

JavaScript全局变量不变吗？！

问题描述

1 个解决方案

解决方案1 0 2016-07-21 01:25:53

解决方案1
0 2016-07-21 01:25:53