When the user clicks, the background color will change, followed by the execution of another function

When I click on the correct answer in my quiz, I want the background color of a div to change and then after 1 or 2 seconds, make that div disappear. This is working correctly, but I would like the background color of the div to change first before executing this function.

    function correctAnswer() {
if (twoQuestions.style.display = "none") {
    twoQuestions.style.display = "block"
    threeQuestions.style.display = "none"
    fourQuestions.style.display = "none"
    fiveQuestions.style.display = "none"
    oneQuestion.style.display = "none"
    }
} else {
    alert("Wrong answer")

}

}

javascriptfunctionbackgroundonclick

Answer №1

Here is what I believe you are looking for:

function changeBackgroundColor() {
    document.getElementById("element").style.backgroundColor = "yellow";
    setTimeout(correctAnswer, 3000); //3000 milliseconds = 3 seconds
}
function correctAnswer() {
    if (questionTwo.style.display = "none") {
        questionTwo.style.display = "block";
        questionThree.style.display = "none";
        questionFour.style.display = "none";
        questionFive.style.display = "none"; 
        questionOne.style.display = "none";
    } else {
        alert("Incorrect answer");
    }
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Increase the time of a Date by 10 seconds

Is there a way to increase the time of a JavaScript date object by 10 seconds? For example: var currentTime = new Date(); var currentSeconds = currentTime.getSeconds() + 10; currentTime.setSeconds(currentTime.getSeconds() + currentSeconds); ...

javascript

Is there a way to choose multiple dropdown items that share the same header?

Utilizing the Fluent UI React Northstar Dropdown component in my React project, I've encountered an issue with multiple item selection. It seems that when there are several items sharing the same header value, only one can be selected at a time. What ...

javascriptreactjsfluent-uifluentui-react

Incorrect variable value retrieved in AJAX callback

I am working on a code that utilizes JSON to validate VAT numbers. My main goal is to identify which VAT numbers are valid BTW[0] = 'NL1234567890'; BTW[1] = 'NL1233537891'; BTW[2] = 'NL1232346894'; var arraylength = BTW.leng ...

javascriptjson

Guidelines for displaying a field as plain text within ng-repeat without embedded HTML code

I am working with a data structure that looks like this: books = [ { id: 'id1', content: { name: '<p><span>name</span><span>1</span></p>&apo ...

javascriptjqueryangularjsfullcalendarfullcalendar-scheduler

Storing retrieved data from an Ajax request into a variable

Presented below is a function that utilizes Ajax: function fetchSource(callback){ var ajaxRequest; try{ ajaxRequest = new XMLHttpRequest(); } catch (e){ try{ ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP"); ...

javascriptajaxvariables

Utilizing ExpressJS: importing Multer module in a separate file

After following the instructions in the GitHub readme file for multer, I encountered a dilemma. The readme suggested calling multer in middleware as shown below: app.js var multer = require('multer') app.post('/upload', upload.single( ...

javascriptnode.jsexpressmiddlewaremulter

Head styles for tinyMCE

When viewing the tinyMCE example on the official website using Firefox, you may notice the editor blinking. This issue seems to only occur in Firefox, possibly due to external CSS files for the editor. I am considering adding all CSS rules directly into th ...

javascriptcssiframetinymce

Executing PHP scripts using Ajax

Check out the code snippet below: <?php //echo $this->Html->css(array('bootstrap', 'mark', 'style')); echo $this->Html->script(array('timer','swfobject','bootstrap.min.js')); // ...

javascriptphpjqueryajaxcakephp

Tips for refreshing the modified toggle in angular2

I currently have a newsletter subscription that is initially set based on the newsletter I receive when the user logs in. However, when I toggle the newsletter option, I receive a "successfully updated" message but the newsletter remains set to false even ...

javascriptangulartypescript

Is there a way to retrieve the current object as a JSON string from inside the object using either jquery or javascript?

Looking for a way to return the current instance as a JSON text so that the values can be sent via an ajax request to a server-side script. Uncertain about where to apply the "this" keyword in a jQuery selector function Actor(){ this.input=function(pnam ...

javascriptjqueryjsonoop

Should I use "npm install" or "sudo npm install -g"

When it comes to installing certain packages, sometimes running sudo npm install -g is necessary, while for others simply using npm install is enough. What causes this difference and why does it exist? Take the following examples: npm install -g grunt-c ...

javascriptnode.jsnpmsudo

I am having trouble with an undefined variable in my expressjs server.js file. How can I properly reference

When setting up ExpressJS, I have a file named server.js where the following code is executed: import { call_method } from '../hereIam.mjs'; const process_db = async () => { console.log(this); // undefined call_method(this); }; console. ...

javascriptnode.jsexpressthis

Is it possible to generate HTML form fields with fixed positions when using Orbeon forms?

Is there a way in Orbeon forms to position input fields at specific coordinates, relative to a background image? I currently have a paper form that fills an entire page. My goal is to use the scanned image of this form as a background and then overlay inp ...

javascripthtmlformsorbeon

Angular JS: How to dynamically add and remove checkboxes in ng-repeat?

Currently, I have successfully implemented a Miller column using Angular and Bootstrap. To view the functionality in action, you can check out the code snippet at this link. In the second column of my setup, clicking on a word opens up the third column. ...

javascriptangularjscheckboxangularjs-ng-repeat

Warning: Trying to access an undefined property within an async function in Typescript

Recently, I have been tackling an issue with my API that is built with TypeScript and NodeJS. The problem arises when my Promises seem to not resolve correctly in the following code snippet: async function retrieveData() { return new Promise((reso ...

javascripttypescript

Picture is unavailable for viewing - (Express, Pugjs)

I'm having trouble getting an image to display on my page using a pug template. Despite following the setup and files correctly, the image still isn't showing up. Here is what I have: index.js app.use('/images', express.static(path.r ...

javascriptexpresspugpugjs

Troubleshooting: ng-disabled feature is not properly functioning with Bootstrap buttons

I am currently using a combination of bootstrap.js and angular js in my project. The code snippet I have is as follows: //snippet from the controller $scope.isWaiting = true; $scope.promise = $http.get("voluumHandler.php?q=campaigns&filter=traffic-sou ...

javascriptajaxangularjstwitter-bootstrap

Tips on incorporating multiple lines of placeholder text into a textarea field:

Is it possible to add multi-line placeholder text in a textarea? I found this solution, but unfortunately it does not work on Mozilla and Safari. It seems Chrome is the only browser where this method works: $('#nameTxtBox').attr("placeholder", ...

javascriptjquerytextareaplaceholder

Guide to Sending and Scheduling Notifications through HTML 5's Notification Web APIs

Is it possible to utilize Web APIs to Schedule Notifications and send them at specific times? I am working on a CMS application that allows users to schedule and send push notifications for their mobile apps. I am interested in implementing something sim ...

javascripthtmlweb-notifications

What is the best way to incorporate an assets folder into a Vue component?

After following Vue's official Webpack template, I attempted the following: data () { photoEditorAssets: require('../assets/img/photoeditorsdk/assets'), } mounted () { var editor = new PhotoEditorSDK.UI.DesktopUI({ //eslint-disable-li ...

javascriptwebpackvue.jsassetsphotoeditorsdk