Can someone help me with a couple of issues I'm facing?
I'm working on an assignment where I need to populate a square grid with small square divs, similar to pixels. However, when there are more than 51 squares in a row, they suddenly start having margins and overflow the grid wrapper div. I've tried resetting all margins in the CSS to 0 and even using negative margins, but the issue persists. What could be causing this?
The second problem involves calling a JavaScript function on a button click. When I use jQuery's
on()function to bind the function to the button, it works fine in JSfiddle but not in my browser (I'm using Chromium). I have to resort to usingonclickdirectly in the button's HTML tags for it to work. Why is that happening?
I suspect these code snippets might be causing the issues:
function reset() {
var new_size = prompt('Enter a new amount of squares in a row');
populate(new_size);
}
$('#reset').on('click', function () {
reset();
})
This piece of code should handle the reset functionality for the button, but it only seems to work in JSfiddle.
For the browser, I had to resort to:
<input id="reset" onclick='reset();' type="submit" value="Reset">
Additionally, here's some relevant CSS:
* {
margin-bottom: -4px;
}
.wrapper {
width: 960px;
height: 960px;
margin: 0 auto;
border-style: solid;
border-width: 1px;
}
.square {
border-style: none;
border-width: 1px;
display: inline-block;
background-color: white;
}
Even after attempting to reset the margins to 0, I had to resort to using a negative value.
I appreciate any assistance regarding these issues. Thank you.