I need assistance with a table that has 32 columns. From columns 1 to 31, I am able to fill in colors by clicking on the cells. However, I now want to calculate and display the number of cells that are not colored in the last column. This task must be completed using only javascript. Refer to the image for clarification.
Perhaps in this manner:
function change_colors(){ /* Testing purpose only */
var color_table = document.getElementById('color_table');
var random_row = get_random_cell();
var random_color = '#'+(Math.random()*0xFFFFFF<<0).toString(16);
color_table.rows[random_row].cells[0].setAttribute('bgcolor', random_color);
count_white_cells();
}
function get_random_cell(){
var color_table = document.getElementById('color_table');
var random_row = Math.floor(Math.random() * (color_table.rows.length-1));
var cell_bg = color_table.rows[random_row].cells[0].getAttribute('bgcolor');
if(!cell_bg){
return random_row;
}else{
return get_random_cell();
}
}
function count_white_cells(){
var white_cell_count = 0;
var color_table = document.getElementById('color_table');
for (var i = 0; i < color_table.rows.length-1; i++) {
var cell_bg = color_table.rows[i].cells[0].getAttribute('bgcolor');
if (!cell_bg){
white_cell_count++;
}
}
color_table.rows[color_table.rows.length-1].cells[0].innerHTML = white_cell_count;
if(white_cell_count == 0){
alert('All cells are colored!!!');
document.getElementById('btn_change_colors').setAttribute('onclick', 'alert(\'All cells are colored!\')');
}
}table td {
width: 20px;
height: 20px;
} <input type="button" id="btn_change_colors" value="change random cell color" onclick="change_colors();">
<table border="1" id="color_table">
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
</table>I am working with a JSON response that contains multiple objects consisting of two main objects - datacenter and environment: "deployments": [ { "datacenter": { "title": "euw1", ...
Currently, I am in the process of making my portfolio website responsive by using media queries. For mobile screens, I have successfully implemented a nav select drop down menu. However, when it comes to iPad screens, I want to display a regular menu. To a ...
Currently, I am in the process of making modifications to a project. The front-end is built using Vue 2.0 and the back-end utilizes Node.js Express. To ensure security, I have implemented the JWT approach by requiring authentication for all pages except th ...
Hey there! Currently, I am immersed in a new project that hinges on the utilization of Raphael JS alongside the Raphael.Freetransform plugin. The plugin has been performing admirably with smooth transitions so far. Nonetheless, upon utilizing the hideHandl ...
My Grease monkey script/Tamper monkey is designed to click on buttons that contain the word 'attach'. Although it works perfectly, I have noticed a difference in behavior between Chrome and Firefox. In Firefox, the clicks occur in the order of a ...
Currently, I am utilizing Visual Studio 2012 for editing HTML and JavaScript. My approach involves inserting templates using partial views in inline script tags (view code below). The use of AngularJS, a Javascript framework, dictates that the type must be ...
I am facing an issue where the text remains a link and the dropdown toggle works, but it is causing Dropdown-2 to open when I click on Dropdown-1. Only Dropdown-1 seems to be working properly. I can't seem to figure out why only Dropdown-1 opens no m ...
Is there a way to customize the appearance of action buttons within a Dialog, DatePicker, or TimePicker by accessing the containing div? I'm looking to add padding between these buttons and potentially change the background color of the div generated ...
function Copy() { const Message = "MESSAGE"; const [messageList, setMessageList] = useState([{ text: "Hello", id: 1 }]); const [newMessageValue, setNewMessageValue] = useState(0); const addToMessageList = () => { alert(n ...
Multiple posts have emphasized the importance of using an ID only once. But, I'm facing a situation where I need to pass 2 PHP variables to my JavaScript. I initially thought of using document.getElementById, but since IDs must be unique, this approa ...
Utilizing iView Tables to display data in a table with an expand option. As of now, when clicking on the expand button for a row, the row expands but previously expanded rows do not collapse, causing all expanded rows to be visible at once. Is there a wa ...
Within my Angular application, I keep crucial victim data in local storage. This data is then showcased in the view where it can be altered (via a <select>): <h1>Victim #{{victim.numero}}</h1> <label>Victim status</label> &l ...
I am currently working on a JQUERY project and facing a challenging situation. I usually know how to create dropdown menus that depend on one another, but this time I need a dropdown menu that displays age ranges based on the date entered in the birth-date ...
I have a challenge where I need to merge two arrays of objects in a nested way. var array1=[{ PersonalID: '11', qusetionNumber: '1', value: 'Something' }, { PersonalID: '12', qusetionNumber: '2& ...
As someone who is new to Typescript, I'm facing a challenge in changing the text color to white and struggling to find a solution. I'm hoping that someone can guide me in the right direction as I've tried multiple approaches without success ...
My tabs are functional and working smoothly. To view the jsfiddle, click here - http://jsfiddle.net/K3WVG/ I am looking for a way to add nested tabs within the existing tabs. I would prefer a CSS/HTML solution, but a JavaScript/jQuery method is also acce ...
Similar Question: How can I retrieve the height and width of an image using JavaScript? Typically, we can determine the image width using $('img').width() or $('img').css('width') when a width is specified as shown below ...
Is it possible to smoothly transition a div element from display:none to display:block? I attempted to first set the display to block and then apply a transition, but it doesn't seem to be working as expected. HTML <input type="text" class="inp"& ...
Currently, I am working on a Reactjs project that utilizes Material Ui components. In this project, I am tasked with creating a form to generate a new event where users can select the event location type from three options - In-Person, Hybrid, and Virtual ...
I'm currently working on a web page that features a plot powered by an AjaxDataSource object. However, I am facing a challenge with implementing a TextInput widget that can modify the xrange of this plot. Here is a snippet of my code: source = AjaxDa ...