CODEWITHSUNDEEP
javascriptjqueryhtmlcss
PBM
PBM

Reputation: 153

Checking background color in javascript and alert

Options are in blue color, and with the help of javascript, I am checking whether the option background color is blue or not if it is not blue then execute ahead else alert some text.

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>

I tried the above code, but it always alert me that I have locked the answer but I haven't.

Options are in blue color, and with the help of javascript, I am checking whether the option background color is blue or not if it is not blue then execute ahead else alert some text.

Upvotes: 0

Views: 1282

Answers (2)

Cory Kleiser
Cory Kleiser

Reputation: 2024

While Prajwal is on the right track his answer is not quite complete. getComputedStyle() will return an RGB value when backgroundColor is called. You will need to check against that instead of the string "blue". So in your case getComputedStyle(clr_1_chk).backgroundColor === "rgb(0, 0, 255)";

However, best practice would be to store your questions in an array of javascript objects. There, you could have the correct answer stored and whether or not the question is locked. As requested I have mocked up a quick dummy example of what that code would look like. I'm essentially using JS to create the HTML. I didn't include the setTimeout that you requested but I'm sure you can add this easily. Please make sure you include the HTML, CSS, and JS for this to work. Please note the error after question 4 is just saying there are no more questions to generate. Hope this gives you something to start with:

var questions = [{
    questionId: "question1",
    answerId: "B",
    question: "Who was First Prime Minister of India?(15304)",
    options: ["A) M K Gandhi", "B) Jawaharlal Nehru", "C) Rajendra Prasad", "D) Chandra Shekhar Azad"],
    answer: "B) Jawaharlal Nehru",
    locked: false
  },
  {
    questionId: "question2",
    answerId: "D",
    question: "What is 2 + 2",
    options: ["A) 1", "B) 2", "C) 3", "D) 4"],
    answer: "D) 4",
    locked: false
  },
  {
    questionId: "question3",
    question: "What is 2 - 1",
    answerId: "A",
    options: ["A) 1", "B) 2", "C) 3", "D) 4"],
    answer: "A) 1",
    locked: false
  },
  {
    questionId: "question4",
    answerId: "C",
    question: "What is 2 + 4",
    options: ["A) 1", "B) 2", "C) 6", "D) 4"],
    answer: "C) 6",
    locked: false
  }
];

var allHtml;
var table = document.getElementById("test");
var i = 0;
document.querySelector("#start").innerHTML = `<button onclick="startTest()">START TEST</button>`;


function generateQuestion(question) {
  i += 1;
  var newQuestion = `
        <tr class="text-center">
            <td colspan="2">${question.question}</td>
        </tr>
        <tr>
            <td id="A${i}" class="${question.questionId}" onclick="onSelect(event)">${question.options[0]}</td>
            <td id="B${i}" class="${question.questionId}" onclick="onSelect(event)">${question.options[1]}</td>
        </tr>
        <tr>
            <td id="C${i}" class="${question.questionId}" onclick="onSelect(event)">${question.options[2]}</td>
            <td id="D${i}" class="${question.questionId}" onclick="onSelect(event)">${question.options[3]}</td>
        </tr>
    `;
  allHtml = table.innerHTML + newQuestion;
  table.innerHTML = allHtml;
}

function onSelect(e) {
  var selection = e.currentTarget;
  var questionId = e.currentTarget.className;
  var currentQuestion = questions.find(function(q) {
    return q.questionId == questionId
  });
  if (currentQuestion.locked) {
    alert("Question already answered");
    return;
  } else if (currentQuestion.answer === e.currentTarget.innerText) {
    alert("Correct!!!");
    currentQuestion.locked = true;
    selection.classList.add('correct');
  } else {
    alert("Incorrect...");
    currentQuestion.locked = true;
    selection.classList.add('incorrect');
    document.getElementById(currentQuestion.answerId + i).classList.add('correct');
  }
  generateQuestion(questions[i]);
}

function startTest() {
  generateQuestion(questions[i]);
  document.querySelector("#start").innerHTML = '';
}
.correct {
  background-color: green;
}

.incorrect {
  background-color: red;
}
<div id="start"></div>
<table id="test"></table>

What I'm doing here is setting the answer classes to the question id in the object. Then using that I get the correct question out of the answers array. I check to make sure the answer is not locked, then I get the innerText of the answer and check that against the answer id in the object. Lastly I lock the question after the user answers and apply the css classes to the correct answer and the incorrect selection if applicable. Once all that is done, I call generateQuestion to create the next question.

And here is the updated code from your question that works correctly. Also, although it's not updated in my answer you really should rename your id's. It's best to begin them with a letter [A-Za-z].:

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");
  console.log(getComputedStyle(clr_1_chk).backgroundColor);
  if (getComputedStyle(clr_1_chk).backgroundColor != "rgb(0, 0, 255)") {
    alert("You have already locked the answer!")
  } else if (getComputedStyle(clr_2_chk).backgroundColor != "rgb(0, 0, 255)") {
    alert("You have already locked the answer!")
  } else if (getComputedStyle(clr_3_chk).backgroundColor != "rgb(0, 0, 255)") {
    alert("You have already locked the answer!")
  } else if (getComputedStyle(clr_4_chk).backgroundColor != "rgb(0, 0, 255)") {
    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 (getComputedStyle(clr_1_chk).backgroundColor != "rgb(0, 0, 255)") {
    alert("You have already locked the answer!")
  } else if (getComputedStyle(clr_2_chk).backgroundColor != "rgb(0, 0, 255)") {
    alert("You have already locked the answer!")
  } else if (getComputedStyle(clr_3_chk).backgroundColor != "rgb(0, 0, 255)") {
    alert("You have already locked the answer!")
  } else if (getComputedStyle(clr_4_chk).backgroundColor != "rgb(0, 0, 255)") {
    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 (getComputedStyle(clr_1_chk).backgroundColor != "rgb(0, 0, 255)") {
    alert("You have already locked the answer!")
  } else if (getComputedStyle(clr_2_chk).backgroundColor != "rgb(0, 0, 255)") {
    alert("You have already locked the answer!")
  } else if (getComputedStyle(clr_3_chk).backgroundColor != "rgb(0, 0, 255)") {
    alert("You have already locked the answer!")
  } else if (getComputedStyle(clr_4_chk).backgroundColor != "rgb(0, 0, 255)") {
    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 (getComputedStyle(clr_1_chk).backgroundColor != "rgb(0, 0, 255)") {
    alert("You have already locked the answer!")
  } else if (getComputedStyle(clr_2_chk).backgroundColor != "rgb(0, 0, 255)") {
    alert("You have already locked the answer!")
  } else if (getComputedStyle(clr_3_chk).backgroundColor != "rgb(0, 0, 255)") {
    alert("You have already locked the answer!")
  } else if (getComputedStyle(clr_4_chk).backgroundColor != "rgb(0, 0, 255)") {
    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 (getComputedStyle(clr_1_chk).backgroundColor != "rgb(0, 0, 255)") {
    var clr = "1";
  } else if (getComputedStyle(clr_2_chk).backgroundColor != "rgb(0, 0, 255)") {
    var clr = "2";
  } else if (getComputedStyle(clr_3_chk).backgroundColor != "rgb(0, 0, 255)") {
    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 (getComputedStyle(clr_1_chk).backgroundColor != "rgb(0, 0, 255)") {
    var clr = "1";
  } else if (getComputedStyle(clr_2_chk).backgroundColor != "rgb(0, 0, 255)") {
    var clr = "2";
  } else if (getComputedStyle(clr_3_chk).backgroundColor != "rgb(0, 0, 255)") {
    var clr = "3";
  } else {
    var clr = "4";
  }
  document.getElementById(clr).style.backgroundColor = "red";
}
td {
  background-color: blue;
  color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<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>

Upvotes: 3

Prajwal
Prajwal

Reputation: 4000

The reason you are not getting the style as blue here, but empty string, Because element.style returns only in-line stylings, not those defined by CSS.

If you need CSS styling you will have to obtain computed styles using window.getComputedStyle(<element>).

More info at MDN

In the below snippet, I've set up inline styling for td. And hence you will get the style as 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>

I would suggest you to keep some JS object to check the options and provide correct answer. It is not advised to refer object style to get user option.

Upvotes: 4

Related Questions