Question

In: Computer Science

Javascript: How to change the background color of a TD on click and when the TD...

Javascript: How to change the background color of a TD on click and when the TD is clicked again the background color goes back to white. Here is the code I have so far.

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
table {
border-collapse: collapse;
margin: auto;

}

th,
td {
border: 1px solid black;
vertical-align: middle;
}

td {
width: 20px;
height: 20px;
font-size: .85em;
text-align: center;
}
</style>

<script>

document.getElementsByTagName('td').addEventListener("click", changeColor);
function(changeColor) {
document.getElementsByTagName("td").style.color = "#475892";
}

function(apocalypse) {
location.reload();
}

</script>
</head>

<body>
<table id="grid">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<button onclick="apocalypse()">Blinkers and Crawlers</button>
<button onclick="apocalypse()">Evolve</button>
<button onclick="apocalypse()">Evolve(Auto)</button>
<button onclick="apocalypse()">Apocalypse</button>
</body>

</html>

Solutions

Expert Solution

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
table {
border-collapse: collapse;
margin: auto;

}

th,
td {
border: 1px solid black;
vertical-align: middle;
}

td {
width: 20px;
height: 20px;
font-size: .85em;
text-align: center;
}
  
.highlight {
background-color: #475892;    
}
</style>

</head>

<body>
<table id="grid">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<button onclick="apocalypse()">Blinkers and Crawlers</button>
<button onclick="apocalypse()">Evolve</button>
<button onclick="apocalypse()">Evolve(Auto)</button>
<button onclick="apocalypse()">Apocalypse</button>
  
  
<script>
function colorChange(e) {
  e.target.classList.toggle('highlight');
};

var cells = document.getElementsByTagName("td"); 
for (var i = 0; i < cells.length; i++) { 
   cells[i].onclick = colorChange;
}

function apocalypse() {
  location.reload();
}
  
  

</script>
  
</body>

</html>


Please upvote, as i have given the exact answer as asked in question. Still in case of any concerns in code, let me know in comments. Thanks!

venereology answered 1 year ago
Next > < Previous

Related Solutions

Calculator in JavaScript. No use of switch statements or CSS. Project Standards: Students will use click...
Calculator in JavaScript. No use of switch statements or CSS. Project Standards: Students will use click events to capture user input. Students will use variables to store information needed by their application and keep track of their program’s state. Students will use conditionals to control project flow. Project Task You will be building a simple calculator in the browser. It should be able to add, subtract, divide, and multiply. Your program should do the following: Display a standard calculator to...
1.) What does it mean when glassware is labelled “TD”? How is that different from “TC”?...
1.) What does it mean when glassware is labelled “TD”? How is that different from “TC”? 2.) Pipets with multiple graduation marks are what type of pipet? Are they always TD or TC? 3.) Pipets with ONE marks are what type of pipet? Are they always TD or TC? 4.) (T / F) Quantitative analysis may be used to determine how many different compounds are in a sample. (Explain your answer.) 5.) Is acid/base titration a separation method? Why or...
Calculator in JavaScript Project Standards: Students will use click events to capture user input. Students will...
Calculator in JavaScript Project Standards: Students will use click events to capture user input. Students will use variables to store information needed by their application and keep track of their program’s state. Students will use conditionals to control project flow. Project Task You will be building a simple calculator in the browser. It should be able to add, subtract, divide, and multiply. Your program should do the following: Display a standard calculator to the user (you have starter files to...
for azo dyes, why does an instantaneous and dramatic color change occur when the two coupling...
for azo dyes, why does an instantaneous and dramatic color change occur when the two coupling reagents are mixed together?
You might have seen sunglasses that change to a color when exposed to light, while revert...
You might have seen sunglasses that change to a color when exposed to light, while revert to transpaparency when the light is blocked or dimmed. Thematerical used to make the glasses is called photochromic material that has light sensitive components inside. The technology is similar to that used to make a photographic film. (a) Explain, using necessary chemical formula, the working principle of photochromic sunglasses. (b) The color of the photochromic sunglasses is reversible, however, the image on a photographic...
learn more about how and when these molecules fuel your muscles, click on the image thumbnail...
learn more about how and when these molecules fuel your muscles, click on the image thumbnail to see a larger version of this focus figure. Then, complete the activities that follow. Part A - The Vocabulary of Exercise Nutrition In order to understand how the food you eat helps to fuel your body during exercise, you must first be able to use the vocabulary. Review the sentences below and select the term that best completes the sentence. Match the words...
Some lizards have the innate ability to change color, how would this affect the experiment? Group...
Some lizards have the innate ability to change color, how would this affect the experiment? Group of answer choices It would invalidate the entire experiment. No effect, if measured in their native habitat. The ability to change color or not change color would constitute excellent groups, but color changing by itself and without other data would not allow one to conclude anything. No effect, if measured on a standard background.
Write a defining table and a JavaScript program that computes and outputs the rate of change...
Write a defining table and a JavaScript program that computes and outputs the rate of change of a price. The program must allow the user to enter a previous price and a current price. The formula for the rate of change is rateOfChange =  currPrice - prevPrice prevPrice Your program should allow a user to enter real numbers such as 7.54. If you wish, you may use the following HTML code in your program. <!DOCTYPE HTML> <html lang="en-us"> <head> <meta charset="utf-8">...
Complete this javascript question according to the instructions given in the comments. *** DO NOT CHANGE...
Complete this javascript question according to the instructions given in the comments. *** DO NOT CHANGE any of the code that you are not instructed to. */ //////////////////// // Hint: If you see a console.log() in my examples, it is // likely a "return" goes there in your assignment. /////////////////// // 1) Define a "Vehicle" class that has a "wheels" property equal to 4 in // the constructor and a method named "rolling" that returns a string // equal to...
Discuss how the equilibrium price and quantity change when a change in demand occurs and the...
Discuss how the equilibrium price and quantity change when a change in demand occurs and the supply stays constant, and when a change in supply occurs and the demand stays constant.
ADVERTISEMENT
Subjects
ADVERTISEMENT
Latest Questions
ADVERTISEMENT