Глобальные переменные Javascript не меняются ?!

Я работаю над проектом javascript/jquery проекта проекта Odin, чтобы сделать эскиз этчей (из рода). Первоначально веб-страница загружается нормально, но когда я пытаюсь изменить размер «gridval» с подсказкой, меняются только размеры ящиков, но не сколько ящиков заполняют заданное пространство.Глобальные переменные Javascript не меняются ?!

Спасибо за вашу помощь заранее.

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

#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

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

источник

2016-07-21 Rowan Baker-French

Ожидаете ли вы, что цикл for снова запустится? – epascarello

Ваш код нуждается в полной реформе см комментарии:

//The ready event will only be triggred once; on your page load. 
 
$(function() { 
 

 
\t //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>

источник

2016-07-21 01:25:53

Большое спасибо, я понимаю, теперь мне нужно, чтобы цикл for запускался каждый раз, когда я нажимаю кнопку. –

Глобальные переменные Javascript не меняются ?!

ответ

Смежные вопросы