stackoom
  简体   繁体   中英

Change color mainbutton if subbuttons are green

 原文  2019-05-16 08:28:47  7   1    javascript/ html

Question

Have a mainbutton with two subbuttons. If checkbox behind subbutton is checked then subbutton change from red to green. If both subbuttons are green then mainbutton should change from red to green

tried to create a script to do this. If I run the code without function "ChangeGCPOD" then the subbuttons change color if checkbox is checked. But with function "ChangeGCPOD" the subbuttons don't change color and also the mainbutton does not change color 

  // If checkbox is checked equipment is NOT in run, then background row equipment change to grey and Color button from red to green--> function ChangeRowColor(chkrow, row, cel, btn) { var varrow = document.getElementById(row); var varcel = document.getElementById(cel); var varColor = "#E3CEF6"; var varColor2 = "Yellow"; if (chkrow.checked == true) { varColor = "Grey"; varColor2 = "Grey"; document.getElementById(btn).style.backgroundColor = 'green'; } else { document.getElementById(btn).style.backgroundColor = 'red'; } varrow.style.backgroundColor = varColor; varcel.style.backgroundColor = varColor2; ChangeGCPOD(); } function ChangeGCPOD() { var varE1 = document.getElementById('b_echo_01'); var varE2 = document.getElementById('b_echo_02'); var varColor = "red"; var varColor2 = "green"; if (varE1.style.backgroundColor = varColor2 && varE2.style.backgroundColor = varColor2) { document.getElementById('gcpod').style.backgroundColor = 'green'; } else { document.getElementById('gcpod').style.backgroundColor = 'red'; } } 
 table, th, td { border: 1px solid black; } button { height: 40px; width: 160px; border: 4px; border-radius: 20px 20px 20px 20px; border-color: red; color: yellow; padding: 12px 15px; text-align: center; font-size: 16px; cursor: pointer; } button.green, input.green { background: green; } .buttonsmall { background-color: #FF0000; border: 4px; border-radius: 20px 20px 20px 20px; border-color: white; } .buttonsmall:hover { background-color: green; } 
 <!DOCTYPE html> <html> <body> <!-- Create extra space --> <p><br><br></p> <!-- Create extra space --> <p><br></p> <body> <!-- Create extra space --> <p><br><br></p> <!-- Create extra space --> <p><br></p> <div id="GC"> <button id="gcpod" class="buttonsmall" style="height:20px;width:60px"> </div> <div id="Echo_O01_button"> <table style="width:20%;margin-left:50px;"> <colgroup> <col span="3" style="background-color:#E3CEF6;"> <!--<col style="background-color:yellow"> --> </colgroup> <tr id="rowA"> <td width="20%"><input type="button" id="b_echo_01" class="buttonsmall" style="height:20px;width:60px" onclick="showOrHide('Echo_O01')"> </td> <td width="40%"><b>Echo555_O01</></td> <td width="15%"></td> <td id="celA" width="15%" bgcolor="yellow"><input type="checkbox" name="notinrun6" id="chkrowA" onclick="ChangeRowColor(this,'rowA','celA', 'b_echo_01')"/></td> <td width="10%"></td> </tr> </table> </div> <!-- Close Div Echo_O01_button --> <!-- <p><br></p> --> <div id="Echo_O02_button"> <table style="width:20%;margin-left:50px;" > <colgroup> <col span="3" style="background-color:#E3CEF6;"> <!--<col style="background-color:yellow"> --> </colgroup> <tr id="rowB"> <td width="20%"><input type="button" id = "b_echo_02" class="buttonsmall" style="height:20px;width:60px" onclick="showOrHide('Echo_O02')"> </td> <td width="40%"><b>Echo555_O02</></td> <td width="15%"></td> <td id="celB" width="15%" bgcolor="yellow"><input type="checkbox" name="notinrun6" id="chkrowB" onclick="ChangeRowColor(this,'rowB','celB', 'b_echo_02')"/></td> <td width="10%"></td> </tr> </table> </div> <!-- Close Div Echo_O02_button --> </body> </html>

expect to change color mainbutton if both subbons are green

1 answers

solution1
 1 ACCPTED  2019-05-16 08:38:19

Actually your logic is correct, just the condition is wrong, you use = not == in the line if (varE1.style.backgroundColor = varColor2 && varE2.style.backgroundColor = varColor2) 

  function ChangeRowColor(chkrow, row, cel, btn) { var varrow = document.getElementById(row); var varcel = document.getElementById(cel); var varColor = "#E3CEF6"; var varColor2 = "Yellow"; if (chkrow.checked == true) { varColor = "Grey"; varColor2 = "Grey"; document.getElementById(btn).style.backgroundColor = 'green'; } else { document.getElementById(btn).style.backgroundColor = 'red'; } varrow.style.backgroundColor = varColor; varcel.style.backgroundColor = varColor2; ChangeGCPOD(); } function ChangeGCPOD() { var varE1 = document.getElementById('b_echo_01'); var varE2 = document.getElementById('b_echo_02'); var varColor = "red"; var varColor2 = "green"; if (varE1.style.backgroundColor == varColor2 && varE2.style.backgroundColor == varColor2) { document.getElementById('gcpod').style.backgroundColor = 'green'; } else { document.getElementById('gcpod').style.backgroundColor = 'red'; } } 
 table, th, td { border: 1px solid black; } button { height: 40px; width: 160px; border: 4px; border-radius: 20px 20px 20px 20px; border-color: red; color: yellow; padding: 12px 15px; text-align: center; font-size: 16px; cursor: pointer; } button.green, input.green { background: green; } .buttonsmall { background-color: #FF0000; border: 4px; border-radius: 20px 20px 20px 20px; border-color: white; } .buttonsmall:hover { background-color: green; } 
  <!DOCTYPE html> <html> <head> </head> <body > <!-- Create extra space --> <p><br><br></p> <!-- Create extra space --> <p><br></p> <body> <!-- Create extra space --> <p><br><br></p> <!-- Create extra space --> <p><br></p> <div id="GC"> <button id="gcpod" class="buttonsmall" style="height:20px;width:60px"> </div> <div id="Echo_O01_button"> <table style="width:20%;margin-left:50px;"> <colgroup> <col span="3" style="background-color:#E3CEF6;"> <!--<col style="background-color:yellow"> --> </colgroup> <tr id="rowA"> <td width="20%"><input type="button" id="b_echo_01" class="buttonsmall" style="height:20px;width:60px" onclick="showOrHide('Echo_O01')"> </td> <td width="40%"><b>Echo555_O01</></td> <td width="15%"></td> <td id="celA" width="15%" bgcolor="yellow"><input type="checkbox" name="notinrun6" id="chkrowA" onclick="ChangeRowColor(this,'rowA','celA', 'b_echo_01')"/></td> <td width="10%"></td> </tr> </table> </div> <!-- Close Div Echo_O01_button --> <!-- <p><br></p> --> <div id="Echo_O02_button"> <table style="width:20%;margin-left:50px;" > <colgroup> <col span="3" style="background-color:#E3CEF6;"> <!--<col style="background-color:yellow"> --> </colgroup> <tr id="rowB"> <td width="20%"><input type="button" id = "b_echo_02" class="buttonsmall" style="height:20px;width:60px" onclick="showOrHide('Echo_O02')"> </td> <td width="40%"><b>Echo555_O02</></td> <td width="15%"></td> <td id="celB" width="15%" bgcolor="yellow"><input type="checkbox" name="notinrun6" id="chkrowB" onclick="ChangeRowColor(this,'rowB','celB', 'b_echo_02')"/></td> <td width="10%"></td> </tr> </table> </div> <!-- Close Div Echo_O02_button --> </body> </html>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Change font color to green for the text? Change input color to green with JavaScript Change Button color to green when checkbox is checked Want to change the color of a HTML element from red to green then red again HTML range slider color change from red to green according to the input Based on internet connection change color of button to green or grey How to change even li text color to green and odd to red? How to change color from red to green if mobile verification status changes? Change background color between red and green every second I want to get the ID of the first input with a green color within inputs array and then change the color of that input by its ID
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM