基于CSS和JavaScript动态切换背景及表格样式问题求助

Let's walk through the issues in your code and fix them one by one—you're really close, just a few syntax and logic hiccups!

Key Issues in Your Current Code #

• Incorrect DOM selector method: getElementByClassName doesn't exist—it's getElementsByClassName (notice the plural "Elements"). Even better, use querySelectorAll to target multiple classes at once, since getElementsByClassName only accepts a single class name.
• Missing quotes in url(): When setting backgroundImage, the URL inside url() needs to be wrapped in quotes (it's a string in JavaScript!). Without quotes, the browser will throw a syntax error.
• Unwrapped code blocks in conditionals: Your if/else if statements don't use curly braces {} for multi-line code blocks. That means only the first line after each condition is tied to it—your table background color code runs every time, regardless of the vaction value.
• Handling element collections: Methods like getElementsByClassName or querySelectorAll return a collection of elements, not a single one. You need to loop through them to apply styles to each element.

Corrected Code #

Here's the fixed version with explanations in comments:

<style>
table.table2, table.table1 { width: 190.5px; height: 50px; text-align: left; border-collapse: collapse; }
table.table1, td, th, table.table2 td, th { border: 1px solid black; }
html , body { height: 100%; margin: 0; padding: 0; }
div.cover { background-repeat: no-repeat; background-size: cover; background-position: center; width: 100%; height: 100%; }
</style>
<div class="cover">
 <div>
 <table class="table1">
 <thead><tr><th>Focus</th><th>State</th><th>Alert Level</th></tr></thead>
 <tr><td>Eyes</td><td> {{estate}} </td><td> {{elevel}} </td></tr>
 <tr><td>Head</td><td> {{hstate}} </td><td> {{hlevel}} </td></tr>
 <tr><td>Body</td><td> {{bstate}} </td><td> {{blevel}} </td></tr>
 <tr><td>Vehicle</td><td> {{vstate}} </td><td> {{vlevel}} </td></tr>
 </table>
 <table class="table2">
 <thead><tr><th>Current action</th></tr></thead>
 <tr><td> {{vaction}} </td></tr>
 </table>
 </div>
</div>

<script>
// Get the Flask-passed value (confirm template variable spelling matches!)
const vaction = "{{ vaction }}";
// Target single cover element with querySelector
const coverElement = document.querySelector(".cover");
// Target both table elements at once using CSS selector syntax
const tableElements = document.querySelectorAll(".table1, .table2");

// Wrap all condition-specific code in curly braces
if(vaction === "Driving") {
  coverElement.style.backgroundImage = 'url("https://media.nature.com/lw800/magazine-assets/d41586-018-04158-5/d41586-018-04158-5_15590100.gif")';
  // Loop through table collection to apply style to each
  tableElements.forEach(table => table.style.backgroundColor = 'lime');
} else if(vaction === "Sounding The Alarm") {
  coverElement.style.backgroundImage = 'url("https://upload.wikimedia.org/wikipedia/commons/e/eb/Blinking_warning.gif")';
  tableElements.forEach(table => table.style.backgroundColor = 'orange');
} else if(vaction === "Pulling over") {
  coverElement.style.backgroundImage = 'url("https://browsifyapp.com/wp-content/uploads/2018/10/model-3-gif-yeah.gif")';
  tableElements.forEach(table => table.style.backgroundColor = 'red');
}
</script>

Additional Tips for Future Debugging #

• Check the browser console: Press F12 to open DevTools, go to the Console tab—this will show you syntax errors (like missing quotes or wrong method names) that are the first clue to fixing issues.
• Test template variables: Add console.log(vaction) right after defining the variable to confirm Flask is passing the correct value to your JavaScript.
• Stick to querySelector/querySelectorAll: These methods use familiar CSS selector syntax, making it easier to target multiple elements or complex element combinations.

内容的提问来源于stack exchange，提问作者TheLowBudgetGangster