Javascript alert function for confirming background color

Question

Javascript alert function for confirming background color

Options are displayed in blue, and using JavaScript, I check if the background color is blue. If it's not, execute the next step; otherwise, display an alert message.

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 selected this option!")
}
else if(clr_2_chk.style.backgroundColor !== "blue"){
alert("You have already selected this option!");
}
else if(clr_3_chk.style.backgroundColor !== "blue"){
alert("You have already selected this option!");
}
else if(clr_4_chk.style.backgroundColor !== "blue"){
alert("You have already selected this option!");
}
else{
var answer = "A";
    var confirm = window.confirm("Are you sure?");
    if (confirm) {
window.document.getElementById(answer).style.backgroundColor ="yellow";
var correct_answer = "B";
if(correct_answer == "A"){
//correct_ans();
setTimeout(correct_ans,3000);
}
else{
setTimeout(wrong_ans,3000);
}
}
}
}

// Repeat similar functions for options B, C, and D

function correct_ans(){
// Code for displaying correct answer
}

function wrong_ans(){
// Code for displaying wrong answer
}

td{
background-color: blue;
color: white;
}

<div class="container">

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

</div>

I attempted to use the provided code, but it consistently alerts me that I've made a selection even when I haven't.

The choices are styled in blue, and my script aims to validate the color before proceeding with the action. It will display an alert message if the color is not blue.

javascript jquery html css

Answer 1

Answer №1

One possible reason for not seeing the style as blue here, but rather an empty string, is because the element.style property only returns inline stylings and not those defined by CSS.

If you require CSS styling, you would need to obtain computed styles using

window.getComputedStyle(<element>)

.

For more information, visit MDN

In the code snippet below, I have added inline styling for td, which is why you will see the style as blue.

// JavaScript functions for handling user options
function click_option_A() {
    // Check if option A is selected
    var clr_1_chk = document.getElementById("1");
    // Check for other selected options
    // Display appropriate message or take action
}

// Repeat similar functions for options B, C, and D

// Function to handle when correct answer is chosen
function correct_ans() {
    // Based on color coding, identify correct answer and apply green background
}

// Function to handle when wrong answer is chosen
function wrong_ans() {
    // Based on color coding, identify wrong answer and apply red background
}

td {
    background-color: blue;
    color: white;
}

<div class="container">
    <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>
</div>

It is recommended to maintain a JS object to track the options and provide the correct answer, instead of relying on object styles to determine the user's selection.

Answer 2

One possible reason for not seeing the style as blue here, but rather an empty string, is because the element.style property only returns inline stylings and not those defined by CSS.

If you require CSS styling, you would need to obtain computed styles using

window.getComputedStyle(<element>)

.

For more information, visit MDN

In the code snippet below, I have added inline styling for td, which is why you will see the style as blue.

// JavaScript functions for handling user options
function click_option_A() {
    // Check if option A is selected
    var clr_1_chk = document.getElementById("1");
    // Check for other selected options
    // Display appropriate message or take action
}

// Repeat similar functions for options B, C, and D

// Function to handle when correct answer is chosen
function correct_ans() {
    // Based on color coding, identify correct answer and apply green background
}

// Function to handle when wrong answer is chosen
function wrong_ans() {
    // Based on color coding, identify wrong answer and apply red background
}

td {
    background-color: blue;
    color: white;
}

<div class="container">
    <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>
</div>

It is recommended to maintain a JS object to track the options and provide the correct answer, instead of relying on object styles to determine the user's selection.

Answer 3

Answer №2

Although Prajwal's response is heading in the right direction, it falls short of completion. When calling getComputedStyle(), an RGB value is returned for backgroundColor. It is essential to compare this value instead of the string "blue". Therefore, in your scenario, use

getComputedStyle(clr_1_chk).backgroundColor === "rgb(0, 0, 255)";

For best practices, consider storing your questions in an array of JavaScript objects. This approach allows you to keep track of correct answers and question lock status. To demonstrate this concept, I have provided a quick dummy example below. While I omitted the setTimeout as per your request, adding it should be straightforward. Ensure that you integrate HTML, CSS, and JS components for seamless operation. Note that the error message after question 4 indicates the absence of further questions to generate. Here is how your code snippet could look:

// Your array of questions with corresponding details
var questions = [...];

// Function to generate each question
function generateQuestion(question) {
  // Implementation logic here
}

// Handling user selection of answer options
function onSelect(e) {
  // Selection handling implementation
}

// Initiate the test by generating the first question
function startTest() {
  // Initialization logic here
}

.correct {
  background-color: green;
}

.incorrect {
  background-color: red;
}

<div id="start"></div>
<table id="test"></table>

The updated snippet from your query has been corrected to function correctly. Although not reflected in my response, renaming your ids using letters [A-Za-z] is highly recommended.

... Your corrected JavaScript code snippet goes here. ...

Answer 4

Although Prajwal's response is heading in the right direction, it falls short of completion. When calling getComputedStyle(), an RGB value is returned for backgroundColor. It is essential to compare this value instead of the string "blue". Therefore, in your scenario, use

getComputedStyle(clr_1_chk).backgroundColor === "rgb(0, 0, 255)";

For best practices, consider storing your questions in an array of JavaScript objects. This approach allows you to keep track of correct answers and question lock status. To demonstrate this concept, I have provided a quick dummy example below. While I omitted the setTimeout as per your request, adding it should be straightforward. Ensure that you integrate HTML, CSS, and JS components for seamless operation. Note that the error message after question 4 indicates the absence of further questions to generate. Here is how your code snippet could look:

// Your array of questions with corresponding details
var questions = [...];

// Function to generate each question
function generateQuestion(question) {
  // Implementation logic here
}

// Handling user selection of answer options
function onSelect(e) {
  // Selection handling implementation
}

// Initiate the test by generating the first question
function startTest() {
  // Initialization logic here
}

.correct {
  background-color: green;
}

.incorrect {
  background-color: red;
}

<div id="start"></div>
<table id="test"></table>

The updated snippet from your query has been corrected to function correctly. Although not reflected in my response, renaming your ids using letters [A-Za-z] is highly recommended.

... Your corrected JavaScript code snippet goes here. ...

Javascript alert function for confirming background color

Answer №1

Answer №2

Similar questions

Is there a way for me to determine the exact coordinates of all buttons on a given webpage?

What is the method for gaining access to variables and functions within bundle.js?

Async Autocomplete fails to display options if the label keys do not match the filtering keys

Tips for managing modal states in functional React components in React Native using React hooks

Access the $event object from an Angular template selector

AngularJS: How to detect the browser's refresh event

What is the best way to execute a randomly chosen function in JavaScript?

What impact does setting a variable equal to itself within a Dom Object have?

Shifting the key of a choropleth map with R, rMaps, and datamaps

The React Query devtools are failing to display

Utilize ModifyDOM to erase text triggered by selecting a radio button

Using Iron Router to incorporate CSS animations with onBefore and onAfter actions

Setting a fixed height for layout with scroll functionality in Twitter Bootstrap 3.2.0

What techniques can I use to modify an object while it's being iterated through?

What could be causing the inconsistency in triggers for the "keypress" event handler?

Choosing a portion of a polyline - Google Maps Application Programming Interface

Employing fetch to send a POST request for inserting data into a JSON server database

Generate a unique JavaScript token using user-specific information

What is the best way to incorporate and execute a separate JavaScript file in a Node application using Express JS?

Utilizing the spread operator to map an array within another array