Alert triggers a transformation in the background

Can someone help me figure out this issue?

https://jsfiddle.net/eddnhc5f/

I've noticed that when I press the key c on Firefox and Microsoft Edge, the background changes before the alert pops up. However, in Opera and Chrome, the background changes after the alert is confirmed.

function getKeyup(key) {
  if (key == null) {
    keycode = event.keyCode;
    // For Mozilla
  } else {
    keycode = key.keyCode;
  }
}

function TEST() {
  document.body.style.backgroundColor = "BLACK";
  alert('Hello');
  return false;
}

function getKey(key) {
  if (key == null) {
    keycode = event.keyCode;
    // For Mozilla
  } else {
    keycode = key.keyCode;
  }
  if (keycode == 67) {
    //alert(condcheck);

    TEST();
    return false;
  }
}
$(document).ready(function() {
  $(document).keydown(function(eventObj) {
    getKey(eventObj);
  });
  $(document).keyup(function(eventObj) {
    getKeyup(eventObj);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
TEST

Answer №1

Take a look at this impressive demonstration

I made changes in the TEST() function.

function getKeyup(key){
    if ( key == null ) {
        keycode = event.keyCode;
    // For Mozilla
    } else {
        keycode = key.keyCode;
    }
}
function TEST()
{
//document.body.style.backgroundColor = "BLACK";
alert('Hello');
document.body.style.backgroundColor = "BLACK";
return false;
}
function getKey(key){
    if ( key == null ) {
        keycode = event.keyCode;
    // For Mozilla
    } else {
        keycode = key.keyCode;
    }
    if (keycode == 67){
        //alert(condcheck);

        TEST();
        return false;
    } 
}
$(document).ready( function (){
    $(document).keydown(function (eventObj){
        getKey(eventObj);
    });
    $(document).keyup(function (eventObj){
        getKeyup(eventObj);
    });    
});

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

Vertical text alignment alongside an image in multiple lines

I have been struggling with aligning multi-line text next to an image in a responsive design. No matter what I try, when the browser window is resized and the text becomes multi-lined, it always falls below the image positioned to the left of it. Can any ...

Having trouble getting the Html onload function to work in Google Sheets App Script?

I'm working with google sheets and I'm in the process of creating a document to track employees who are currently out of the office. I have added a menu option that allows me to remove employee data, which triggers the opening of a sidebar contai ...

Transforming into a serialized division

I am working on creating a custom WISYWIG editor that generates a div with specific inner elements. The goal is to design the div (along with its inner structure), serialize it, store it in a database as a string or JSON format, and later insert it into th ...

Utilizing AJAX to dynamically update a div on a separate webpage

In my application, I have a page called news.jsp that displays a list of news titles. Users can click on a title to read the full body of the news, which is loaded using AJAX within a span tag on the same page. Additionally, I display the top 5 news storie ...

Table in Vue.js not updating correctly when using Bootstrap 4 radio button group

Check out the live code sandbox here: https://codesandbox.io/s/crazy-bardeen-53qxk?file=/src/App.vue I am currently working on adding radio buttons to a Vue.js el-table. Despite my efforts, I am unable to update the state of a variable called ownedFilterG ...

Understanding the Functioning of a Digital Analog Clock Using JavaScript

As a new learner, I found the operation of a Digital analog clock to be quite puzzling. I was presented with an image called clock.png, and I specifically struggled with how the hands of the clock function. Javascript - const deg = 6; // defining the valu ...

The system encountered an issue with the CSS code, indicating "Invalid CSS after "...inear-gradient(": expected selector, was "{"

While attempting to compile my sass code, I encountered the following error message regarding a syntax issue: /* { "status": 1, "file": "C:/Users/faido/Desktop/Productivity/sass css/project/sass/main.sass", "line": 36, "column": 9, "mes ...

"Customize your search experience with a bootstrap search bar featuring multiple input fields

Currently working on a website using Bootstrap and trying to create a filter bar for the items displayed on the page. I am looking to include one or more input fields (highlighted in red) and one or more dropdowns (highlighted in blue). The width of the ba ...

Navigating through Switch cases and If Statements with multiple arguments can be complex for beginners in the world of JavaScript

Hi there, I have a specific case that I'm struggling to find a solution for. I am using Angular with a Firebase back-end to retrieve true or false values from a variable called ref. The variable contains 4 properties with either true or false values - ...

How to prevent a directory from being copied in webpack within Vue CLI

Currently, I am working on a Vue3 project created using Vue CLI 5.0.1 In my setup, there is a public folder that contains static assets necessary for serving the application. However, this folder is quite heavy, around 1GB in size. Whenever I run the npm ...

The JavaScript Top Slide Down effect is malfunctioning

Every time I press the "More" button, I expect some forms to pop out but nothing happens. Can someone please assist me with this issue? <body> <!--Hero Image--> <div class="hero-image"> <div class="hero ...

Best Practices for Developing GWT and CSS

How can we effectively develop an application with the involvement of an external CSS developer in designing the site's look and feel? Our goal is to seamlessly integrate CSS files created by the external developer into our site over multiple iterati ...

Why isn't my page width adjusting to various screen resolutions?

Hello everyone, I'm currently working on a website using two monitors - one with 1920x1080 resolution and the other with 1440x900 resolution. However, the website doesn't seem to fit properly on the 1440x900 screen. I've used percentage widt ...

I am having trouble accessing the input field in my AngularJS controller

Having an issue with my Ionic framework setup using AngularJS. I am unable to access the input field "groupName" in my controller, as it always returns "undefined". I was under the impression that using ng-model would automatically add it to the controlle ...

Switch up the text inside a div using jQuery

I am developing a small grocery shopping application. My goal is to create a page where users can view the contents of their shopping cart by clicking a button. I have designed a template that displays the contents in a white space. The idea is to store ...

Utilizing Angularfire OAuth for Facebook authentication in login strategy

After successfully implementing the code below in the loginCtrl controller and login.html, I encountered some issues with setting up the workflow correctly. My goal is to achieve something like this: //check if the current $scope has authData //if so red ...

ui-router: Issues with utilizing the <ui-view> element within a bespoke directive

In my current project, I am utilizing version 0.3.1 of ui-router. Within my custom directive, there is a <ui-view></ui-view> tag present. <div > <button type="button" class="btn btn-primary btn-circle btn-lg pull-left" ui-sref="u ...

What steps can I take to condense and tidy up this output into a more compact string?

Recently, I've been experimenting with Google's APIs and attempting to create a terminal command that can inform me of the distance and travel time to a particular location. However, I'm running into an issue with the current output format: ...

Ways to direct to dashboard if a user is logged in using AngularJS

As a newcomer to AngularJS, I am facing an issue with redirecting my page to the dashboard once the user has logged in. I receive an access token after login, which I save in cookies. Despite trying solutions from Stack Overflow, I have not been able to re ...

Issue encountered in transmitting information from JSP to servlet

I am facing an issue with receiving data from JSP to servlet. I understand that I need to serialize this data using JSON. In my JSP, I have written the following JavaScript code: var myJSONText = JSON.stringify(items); document.getElementById('test&a ...