Check out this fiddle: https://jsfiddle.net/qxnk05ua/2/
I'm trying to get the background color to change when I click the button, but it's not working. Can you help me figure out why?
This is the Javascript code I'm using:
$(document).ready(function(){
$('.block button').click(function(){
$(this).parent().toggleClass('active');
});
});
Make sure to include the jquery library in your HTML code
Download jQuery library here: https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.js
Don't forget to include the jQuery reference in your code. Here's the necessary script:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
Check out this working demo
$(document).ready(function(){
$('.block button').click(function(){
$(this).parent().toggleClass('active');
});
});.block{
width:200px;
height:200px;
background-color:#FFF;
}
.block.active{
background-color:#333;
}
.block button{
padding:5px;
color:#333;
width:100px;
margin-left:calc(50% - 50px);
margin-top:calc(50% - 20px);
border:none;
text-align:center;
background-color:#FAC657;
border-bottom:3px solid #CFA54A;
cursor:pointer;
}
.block button:active{
margin-top:calc(50% - 17px);
border-bottom:none;
outline:none;
box-shadow:none;
-moz-box-shadow:none;
-webkit-box-shadow:none;
}
.block button:focus{
outline:none;
box-shadow:none;
-moz-box-shadow:none;
-webkit-box-shadow:none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="block">
<button>
change color
</button>
</div>There is an array named NAME being created. Weirdly, the code seems to be functioning fine for alert('test1') but encounters an issue when reaching alert('test2') $(document).on('submit','form',function() { ...
It feels like the [insertLongNumber]th time someone has asked this question, and despite my research efforts, I'm unable to find a fitting solution. So here it goes. I'm currently tackling a dynamic dropdown conundrum using PHP and AJAX in CodeI ...
I am currently working on implementing a scrolling progress bar to show users how much of an article within a div they have read. For reference, something similar can be seen on this site. I have created my custom progress bar and coded it on fiddle, whe ...
I am having trouble adding a class to my JavaScript script in order to animate the images created in JavaScript to fall off the page. I have tried using the code element.classList.add("mystyle");, but every time I insert it, my JavaScript stops working. T ...
const express = require('express'); const cors = require('cors'); const app = express(); app.use(express.json()) app.use(cors()); app.post('/', (req,res) => { console.log(req.body); res.send('received') ...
Struggling to find the perfect way to utilize variables returned by Vue functions in CSS inline styles, specifically with the "width" style. I have two variables that are returned to the template and can be used with the {{}} syntax, but not directly as a ...
In the past, EMs were favored over pixels for font size because they could scale with IE6 while pixels could not. Nowadays, modern browsers can handle pixel-sized font scaling correctly. Another advantage of EMs is that they cascade, unlike pixels. But if ...
Is there a way to upload an image via an input field and display it? I want to showcase a profile picture that can be saved in a database. The process should be simple for the user, with the ability to easily upload and view the image. function Save() { ...
Stripping both a comma and any non-numeric characters from a string can be a bit tricky, especially with RegExs involved :). Is there anyone who could provide assistance on how to achieve this? I need to remove commas, dashes, and anything that is not a ...
Is there a way to hide a <div> element if my data equals zero? I have an if condition set up as follows: if ($_SESSION['m1'] == 0) { I want the <div> tag to be deactivated, here is the code snippet for the <div> in question: ...
Trying to figure out how to create a drop-down menu from CSS tricks, I found this code snippet: <nav role="navigation"> <ul> <li><a href="#">One</a></li> <li><a href="#"&g ...
Is it possible to combine two predefined Record types in TypeScript? Consider the two Records below: var dictionary1 : Record<string, string []> ={ 'fruits' : ['apple','banana', 'cherry'], 'vegeta ...
Can someone help with an issue I'm having in my code? Here is the snippet where I create a table data element: html += "<td data-id='test' class='journal' style='max-width:200px;'>"+record.source_account_code+"& ...
JSON data: [ { "destination": "Hawaii", "Country": "U.S.A", "description": "...and so forth", "images": { "image": [ "hawaii1.jpg", "hawaii2.jpg", ...
I understand that all I need to do to achieve this is insert <input type="file" id="photo" accept="image/*;capture=camera"> However, my lack of coding skills has caused issues with actually grabbing and using the image selected/taken by the user. ...
Having trouble centering an input field with an icon after it in a div. I can center the input text easily using text-align:center, but struggling to center the icon added using ::before. The search text is centered, but not the icon How can I center bot ...
I am encountering an issue when trying to upload an image from an app that has been converted into a base64 string to a Ruby on Rails server. The app is developed using Titanium. However, after retrieving and decoding the image string back into an image, ...
Having experience with gulp, I am well-versed in setting up a distinct configuration for each environment within a single configuration file. This allows for running gulp dev to initiate the server using the development environment configuration, gulp stag ...
I have been attempting to close the browser in my Selenium Jmeter last sampler thread, but I keep encountering the following error: INFO c.g.j.p.w.s.WebDriverSampler: WebDriver has been quit. 2024-02-01 22:53:24,989 ERROR c.g.j.p.w.s.WebDriverSampler: Sess ...
I am in need of a vertical stack of blocks, which may include scrolls, contained within a fixed-sized container without scrolls. The number of visible blocks is dynamically managed by JavaScript code. Some blocks can be hidden or shown, and when a block is ...