Hello,
I am helping someone out with their tic tac toe game and instead of having it as X’s and O’s we are trying to have images. I have a siren gif on the page if anyone can help out. Here is the page.
Any help is appreciated.
Thanks,
Ty
The code you provided is a mess and very difficult to read. Those onclick event handlers in the html is not reflective of good coding practice. Create a function in your JavaScript code and then use jQuery to assign a click event to each button using this new function as the callback function.
Also, I see the following reference. Where is this code? If you are going to provide a Codepen, then put all of your HTML is the HTML section, all of your CSS in the CSS section, and all of your JavaScript in the JS section.
<script src="jquery.tictac.js" type="text/javascript" charset="utf-8"></script>
As far as displaying images instead of X’s or O’s, you will need to rethink your approach. Currently, you are assigning " X " or " O " to the buttons’ value attribute. This is a text attribute and you can not directly attach an image to this.
Without completely changing your logic, you can change your input’s type to “image” and the update the input’s src attribute to reflect what image you want to display. Since all of your game logic is based on the value attribute, keep that logic intact. You will just need to add some code to update the image on click.
<input type="image" src="yourImageGoesHere.png" value=" ">
Yea I kinda walked into the code as is, I just fixed it up. That one script I’ve been trying to figure out what it’s there for and I just erased it. For the input that you sent me, what is the value supposed to be? I put the value to x but that did not help
I just left that part as an example of the code that was already present in one of the form’s input values. That was just the default starting value chosen for each button’s value. Why? You would need to ask the person who wrote this code.
Honestly, I would separate the data (the board’s values) from the view (the images placed on the board) . The data needs to be stored in some type of data structure (some type of array and/or object). The overall code logic makes decisions about what to display and when to display based on what is in the data structure instead of what is showing in the actual DOM. Currently, the data (X’s and O’s) are being stored in the DOM (inputs’ value attributes).