1

attempting to have my webpage be a bit more dynamic by having the background change on some elements when a checkbox is clicked. I am trying to do this via class change and a CSS sheet. I have the following which is kicking out an error that my onclick function ins not defined (in IE9). More importantly will the webpage update if I only change the class of the object which would have a different class in the CSS file. Whats a better alternative if this does not work?

my elemenet and function

UPDATE I made updates to both my HTML and CSS file as suggested by many. I am still getting no change in my webpage but the console is claiming that my function called from the onclick event is not defined which is a bit odd since it is. Also does this type for scripting belong in the HTML or should I pull it out and put in a seperate file. I figured since it was creating elements it belongs in the main html. Is there a cleaner more compact way of accomplishing this and not making my home screen html huge?

<tr class= 'tr.notchosen'><td><input type='checkbox' onclick='handleClick(this.id)'/></td></tr> 

function handleClick(cb) {

     var currentColumn = cb.parentNode
     var currentRow = currentColumn.parentNode
     if (currentRow.className === "chosen")
     {
     currentRow.className = "notchosen";
     }
     else
     {
     currentRow.className = "chosen";
     }
    }

and my css file is the following 

tr.chosen
{
background-color:rgba(255,223,0,0.75);
}
tr.notchosen
{
background-color:rgba(255,223,0,0);
}
4

1 回答 1

2

这里发生了几件事。首先，您的 css 选择器不太正确。事实上，我建议将类名设为“已选择”或“未选择”，然后选择带有该类的 tr 元素。

<tr class='notchosen'>

然后你可以从 css 定位它（这可能是初衷）

tr.notchosen
{
 background-color:rgba(255,223,0,0);
}

此外，虽然我不建议使用内联 javascript，但使用您的示例，this如果您想使用元素而不是this.id传递字符串，则应该通过。

onclick='handleClick(this)'

最后一部分是将您的javascript与类名更改同步

if (currentRow.className == "chosen")
{
 currentRow.className = "notchosen";
}
else
{
 currentRow.className = "chosen";
}
于 2013-10-09T20:15:26.363 回答