javascript - 检查javascript和警报中的背景颜色
问题描述
选项为蓝色，在 javascript 的帮助下，我正在检查选项背景颜色是否为蓝色，如果不是蓝色，则提前执行，否则会提醒一些文本。
function click_option_A() {
var clr_1_chk = document.getElementById("1");
//alert(clr_1_chk.style.backgroundColor);
var clr_2_chk = document.getElementById("2");
var clr_3_chk = document.getElementById("3");
var clr_4_chk = document.getElementById("4");
if(clr_1_chk.style.backgroundColor !== "blue"){
alert("You have already locked the answer!")
}
else if(clr_2_chk.style.backgroundColor !== "blue"){
alert("You have already locked the answer!")
}
else if(clr_3_chk.style.backgroundColor !== "blue"){
alert("You have already locked the answer!")
}
else if(clr_4_chk.style.backgroundColor !== "blue"){
alert("You have already locked the answer!")
}
else{
var clr = "1";
var confirm = window.confirm("Are you sure?");
if (confirm) {
window.document.getElementById(clr).style.backgroundColor ="yellow";
var right_answer = "B";
if(right_answer == "A"){
//correct_ans();
setTimeout(correct_ans,3000);
}
else{
setTimeout(wrong_ans,3000);
}
}
}
}
function click_option_B() {
var clr_1_chk = document.getElementById("1");
var clr_2_chk = document.getElementById("2");
var clr_3_chk = document.getElementById("3");
var clr_4_chk = document.getElementById("4");
if(clr_1_chk.style.backgroundColor !== "blue"){
alert("You have already locked the answer!")
}
else if(clr_2_chk.style.backgroundColor !== "blue"){
alert("You have already locked the answer!")
}
else if(clr_3_chk.style.backgroundColor !== "blue"){
alert("You have already locked the answer!")
}
else if(clr_4_chk.style.backgroundColor !== "blue"){
alert("You have already locked the answer!")
}
else{
var clr = "2";
var confirm = window.confirm("Are you Sure?");
if (confirm) {
window.document.getElementById(clr).style.backgroundColor ="yellow";
var right_answer = "B";
if(right_answer == "B"){
//correct_ans();
setTimeout(correct_ans,3000);
}
else{
setTimeout(wrong_ans,3000);
}
}
}
}
function click_option_C() {
var clr_1_chk = document.getElementById("1");
var clr_2_chk = document.getElementById("2");
var clr_3_chk = document.getElementById("3");
var clr_4_chk = document.getElementById("4");
if(clr_1_chk.style.backgroundColor !== "blue"){
alert("You have already locked the answer!")
}
else if(clr_2_chk.style.backgroundColor !== "blue"){
alert("You have already locked the answer!")
}
else if(clr_3_chk.style.backgroundColor !== "blue"){
alert("You have already locked the answer!")
}
else if(clr_4_chk.style.backgroundColor !== "blue"){
alert("You have already locked the answer!")
}
else{
var clr = "3";
var confirm = window.confirm("Are you Sure?");
if (confirm) {
window.document.getElementById(clr).style.backgroundColor ="yellow";
var right_answer = "B";
if(right_answer == "C"){
//correct_ans();
setTimeout(correct_ans,3000);
}
else{
setTimeout(wrong_ans,3000);
}
}
}
}
function click_option_D() {
var clr_1_chk = document.getElementById("1");
var clr_2_chk = document.getElementById("2");
var clr_3_chk = document.getElementById("3");
var clr_4_chk = document.getElementById("4");
if(clr_1_chk.style.backgroundColor !== "blue"){
alert("You have already locked the answer!")
}
else if(clr_2_chk.style.backgroundColor !== "blue"){
alert("You have already locked the answer!")
}
else if(clr_3_chk.style.backgroundColor !== "blue"){
alert("You have already locked the answer!")
}
else if(clr_4_chk.style.backgroundColor !== "blue"){
alert("You have already locked the answer!")
}
else{
var clr = "4";
var confirm = window.confirm("Are you Sure?");
if (confirm) {
window.document.getElementById(clr).style.backgroundColor ="yellow";
var right_answer = "B";
if(right_answer == "D"){
//correct_ans();
setTimeout(correct_ans,3000);
}
else{
setTimeout(wrong_ans,3000);
}
}
}
}
function correct_ans(){
var clr_1_chk = document.getElementById("1");
var clr_2_chk = document.getElementById("2");
var clr_3_chk = document.getElementById("3");
var clr_4_chk = document.getElementById("4");
if(clr_1_chk.style.backgroundColor !== "blue"){
var clr = "1";
}
else if(clr_2_chk.style.backgroundColor !== "blue"){
var clr = "2";
}
else if(clr_3_chk.style.backgroundColor !== "blue"){
var clr = "3";
}
else{
var clr = "4";
}
//alert('correct');
document.getElementById(clr).style.backgroundColor ="green";
}
function wrong_ans(){
var clr_1_chk = document.getElementById("1");
var clr_2_chk = document.getElementById("2");
var clr_3_chk = document.getElementById("3");
var clr_4_chk = document.getElementById("4");
if(clr_1_chk.style.backgroundColor !== "blue"){
var clr = "1";
}
else if(clr_2_chk.style.backgroundColor !== "blue"){
var clr = "2";
}
else if(clr_3_chk.style.backgroundColor !== "blue"){
var clr = "3";
}
else{
var clr = "4";
}
document.getElementById(clr).style.backgroundColor ="red";
}td{
background-color: blue;
color: white;
}<div class="container">
<!--<form method="post" enctype="multipart/form-data" class="form-horizontal">-->
<table class="table table-bordered table-responsive">
<tr class="text-center">
<td colspan="2">Who was First Prime Minister of India?(15304)</td>
</tr>
<tr>
<td id="1" onclick="click_option_A()">A) M K Gandhi</td>
<td id="2" onclick="click_option_B()">B) Jawaharlal Nehru</td>
</tr>
<tr>
<td id="3" onclick="click_option_C()">C) Rajendra Prasad</td>
<td id="4" onclick="click_option_D()">D) Chandra Shekhar Azad</td>
</tr>
</table>
<!--</form>-->
</div>我尝试了上面的代码，但它总是提醒我我已锁定答案但我没有。
选项为蓝色，在 javascript 的帮助下，我正在检查选项背景颜色是否为蓝色，如果不是蓝色，则提前执行，否则会提醒一些文本。
解决方案
之所以没有得到blue这里的样式，而是空字符串，因为element.style只返回内联样式，而不是 CSS 定义的样式。
如果您需要 CSS 样式，则必须使用 window.getComputedStyle(<element>).
MDN上的更多信息
在下面的代码片段中，我为td. 因此，您将获得样式为blue.
function click_option_A() {
var clr_1_chk = document.getElementById("1");
//alert(clr_1_chk.style.backgroundColor);
var clr_2_chk = document.getElementById("2");
var clr_3_chk = document.getElementById("3");
var clr_4_chk = document.getElementById("4");
if(clr_1_chk.style.backgroundColor !== "blue"){
alert("You have already locked the answer!")
}
else if(clr_2_chk.style.backgroundColor !== "blue"){
alert("You have already locked the answer!")
}
else if(clr_3_chk.style.backgroundColor !== "blue"){
alert("You have already locked the answer!")
}
else if(clr_4_chk.style.backgroundColor !== "blue"){
alert("You have already locked the answer!")
}
else{
var clr = "1";
var confirm = window.confirm("Are you sure?");
if (confirm) {
window.document.getElementById(clr).style.backgroundColor ="yellow";
var right_answer = "B";
if(right_answer == "A"){
//correct_ans();
setTimeout(correct_ans,3000);
}
else{
setTimeout(wrong_ans,3000);
}
}
}
}
function click_option_B() {
var clr_1_chk = document.getElementById("1");
var clr_2_chk = document.getElementById("2");
var clr_3_chk = document.getElementById("3");
var clr_4_chk = document.getElementById("4");
if(clr_1_chk.style.backgroundColor !== "blue"){
alert("You have already locked the answer!")
}
else if(clr_2_chk.style.backgroundColor !== "blue"){
alert("You have already locked the answer!")
}
else if(clr_3_chk.style.backgroundColor !== "blue"){
alert("You have already locked the answer!")
}
else if(clr_4_chk.style.backgroundColor !== "blue"){
alert("You have already locked the answer!")
}
else{
var clr = "2";
var confirm = window.confirm("Are you Sure?");
if (confirm) {
window.document.getElementById(clr).style.backgroundColor ="yellow";
var right_answer = "B";
if(right_answer == "B"){
//correct_ans();
setTimeout(correct_ans,3000);
}
else{
setTimeout(wrong_ans,3000);
}
}
}
}
function click_option_C() {
var clr_1_chk = document.getElementById("1");
var clr_2_chk = document.getElementById("2");
var clr_3_chk = document.getElementById("3");
var clr_4_chk = document.getElementById("4");
if(clr_1_chk.style.backgroundColor !== "blue"){
alert("You have already locked the answer!")
}
else if(clr_2_chk.style.backgroundColor !== "blue"){
alert("You have already locked the answer!")
}
else if(clr_3_chk.style.backgroundColor !== "blue"){
alert("You have already locked the answer!")
}
else if(clr_4_chk.style.backgroundColor !== "blue"){
alert("You have already locked the answer!")
}
else{
var clr = "3";
var confirm = window.confirm("Are you Sure?");
if (confirm) {
window.document.getElementById(clr).style.backgroundColor ="yellow";
var right_answer = "B";
if(right_answer == "C"){
//correct_ans();
setTimeout(correct_ans,3000);
}
else{
setTimeout(wrong_ans,3000);
}
}
}
}
function click_option_D() {
var clr_1_chk = document.getElementById("1");
var clr_2_chk = document.getElementById("2");
var clr_3_chk = document.getElementById("3");
var clr_4_chk = document.getElementById("4");
if(clr_1_chk.style.backgroundColor !== "blue"){
alert("You have already locked the answer!")
}
else if(clr_2_chk.style.backgroundColor !== "blue"){
alert("You have already locked the answer!")
}
else if(clr_3_chk.style.backgroundColor !== "blue"){
alert("You have already locked the answer!")
}
else if(clr_4_chk.style.backgroundColor !== "blue"){
alert("You have already locked the answer!")
}
else{
var clr = "4";
var confirm = window.confirm("Are you Sure?");
if (confirm) {
window.document.getElementById(clr).style.backgroundColor ="yellow";
var right_answer = "B";
if(right_answer == "D"){
//correct_ans();
setTimeout(correct_ans,3000);
}
else{
setTimeout(wrong_ans,3000);
}
}
}
}
function correct_ans(){
var clr_1_chk = document.getElementById("1");
var clr_2_chk = document.getElementById("2");
var clr_3_chk = document.getElementById("3");
var clr_4_chk = document.getElementById("4");
if(clr_1_chk.style.backgroundColor !== "blue"){
var clr = "1";
}
else if(clr_2_chk.style.backgroundColor !== "blue"){
var clr = "2";
}
else if(clr_3_chk.style.backgroundColor !== "blue"){
var clr = "3";
}
else{
var clr = "4";
}
//alert('correct');
document.getElementById(clr).style.backgroundColor ="green";
}
function wrong_ans(){
var clr_1_chk = document.getElementById("1");
var clr_2_chk = document.getElementById("2");
var clr_3_chk = document.getElementById("3");
var clr_4_chk = document.getElementById("4");
if(clr_1_chk.style.backgroundColor !== "blue"){
var clr = "1";
}
else if(clr_2_chk.style.backgroundColor !== "blue"){
var clr = "2";
}
else if(clr_3_chk.style.backgroundColor !== "blue"){
var clr = "3";
}
else{
var clr = "4";
}
document.getElementById(clr).style.backgroundColor ="red";
}td{
background-color: blue;
color: white;
}<div class="container">
<!--<form method="post" enctype="multipart/form-data" class="form-horizontal">-->
<table class="table table-bordered table-responsive">
<tr class="text-center">
<td colspan="2">Who was First Prime Minister of India?(15304)</td>
</tr>
<tr>
<td id="1" style="background-color: blue;color: white;" onclick="click_option_A()">A) M K Gandhi</td>
<td style="background-color: blue;color: white;" id="2" onclick="click_option_B()">B) Jawaharlal Nehru</td>
</tr>
<tr>
<td style="background-color: blue;color: white;" id="3" onclick="click_option_C()">C) Rajendra Prasad</td>
<td style="background-color: blue;color: white;" id="4" onclick="click_option_D()">D) Chandra Shekhar Azad</td>
</tr>
</table>
<!--</form>-->
</div>我建议你保留一些 JS 对象来检查选项并提供正确的答案。不建议参考对象样式来获取用户选项。
推荐阅读
- php - 生成按 user_id 分组的订单表，其中汇总了产品数量
- php - Kirby CMS/php：检查文件类型以应用不同的标记？
- javascript - 将对象保存在自身内部
- java - Ajax 不显示返回的 json
- python - Python：将 XML 提取到 DataFrame (Pandas)
- php - 雄辩的多对多 attach() 正在传递一个空模型 ID
- android - RecyclerView.Adapter 在 ViewPager 片段中为空
- linux - KVM 如何在 Intel VMX 中调度多个 VM？
- libreoffice - Libreoffice calc，如何迭代单元格
- sql - 如何跟踪 SQL 触发器？