Change the background color with a click in HTML

Is it possible to include two onclick arguments in a button tag like this:

<div id="Spacer" align="center">
      <button id="button" onclick="document.getElementById('pop').style.display='block';$('#grayout').toggle(900); return false;">
        <a id="Text">Click to go to Google</a>

      </button>
    </div>

This is the CSS for the onclick argument:

#grayout {
   position: fixed;
   left: 0px;
   top: 0px;
   height: 100%;
   width: 100%;
   background-color: black;
   opacity: 0.5;
  }

Unfortunately, this setup does not work as expected. Is there a way to open the 'pop' popup box and gray out the background without using external JavaScript?

javascripthtmlcss

Answer №1

To implement this functionality, simply do the following:

    $('#button').on('click', function() {
        document.getElementById('pop').style.display='block';
        $('#grayout').toggle(900);
    });

This code can be placed within a script tag in your HTML file.

Explanation: This code sets up an event listener for when the element with the id of "button" is clicked. When this element is clicked, the code inside the curly braces will be executed by JavaScript.

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

What is the best way to retrieve the coordinates of highlighted text within input or textarea fields?

I am currently developing a Chrome application that involves injecting JavaScript code into a webpage. Whenever a user selects text, a popup appears next to the selected text. To achieve this, I have implemented the following code to retrieve the coordinat ...

javascriptjquerygoogle-chrome

Refresh the data in the DataTables table using a fragment

Currently, I am attempting to reload a fragment using ajax. However, after the reload, my event select and row count do not function properly. It seems that the default configuration is not behaving as expected: @PostMapping("/admin/add") ...

htmlajaxspring-bootdatatablesthymeleaf

Establish a connection with the hivemq broker using MQTT protocol

Within my app.js file: const mqtt = require('mqtt') const client = mqtt.connect('mqtt://localhost:1883') topic = 'testTopic' client.on('connect', ()=> { client.subscribe(topic) }) client.on(&a ...

javascriptnpmmqtthivemq

Node.js with Koa: Discontinuation of generator usage on the next step

I am working with a custom object in which I pass a parameter, and then I need to search for all documents in my collection and process them. Here is the code for my custom object: var db = require('../lib/db'); function Widget(n,l,c,o,t,p) { ...

javascriptnode.jskoa

What is the best way to ensure the text in my paragraph div is aligned to the left and displays in a vertical line?

I am struggling to align the words in my paragraph to the left in a straight line, instead of the zig-zag placement they currently have. Any guidance on achieving this would be greatly appreciated. /* Styling for tablet-sized screen*/ @media (min-width ...

htmlcss

Error encountered: Trying to access the property 'top' of an undefined object while selecting a menu item to navigate to a different page

Whenever I try to use my menu on a mobile device, I encounter some issues. The menu functions perfectly on a desktop, but as soon as I switch to a mobile phone, I find myself unable to navigate to different pages. The only functionality that seems to work ...

javascripthtmlbootstrap-4

Disable video playback on Internet Explorer 7 (with Rob W's method)

I've successfully implemented this script created by Rob W from StackOverflow, but unfortunately it's not working on IE7. You can view the script on this jsfiddle page. I've also tried importing this to enable JSON on IE, but the issue pers ...

javascriptinternet-explorer-7youtubeyoutube-javascript-api

Caution: PropType validation failed - The prop `rrrr` provided to `sportsMockUpStandard` is not valid

https://gist.github.com/js08/dfeab2df8b68240297eb I am currently working on creating a test case for a jsx file. While I have successfully passed proptypes in some cases, there are instances where I face errors due to incorrect prop handling. The error ...

javascriptjqueryhtmlreactjsmocha.js

I am currently grappling with a JavaScript mouse over event and encountering some difficulties

I am looking to dynamically change the background image of my body div whenever a link is hovered over. Here is a snippet of my code: JAVASCRIPT: var i = 0, anchors = document.querySelectorAll("zoom"), background = document.getElementById("body") ...

javascripthtmlcss

Discover real-time results of accordions and their information as you search

I am looking to add a search functionality to filter through a list of accordions and their contents on my HTML page. I want the search box to be able to search both the accordion titles and the content within each accordion. This is my first time posting ...

javascriptjqueryhtmlcss

Guidelines for creating a uniform table border with varying border thicknesses

I have created a crossword puzzle generator that arranges words by rows and fills each cell with one letter. The keywords are distinguished by a wider border and a gray background, as shown in this image. Here is the general structure of my code: #cross ...

css

Creating an intelligent auto-complete feature for json arrays in the ACE.js editor

Recently, I integrated Ace.js into my development workflow as a JavaScript editor. I even went ahead and created a custom JS file to enhance the functionality of my Ace editor with an autocompleter feature. Here's a snippet from my personalized autoC ...

javascriptjsonautocompleteace-editor

Using Dynamic Jinja HTML to Select Elements Dynamically

I have a unique system where forms are dynamically created based on values from a dictionary. Each form is assigned an ID corresponding to the key value and initially hidden. <div id="subforms" style="display: none" > {%for k, v in options.items() ...

javascriptpythonhtmljinja2

How can I retrieve the chosen value from an AJAX combobox using JavaScript in an ASP.NET C# application?

How can I retrieve the selected value from an AJAX combobox item using JavaScript in ASP.NET C#? Below is the code snippet: <asp:ComboBox ID="dropdown_dest" runat="server" Width="90%" onfocusout="blurFunction()" AutoCompleteMode="SuggestAppend" CssCla ...

javascriptc#jqueryasp.netajax

What is the process for attaching a right ribbon label onto a card in Fomantic UI components?

I am completely new to Fomantic (and web development in general) and I'm attempting to create a website featuring a card with a ribbon label on the right side. I saw similar designs in the documentation where they used a segment instead. However, when ...

htmlcssfomantic-ui

The onkeyup event is not functioning properly, whereas the onchange event is working

I have encountered an issue where both the onkeyup and onchange functions are present on the same page. The problem arises when the onchange function performs an action, causing the onkeyup function to not respond accordingly. However, if I do not interact ...

javascriptphpajax

Please upload the image by clicking the "Upload Files!" button instead of relying on the input change

I am looking to enhance my image uploading process by allowing users to upload multiple images after clicking the Upload Files! button, rather than relying on the input change event. Below is the jQuery code I am using (which I found here): index.html &l ...

javascriptjqueryfile-uploadupload

VueJS 3 Alert: The export component specified was not found in the specified path '@/components/...vue'

Currently, I am working with VueJS 3 applications that involve vue-router, vue, and core-js components. In my project, I have a file named Home.vue located in the views directory with the following structure: <template> <div class="wrapper& ...

javascriptvue.jsvuejs3warningsvue-composition-api

Leveraging Prototype's Class creation function to declare confidential and safeguarded attributes and functions

Looking for a solid approach to defining private and protected properties and methods in Javascript? Check out this helpful discussion here on the site. Unfortunately, the current version of Prototype (1.6.0) doesn't offer a built-in method through it ...

javascriptoopprivateprototypejsprotected

The CSS background-image fade transition is optimized for Chrome browsers

HTML: <a class="navbar-brand page-scroll" href="#intro"></a> CSS: .navbar-custom .nav li a.navbar-brand { width: 70px; height: 62px; background: url(myimg.png) no-repeat; background-size: 70px 62px; display: block; po ...

htmlcsscross-browsercss-transitions