David Lett David Lett - 3 months ago 8
jQuery Question

Created jquery rows but nothing displays nor does the on('hover') method work

I'm creating an Etch A Sketch for a programming project. The default button adds rows, however nothing appears on my screen, but the dev tools show the rows as being created. I've tried changing the margin,padding,etc still nothing. Also, the button's second set of events is never triggered properly, it will just highlight all the rows black instead of allowing me to change them as i hover over them.
https://lettda.github.io/EtchAsketch/

UPDATE: Display has been resolved ('.' in front of newRow in html removed), fixing the hover event is the only problem

$(document).ready(function () {

var i;

function gridCreate (){
$('.grid').empty();

var userNum = prompt("How big do you want your grid?");

for (var i = 0; i < userNum; i++) {
$('.grid').append("<div class = 'newRow'></div>");
}
for (var i = 0; i < userNum; i++) {
$('.newRow').append("<div class='square'></div>");
}

var newWidth = $('.square').width() * i;
$('.newRow').width(newWidth);
$('.grid').width($('.newRow').width());

var newHeight = $('.square').height() * i;
// $('.newRow').height(newHeight);
$('.grid').height($('.newRow').height());
};


$('.normal').on("click", function(){
gridCreate();
// $('.square').unbind();
$('.square').on("hover", function(){
$(this).css('background-color', 'red');
});
});
});


CSS:

.grid {
margin: 50px auto 0 auto;
border: 1px solid black;
}
.newRow {
margin-left: 0 !important;
margin-right: 0 !important;
}

.square {
height: 1.5rem;
width: 1.5rem;
background-color: black;
display: inline-block;
margin: 0px;
}
.navbar-brand {
text-align: center;
float: none !important;
}
.navButtons {
margin: 0 auto;
text-align: center;
}

Answer

So there's a few issues here.

  1. ClassNames can't start with '.' (See W3 CSS Grammar Rules). Set class='myClassName' without any dots and perform a jQuery lookup with only one '.'.
  2. There are no margins in your CSS, so squares will appear to be one wide row. See below for a potential CSS solution.
  3. In this case, multiplying i for generating dimensions doesn't break anything, but code shouldn't rely on quirky issues in JS, I'd suggest being more explicit and referencing the userNum variable already defined in scope.
  4. Listener events can only be added to DOM elements after they've been appended to the DOM not before, so async-wise that listener never triggers. You need to add the listeners after the squares were added.
  5. hover isn't a real event type. You'd want to use jQuery's .hover()

Here's some alternative JS I'd suggest.

$(document).ready(function () {
  function gridCreate (){
    $('.grid').empty();

    var userNum = prompt("How big do you want your gid?");

    for (var i = 0; i < userNum; i++) { 
      $('.grid').append("<div class ='newRow'></div>");
    }
    for (var i = 0; i < userNum; i++) {
      $('.newRow').append("<div class='square'></div>");
    }

    var newWidth = ($('.square').width()+10) * userNum;
    $('.newRow').width(newWidth);
    $('.grid').width($('.newRow').width());

    var newHeight = $('.square').height() * userNum;
    $('.grid').height($('.newRow').height());

    $('.square').hover(function(){
      $(this).css('background-color', 'red');
    });
  };
  $('.normal').on("click", function(){
      gridCreate();
  });
});

To resolve the square spacing issue, you'd also need to add some margins to them so they don't look like one long black bar.

.square { margin:0 5px;}

Here's a working JSFiddle demo.

Comments