In what way can the button display the permission directly on the page?

When the website notification is granted, a green button should be displayed. If it is denied, show a red button instead. The button comes with a CSS style and a checkbox but does not have the permission to grant or allow any permissions on the page.

Button HTML

<label for="button">
    <input type="checkbox" id="button" />
    <span class="arka"></span
</label>

Sample JavaScript Code

function checkNotificationPermission() {
    if (!("Notification" in window)) {
    } 
    else if (Notification.permission === "granted") {
    }
    else if (Notification.permission !== 'denied') {
    }
}

Answer №1

Considering the lack of specific context on where the function should be called and what notification entails, I will simply provide instructions on adding a CSS class to an element.

var button = document.getElementById('button');
button.setAttribute('class', grantedClass);

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

The 'fn' argument passed is not a valid function, instead it is a string

I am encountering an issue while trying to retrieve data from my server. The console doesn't provide any specific information about the error. My objective is to fetch JSON data from the server and use it to display the required information. I am util ...

Display a loading animation before the page loads upon clicking

$("#button").click(function(){ $(document).ready(function() { $('#wrapper').load('page.php'); }); }); <div id="wrapper"></div> <div id="button">click me</div> I would like to display a loading ic ...

Placement of Buttons Inside a Division Tag

Is there a better way to align button 3 & 4 in a vertical column next to button 1 & 2 without using tables in CSS? See the working example below: https://jsfiddle.net/Jaron787/0te3cs66/1/ Code: HTML <div id="lse" class="display"> <di ...

What is the best way to keep a header row in place while scrolling?

I am looking to keep the "top" row of the header fixed or stuck during page scrolling, while excluding the middle and bottom rows. I have already created a separate class for the top row in my header code: view image description ...

include the parent DOM element's class into its child element

I am looking to include the class of the parent DOM node in its child DOM element. For instance, let's consider the following structure: <ol class="test1"> <li> <li> <ol> I want the child ol elemen ...

Fulfill the promise once all map requests have been completed

Currently, my focus is on developing a bookmark page that retrieves bookmark results with the respective restaurant IDs. Once the response is mapped, I populate an array with objects. My objective is to ultimately resolve the entire array in order to mani ...

Javascript initial keypress delay for movement in 3D space

I am aiming for a seamless movement experience when pressing a key - with the object initiating its movement upon the first press and then continuously moving while the button is held down. //setting movement speeds var xSpeed = 0.5; var zSpeed = 0.5; do ...

Retrieving the path parameter in a Next.js APIabstractmethod

I need assistance with extracting information from the file routes/api/[slug]/[uid].ts Specifically, I am looking to retrieve the slug and uid within my handler function. Can anyone provide guidance on how to achieve this? ...

The element cannot be clicked at this point as another element would intercept the click:

Having an issue with clicking a button at the top of the page. The CSS selector works fine in my local Eclipse environment, but when trying to run it on Jenkins server on my local machine, it fails with an error stating that the element is not clickable. T ...

Display the actual runtime hyperlink while utilizing the asp tag helper

Whenever I use asp-tag helpers to create a hyperlink, the result is displayed like this: <a asp-page="/demo">Demo</a> The actual html output looks like this: <a href="/test/Demo">Demo</a> However, instead of displaying "Demo" to ...

Bottom-aligned footer that remains in place instead of sticking to the page

I am attempting to position a footer at the bottom of the page, without it being sticky. Instead, I want it to remain at the bottom in case the user scrolls down there. Although it technically "works," there appears to be some white space below the footer ...

Error is thrown when attempting to access nested elements using GetElementsByClassName within the window.onload function

I have a funky looking table on my webpage, here's an example: <body> <table class="table table-bordered"> <thead> <tr> <th>#</th> <th>Product name</th> <th>Product ...

Utilizing Express.js: A Guide to Fetching File Downloads with a POST Method

Although GET requests are successful, I am facing challenges when using POST to achieve the same results. Below are the different code snippets I have attempted: 1. app.post("/download", function (req, res) { res.download("./path"); }); 2. app.post ...

Access and retrieve numerous variables from the data object sent back through an ajax request

When using jQuery to make an ajax call to an MVC controller, the goal is to return multiple variables from the controller. What is the best way to package this data in the controller and then extract it using jQuery? ...

Issue with jquery_ujs: Font Awesome spinning icon animation functions properly in Chrome but not in Safari

I've integrated font-awesome-rails into my Rails project. When a user clicks the submit button on a form: The submit button should display an animated font-awesome spinner and change text to "Submitting...". The button must be disabled to prevent m ...

What is the best way to dynamically retrieve a URL and utilize it as a hyperlink using jQuery?

Is there a way to retrieve the current URL and use it as a link in jQuery? For example, if my browser is currently on page mysite.com/index.php?page=post&see=11, I would like to use this URL in my link and append /new/ after the domain name, like so: ...

What is the process for incorporating data- attributes into ExtJs-generated HTML?

Currently working with ExtJs 4.1. In the process of developing a panel (for instance), I want to incorporate one or more "data-" attributes in the generated html, such as data-intro="some text" data-step="1" Any tips on how to achieve this? ...

Enhance user interactivity on your website by incorporating jQuery and CSS for

<table id="tab"> <tr aaa="one" bbb="ooo"><td>xxx</td><</tr> <tr aaa="two" bbb="one"><td>xxx</td><</tr> <tr aaa="three" bbb="one"><td>xxx</td><</tr> ...

Determining age in a Class upon instance creation

Is there a way to encapsulate the age calculation function within the Member Class without resorting to global space? I want to automatically calculate and set an age when creating an instance. Currently, I have a function that works, but I'm curious ...

Deleting outdated files in a temporary uploads directory - NodeJS best practices

My process for removing old files from a tmp upload directory involves the code below: fs.readdir( dirPath, function( err, files ) { if ( err ) return console.log( err ); if (files.length > 0) { files.forEach(function( file ) { ...