Jump to content

studsm

Members
 View Profile  See their activity

  • Posts

    15

  • Joined

  • Last visited

studsm's Achievements

Newbie

Newbie (1/7)

0

Reputation

  1. studsm
    oh my gosh it worked! Thank you so much!
  2. studsm
    Thanks for the reply dsonesuk, I didn't know that you needed to include a parent element that already existed that will help a lot in the future. However it still doesn't seem to be working i'll post what I have now and maybe someone can figure out why. I'm at a total loss here and i'm at a point of just guessing things and nothing seems to be working. <!DOCTYPE html><html><head><style>table, td, tr{margin: 0 auto; border: 1px solid black; border-collapse: collapse; padding: 5px;}td {background-color: #f1f1c1;}table{width: 40%; table-layout: fixed;}td{height: 30px;}</style><script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script><script>$(document).ready(function(){ $("#player1 table td").on('click', function(){ $(this).css('background-color', 'blue'); });});function generateGrid1(row, col){ var text = '<table>'; var cell = 0; for (var j = 0; j < row; j++) { text += '<tr>'; for (var i = 0; i < col; i++) { text += '<td id = "pumped' + cell + '";></td>'; cell++; } text += '</tr>'; } text += '</table>'; document.getElementById('player1').innerHTML = text;}</script></head><body onload='generateGrid1(10,10);'><div id ='player1'></div></body></html>
  3. studsm
    Can anyone tell me what is wrong with this code that it doesn't work? the table generates fine but the background color doesn't change when I click on the td cells <!DOCTYPE html> <html> <head> <style> table, td, tr{margin: 0 auto; border: 1px solid black; border-collapse: collapse; background-color: #f1f1c1; padding: 5px;} table{width: 40%; table-layout: fixed;} td{height: 30px;} </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script> $(document).ready(function(){ $("td").on("click", function(){ $(this).css('background-color', 'red'); }); }); function generateGrid1(row, col) { var text = '<table>'; for (var j = 0; j < row; j++) { text += '<tr>'; for (var i = 0; i < col; i++) { text += '<td></td>'; } text += '</tr>' } text += '</table>' document.getElementById('player1').innerHTML = text; } </script> </head> <body onload='generateGrid1(10,10);'> <div id ='player1'></div> </body> </html>
  4. studsm
    I just recently started using jQuery because it seems like its going to make my life much easier. I was just messing around with the very first example that w3schoos tutorials give and I was coming across what seems to me to be major issues. If anyone can shed some like on why this is happening I would love to know so that I dont waist hours in the future trying to figure out why my code isn't working when its simply in the wrong place. The first example they gave is this. <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script> $(document).ready(function(){ $("p").click(function(){ $(this).hide(); }); }); </script> </head> <body> <p>If you click on me, I will disappear.</p> <p>Click me away!</p> <p>Click me too!</p> </body> </html> Which worked great of course, I then switched the <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> to this <script src ="jquery-1.11.3.min.js"></script> and that worked great to. Now I started testing it with a seperate .js file and the file already had a couple of functions that I had written on it. When I placed the jquery code at the very top of the page it worked fine and the <p>'s all dissapeared when clicked on. but if i placed the jquery code anywhere underneath any of my functions it didn't work at all. I just want to know why this is and how I can avoid placing the code in the wrong place, why it was an issue etc... any light you can shed on the reasoning would be great. I'll post below what I mean if you want to see. And i'll make the jquery code red so you can see where i put it This works fine! $(document).ready(function(){ $("p").click(function(){ $(this).hide(); }); }); var text = "<table class = 'BSGrid'>"; document.getElementById("grid").innerHTML = generateArray(); function generateGrid(row, col) { var cells = 0; for (var j = 0; j < row; j++) { text += "<tr>"; for (var i = 0; i < col; i++) { text += "<td class = 'cells'><div id = 'myTableId" + cells + "'></div> " + " " + "</td>"; cells++; } text += "</tr>"; } text += "<br><br></table>"; document.getElementById("player1").innerHTML = text + "<br><br>"; document.getElementById("player2").innerHTML = text; } function loadGame() { var board = generateArray(board); for (var i = 0; i < 100; i++) { var getElement = document.getElementById("myTableId" + i); if (board == 0) { getElement.innerHTML = " "; } else if (board == 1) { getElement.innerHTML = "S"; } else if (board == 2) { getElement.innerHTML = "X"; } else getElement.innerHTML = "O"; } } This Doesn't work var text = "<table class = 'BSGrid'>"; document.getElementById("grid").innerHTML = generateArray(); function generateGrid(row, col) { var cells = 0; for (var j = 0; j < row; j++) { text += "<tr>"; for (var i = 0; i < col; i++) { text += "<td class = 'cells'><div id = 'myTableId" + cells + "'></div> " + " " + "</td>"; cells++; } text += "</tr>"; } text += "<br><br></table>"; document.getElementById("player1").innerHTML = text + "<br><br>"; document.getElementById("player2").innerHTML = text; } $(document).ready(function(){ $("p").click(function(){ $(this).hide(); }); }); function loadGame() { var board = generateArray(board); for (var i = 0; i < 100; i++) { var getElement = document.getElementById("myTableId" + i); if (board == 0) { getElement.innerHTML = " "; } else if (board == 1) { getElement.innerHTML = "S"; } else if (board == 2) { getElement.innerHTML = "X"; } else getElement.innerHTML = "O"; } } And this doesn't work either var text = "<table class = 'BSGrid'>"; document.getElementById("grid").innerHTML = generateArray(); function generateGrid(row, col) { var cells = 0; for (var j = 0; j < row; j++) { text += "<tr>"; for (var i = 0; i < col; i++) { text += "<td class = 'cells'><div id = 'myTableId" + cells + "'></div> " + " " + "</td>"; cells++; } text += "</tr>"; } text += "<br><br></table>"; document.getElementById("player1").innerHTML = text + "<br><br>"; document.getElementById("player2").innerHTML = text; } function loadGame() { var board = generateArray(board); for (var i = 0; i < 100; i++) { var getElement = document.getElementById("myTableId" + i); if (board == 0) { getElement.innerHTML = " "; } else if (board == 1) { getElement.innerHTML = "S"; } else if (board == 2) { getElement.innerHTML = "X"; } else getElement.innerHTML = "O"; } } $(document).ready(function(){ $("p").click(function(){ $(this).hide(); }); });
  5. studsm
    Yes, I saw that one but it only shows me how to change stuff with buttons and I need to be able to click specifically on the individual cells in a table and have them change onclick.
  6. studsm
    Howdy everyone. I'm working on a school assignment and can't seem to quite find the answers i need in the w3 tutorials. I have this js file that generates an empty grid var text = "<table class = 'BSGrid'>"; function generateGrid(row, col) { var cells = 0; for (var j = 0; j < row; j++) { text += "<tr>"; for (var i = 0; i < col; i++) { text += "<td class = 'cells'><div id = 'myTableId" + cells + "'></div> " + " " + "</td>"; cells++; } text += "</tr>"; } text += "<br><br></table>"; document.getElementById("player1").innerHTML = text + "<br><br>"; document.getElementById("player2").innerHTML = text; } I need to make it so that when i click on any individual cell it will change the background color or whatever else I want to do, but if you can just show me how to make it change the background color i'll figure the rest out. This is what I have tried but it doesn't seem to work I could just be missing a simple thing or it could be completely wrong so just let me know please var terd = document.getElementById("player1"); var cells = terd.getElementsByTagName("td"); for (var i = 0; i < 100; i++) { cells.onclick = onClickHandler; } function onClickHandler() { this.innerHTML += "style = 'background-color: #00CED1;'" }
  7. studsm
    Yes it was throwing a fatal error when i tried to post and I didn't know they were posting. Sorry
  8. studsm
    Hey everyone, I am working on a program for a school project where we are to create a battleship game using js/html/css. We are breaking this assignment up into small parts that we complete one week at a time in order to make the learning curve a bit easier. I'm quite new to programming and really new to javascript so this is proving to be exceptionally hard for me. this week we are creating a view a model and a html file in order to display a battleship game in progress. What i'm confused about is how to display the objects created in the model.js into the view.js so i'll start by showing you what I have. View.js var text = "<table style='width:30%'>"; //var text2 = ""; function generateGrid(row, col) { var cells = 0; for (var j = 0; j < row; j++) { text += "<tr>"; for (var i = 0; i < col; i++) { text += "<td style = 'height: 30px' ><div id = 'myTableId " + cells + "'></div> " + " " + "</td>"; cells++; } text += "</tr>"; } text += "<br><br></table>"; document.getElementById("player1").innerHTML = text + "<br><br>"; document.getElementById("player2").innerHTML = text; } function loadGame() { for (var i = 0; i < board.length - 1; i++) { //document.getElementById("myTableId").innerHTML = board; var gridTable = document.getElementById("myTableId"); var cell = gridTable.row[j].col; if (board == '0') { cell.innerHTML = " "; } else if (board == '1') { cell.innerHTML = "S"; } else if (board == '2') { cell.innerHTML = "X"; } else if (board == '3') { cell.innerHTML = "O"; } } } Model.js var players = 2; var numShips = 5; var lengthCarrier = 5; var lengthBattleship = 5; var lengthSubmarine = 4; var lengthCruiser = 3; var lengthDestroyer = 2; var empty = 0; var shipWithoutHit = 1; var shipWithHit = 2; var miss = 3; var board = [ 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 3, 0, 0, 0, 0, 0, 1, 0, 2, 2, 2, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 3, 0, 1, 0, 3, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 3, 0, 0, 0, 0, 0, 3, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 2, 2, 0, 0, 0, ]; function shoot(spot) { var hits; if (board[spot] == shipWithoutHit) { board[spot] = shipWithHit; hits = true; } else { board[spot] = miss; hits = false; } //endTurn(hits); } function endTurn(goAgain) { if (goAgain) { shoot(spot); } else{ //end players turn } } Grid.HTML <!DOCTYPE html> <style> h1{ color: green; text-align: center; background-color: transparent; font-size-adjust: inherit; } </style> <html> <head> <title>Battleship Grid</title> <h1 style="color: red; font-family: "lucida console";" >Battleship Grid</h1> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body onload='generateGrid(10,10);'> <td style = height: '30px' ><div id = 'thisId'></div></td> <input type='button' value = 'New Game' onclick='loadGame();'> <h1>player 1</h1> <div id = "player1"></div><br><br> <h1>player2</h1> <div id = "player2"></div> <input type='button' value = 'test' onclick='modelGrid();'> <div id = "grid"></div> <script type="text/javascript" src="view.js" ></script> <script type="text/javascript" src="model.js"></script> </body> </html>
  9. studsm
    Hey thanks for the reply justsomeguy! your post has helped me a lot so thanks! if you have a little bit of time to reply again that would be great, if not thanks for the help. I will need to create loops that will update the game state as it is part of the requirement later on so I might as well do that now. so I will create an array would it have to be something like this: var game = ["empty", "empty", "shipwithouthit", "empty", etc...] all the way through the whole grid? and if so can you explain or show me some example of how I would use loops to update the game board in my view.js file?
  10. studsm
    Thanks davej for the reply, so right now i'm not recieving and input from the user. I'm just writing out objects that i've created in the model to the view and generate the visible HTML table with the objects inside of it. And I wish I had an idea but i'm really just entirely unsure as to how to do this and need a push in the correct direction. Can i create an object like var carrierLength = 5; in my model and then how would I go about putting that inside the view.js? i'm sorry if i'm frustrating you but i'm really confused.
  11. studsm
    HI everyone, i'm new to javascript/html/css and I am working on an assignment for school and could use a nudge in the correct direction. Please don't make any rude comments as I am just trying to learn and would only like advice on how to proceed with the assignment. So I am creating battleship game using javascript/html/css and we are just doing small chunks of the full game each week as our assignment. So far all we have done is generated a game grid using javascript and put it on the html file. This is what I did for that. //var column = ["0", "A", "B", "C", "D", "E", "F", "G", "H", "I", "J"]; var text = "<table style='width:30%'>"; //var text2 = ""; function generateGrid(rows, columns) { for (var j = 0; j < rows; j++) { text += "<tr>"; for (var i = 0; i < columns; i++) { text += "<td style='height: 30px'>" + " " + "</td>"; } text += "</tr>"; } text += "<br><br></table>"; document.getElementById("player1").innerHTML = text + "<br><br>"; document.getElementById("player2").innerHTML = text; } and my html file <!DOCTYPE html> <style> h1{ color: green; text-align: center; background-color: transparent; font-size-adjust: inherit; } </style> <html> <head> <title>Battleship Grid</title> <h1 style="color: red; font-family: "lucida console";" >Battleship Grid</h1> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <input type='button' value = 'New Game' onclick='generateGrid(10,10);'> <h1>player 1</h1> <div id = "player1"></div><br><br> <h1>player2</h1> <div id = "player2"></div> <script type="text/javascript" src="view.js" ></script> <script type="text/javascript" src="model.js"></script> </body> </html> now for the next assignment we are to create a model.js file, this file will contain objects and functions that I will need for the game. Here is what it says exactly for this part so there isn't confusion about what needs to be done. in Battleship, the state of the game (or model) includes what shots have been taken, which shots were missed, and which shots were hits. The model also includes information about ships: size, location, and orientation, and damage. The model does not include any information about how the game is displayed. That means that the same model could be used with any kind of view, ranging from a simple text display on a phone to a big-screen 3D display with surround sound. I am not asking for you guys to tell me how to write the functions or anything I just wanted to let you know the criteria. So after I have written the code in the model all I need to do is display a few pieces of the model onto the game grid. (the html table i generated). This is where I am lost and unsure as to how to do this. In summary I will have three files the model.js, the view.js and the grid.html the the model has my game pieces in it which is all i need to focus on for this assignment so this is what I have written in the model.js. var players = 2; var numShips = 7; var lengthCarrier = 5; var lengthBattleship = 5; var lengthSubmarine = 4; var lengthCruiser = 3; var lengthDestroyer = 2; and i somehow would need to display the the game objects in the game grid (the table) right now it doesn't matter how I do it so it can be something as simple as just changing the border on my grid where the ships are placed or I can add pictures into the grid to show where the ships are. The gameboard doesn't need to be interactive at this point it just needs to show the objects inside the grid, and i'm completely unsure as to how to do this. Any advice or any push in the right direction would be great. here is the link to the full assignment if anyone wants to read it. http://universe.tc.uvu.edu/cs2550/project/a3.html
×
×
  • Create New...