This is my code.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Pixel Art Maker!</title>
<link rel="stylesheet" href="styles.css">-->
<script src="jquery-3.2.1.min.js"></script>
<script src="designs.js"></script>
</head>
<body>
<h1>Lab: Pixel Art Maker</h1>
<h2>Choose Grid Size</h2>
<form id="sizePicker">
<b>Grid Height:</b>
<input type="number" id="input_height" name="height" min="1" value="1">
<b>Grid Width:</b>
<input type="number" id="input_width" name="width" min="1" value="1">
<input type="submit" id="submit">
</form>
<h2>Pick A Color</h2>
<input type="color" id="colorPicker">
<h2>Design Canvas</h2>
<table id="pixel_canvas"></table>
</body>
</html>
$(document).ready(function(){
$('#submit').click(function makeGrid() {
var height = $('#input_height').val();
var width = $('#input_width').val();
var table = $('#pixel_canvas');
for (var i = 1; i <= height; i++ ) {
var row = table.append('<tr></tr>');
for (var j = 1; j <= width; j++) {
row.append('<td></td>');
}
}
});
});
The issue here is (as I've written in the post name) that jQuery is not displayed in my browser on the local machine (PC). I've posted this coded on different sites and on all of them with the exception of
https://www.w3schools.com did not show the expected result. I also tried to mingle in the HTML code and switched the <script>...</script> tags for the library and local jQuery code from the <body> to the <head> and vice-versa and nothing happens, PLEAS HELP ME! Thx!