Choose a random obscure cell using JavaScript

I am relatively new to coding and I have been tasked with creating a game using JavaScript where a random cell is selected and the player must attempt to guess which cell it is (the one chosen randomly) within a table. Upon selecting the correct cell, the game should notify you that you have indeed made the right guess. However, I am encountering some difficulties figuring out how to implement this logic into my code. So far, what I have managed to do is create the table structure and make certain cells turn red when clicked on. Any guidance or assistance in resolving this issue would be greatly appreciated.

Below is the current code that I have developed if it helps:

<!DOCTYPE html>

<html lang="en">

 

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

 

    <style>

        body {

            text-align: center;

        }

 

        table,

        th,

        td {

            border: 0px solid white;

            border-collapse: collapse;

            width: 45%;

            height: 55px;

            text-align: center;

            vertical-align: center;

            table-layout: fixed;

        }

 

        table.center {

            margin-left: auto;

...

function tableText(col){
    if (typeof event!=='undefined')
        el=event.srcElement
        for (var i = 0; i < el.parentNode.cells.length; i++)
            el.parentNode.cells[i].style.backgroundColor=''
        el.style.backgroundColor=col
}
    </script>

 

</html>

</script>

 

</html>

Answer №1

I might consider implementing a similar approach

<!DOCTYPE html>

<html lang="en">

 

<head>

    <meta charset="UTF-8>

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

 

    <style>

        body {

            text-align: center;

        }

 

        table,

        th,

        td {

            border: 0px solid white;

            border-collapse: collapse;

            width: 45%;

            height: 55px;

            text-align: center;

            vertical-align: center;

            table-layout: fixed;

        }

 

        table.center {

            margin-left: auto;

            margin-right: auto;

        }

 

        .Tableheader {

            border: 0px solid white

        }

 

        .TableCell {

            background-color: aqua;

            border: 2px solid black;

        }

 

        .button {

            padding: 5px;

            background-color: #dcdcdc;

            border: 1px solid #666;

            color: #000;

            margin-top: 10px;

        }

 

        button:hover {

            color: yellow;

        }

 

        .TableCell:hover {

            background-color: rgb(255, 230, 0);

        }

    </style>

</head>

 

</body>

 <div id="Table">
<h2>Hurkles</h2>
<p> Click a Cell to Find Hurkles</p>
<table>

    <table id="tableID" class="center">

        <tr>
            <td id="R0C0" class="Tableheader"></td>
            <td id="R0C1" class="Tableheader">A</td>
            <td id="R0C2" class="Tableheader">B</td>
            <td id="R0C3" class="Tableheader">C</td>
            <td id="R0C4" class="Tableheader">D</td>
            <td id="R0C5" class="Tableheader">E</td>
            <td id="R0C6" class="Tableheader">F</td>
            <td id="R0C7" class="Tableheader">G</td>
            <td id="R0C8" class="Tableheader">H</td>
            <td id="R0C9" class="Tableheader">I</td>
            <td id="R0C10" class="Tableheader">J</td>
        </tr>

        ...

</script>

 

</html>

</script>

</html>

It is worth noting that the first cell is indexed as R1C1, starting from zero could simplify the process

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Having trouble with my JQuery selection

In the code below, I have assigned an id of "song-pick." $("#archive").append("<div id=\"song-pick\" data-song=\""+song.rank+"\" class=\"box small back"+counter+"\"><span>"+song.title+"</span></div>"); ...

Using AJAX and React to handle RESTful requests

Hello there, I am attempting to utilize a web service in React but am encountering issues with the AJAX function. I'm unsure if my code is working as expected. Here is a snippet of my code: prox= {"email":email, "password": password}; //tag comment $ ...

Is it possible to prevent a postback by utilizing JavaScript's confirm function?

I am currently working on an aspx page that contains an asp.net button. The code for the button is shown below: <asp:LinkButton ID="btn_Delete" runat="server" OnClick="btn_Delete_Click" OnClientClick="ConfirmDelete();" Text="Delete" /> The Confirm ...

Securing socket.io connection in a nodejs application

I'm currently developing a chat application that utilizes sockets for bi-directional message sharing. Although the socket is functioning properly, I would like to implement user authentication before granting access to the socket connection. I'v ...

Using Regular Expressions in JavaScript to verify if an element from an array is contained within a string

Looking for a simple JavaScript code for a Vue application that will split the string into an array and check if any value is present in a different string. Here's what I have: let AffiliationString = " This person goes to Stony Brook" ...

Ways to incorporate a dynamic HTML form that allows for input elements to be added both horizontally and vertically while maintaining connected lines

Looking to design a form that showcases HTML elements in both vertical and horizontal positions, with lines connecting them as seen in this example: https://i.sstatic.net/jB12f.png. Can anyone offer guidance on how to achieve this? Thanks! ...

The consistency of the input box is lacking

Why is my input box not consistent? Every time I add it, the width increases. I understand it's because of the 'col' control but it's creating a messy layout as shown in the image below https://i.sstatic.net/Q1PHL.png This is the code ...

Modify the scoped variable using Angular's $resource module

I am facing an issue with my Angular application where I cannot get the results of a second $resource call to update a scoped variable. Initially, I am able to generate the initial view from an Angular $resource call to an external API and display the data ...

In Internet Explorer 9, the cursor unexpectedly moves up above the element

Within my MVC3 application, I have implemented a feature to change the cursor when hovering over an element. Below is the JavaScript code that accomplishes this: $('#print').hover(function () { var cursorUrl = 'url(@Url.Content("~/Cont ...

Switching from AngularJS to vanilla JavaScript or integrating AngularJS and Flask on a single server

It is common knowledge that angular has the ability to create a project and convert it into pure HTML, CSS, and js code. Similarly, I am looking to do the same for my AngularJS application. When I execute the app using npm start it works perfectly fine. My ...

Conceal the entire <tr> tag if the child's child is present

My table situation is as follows: $('td:contains("label label-primary")').parent().hide(); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <tbody> <tr> <td> < ...

Create HTML content from a file retrieved from the server

I have been working on a dynamic website project, diving into web development from scratch despite having coding experience in general. As I navigate Angular CLI and Bootstrap, I've come across a fundamental question: Do modern websites house all thei ...

Automated album creation through Ajax image uploader

For my wedding website, I wanted to allow guests to upload photos. I attempted to combine the functionalities of "Ajax Image Upload and Resize with jQuery and PHP" with an existing image gallery on my site. While both the HTML and PHP components work fin ...

Retrieving a list of numbers separated by commas from an array

Currently, I'm retrieving data from a MYSQL database by executing the following SQL command: SELECT GROUP_CONCAT(MemberMemberId SEPARATOR ',') AS MemberMemberId FROM member_events WHERE event_date = "2000-01-01" AND Eve ...

Tips for expanding AntD Table to show nested dataSource values

I need help dynamically rendering data into an antD expandable table. The data I have is a nested object with different properties - const values = [ [name = 'Josh', city = 'Sydney', pincode='10000'], [name = 'Mat ...

"Exploring the process of integrating angular-xeditable into a MeanJS project

I recently attempted to install angular-xeditable from the link provided, but encountered issues while trying to reference the JavaScript files in layout.html after downloading it with bower. According to the documentation, these files should be added auto ...

What steps should be taken to complete orders following the checkout.session.completed event triggered by Stripe?

Having an issue with Stripe's metadata object that has a limit of 500 characters. My checkout flow is operational, but the only constraint is the character limit for my cart. I need to include extras and customer notes in my cartItems object for each ...

Problem with Bootstrap loading state when certain input fields are required

Just starting out with Bootstrap 3 and looking to integrate the loading state button function into my form. I've set up an input field with the required option as shown below. <form> <input class="input" name="title" type="text" required / ...

Choose all or none of the items from the list with a single click - v-list-item-group

I am interested in incorporating Vuetify's v-list-item-group component into my Vue application. This list is intended to represent nodes that are related to a graph, allowing users to select none, some, or all of them and delete the selected nodes. T ...

What is the best method for extracting information from quills and transmitting it to the server?

Currently, I have incorporated the Quill text editor into my project. If you are interested in learning more about Quill Editor, you can check it out here. My main objective is to obtain the data from the editor and send it to the server using an AJAX cal ...