<input type='button' class="myButton" onclick="document.body.style.cssText+=';background-image: url(img01.jpg);background-repeat: no-repeat; -moz-background-size: cover; -o-background-size: cover; background-size: cover;';" value="Sehr-Gut">
Is it possible to optimize this code by creating a separate CSS style and applying it within the onclick event?
<input type='button' class="myButton" value="Sehr-Gut">
$('.myButton').click(function(){
document.body.style.cssText+='background-image:url(img01.jpg);background-repeat: no-repeat; -moz-background-size: cover; -o-background-size: cover; background-size: cover;';
});
A more straightforward approach could be using JavaScript to apply a class to the <body> element:
$('.myButton').click(function(){ $('body').addClass('newClass'); });
.newClass {
background-image: url(img01.jpg);
background-repeat: no-repeat;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
};
If you're looking to achieve a certain effect, JQuery might be necessary. You can try implementing @philtune's method or take a different approach:
<input type='button' class="myButton"
onclick="$(body).addClass('some-classname')"
value="Great">
Then in your CSS file,
body.some-classname {
background-image: url(img01.jpg);
background-repeat: no-repeat;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
I've recently started using Material UI and I'm facing some difficulties. One of the challenges I'm encountering is with a button component export default function TheButton(props: PropsWithChildren<Props>) { const { className, hover ...
How can I set a default value for a dynamically filled dropdown menu featuring all 12 months in KnockoutJS? I want the default value to be the current month. This is how I am populating the dropdown with information: self.setMonthData = (data ...
I came across a select object that looks like this: <select id="mySelect" onchange = "start()" > <option>Apple</option> <option>Pear</option> <option>Banana</option> <option>Orange</option> < ...
My unordered list contains a href link. Initially, only the welcome page is visible on page load. Upon clicking the list for the first time after page load, the desired results are displayed in the corresponding div as expected. The issue arises when swi ...
My client has a specific requirement for the webpage to be positioned in the center of the screen. To achieve this, I have enclosed the entire webpage within a div element called "mainpage". Here is the CSS code: #mainpage { position:relative; wi ...
Looking to create a visually appealing page that always fills the entire screen? Check out this code snippet that does just that: #posts{ width:100%; height:auto; background:#666; } .entry{ float:left; margin-left: 4%; margin-top:10 ...
For my University project, I am developing an HTML and JavaScript-based mp3 player using the Web Audio API. You can check out the progress of this project by visiting this link: While everything is running smoothly on Firefox and Chrome, Safari is posing ...
I've encountered an issue with my code where the database is not updating and a new record is not being created. I suspect that there may be a problem with how I am handling the POST data retrieval in my script. Can anyone provide guidance on where to ...
My Angular application has a variable called modelResponse that gets updated with new values and prints them. However, in the HTML, it also displays all of its old values along with the new ones. I used two-way data binding on modelResponse in the HTML [( ...
Looking for help in arranging div elements in a way that they resemble an equalizer, similar to the one shown in this screenshot Equalizer. Can you provide advice on how to remove the dots from the list? I've already attempted using the CSS property ( ...
Currently, I am in the process of developing a PHP file and one feature that I would like to implement is creating an array as illustrated in Example 1. As far as my understanding goes, an Array functions like a list where items can be added as shown in Ex ...
I am attempting to launch an Angular application through node-express. 1 File Structure AngularNode public /core.js /index.html project.json server.js 2 server.js var express = require('express'); var app = expres ...
While browsing through Wix, I stumbled upon something quite intriguing that left me puzzled. On a desktop with a width of 2560px, the Wix page loaded normally. But what caught my attention was when I resized the screen to make it smaller, either by using ...
<a onclick="determineCountry(data)" class="installbtn">Install</a> My goal is to have the user redirected to one of three sites based on their location when they click the button above. However, there seems to be an issue with the script below ...
My querystring is quite long http://terra.cic.local/web/index.cfm//pm/uebersicht?sucheAufgeklappt=was%2Cwie%2Cwohin%2Cwann%2Cwer&sucheVon=&sucheBis=&sucheIstErsteSeiteAnzahlProdukteErmitteln=false&sucheIDReiseart=26&sucheHotelart=1081& ...
I'm facing a challenge where I need to hide a button upon clicking another button, but the problem is that when the page refreshes, the hidden button becomes visible again. My objective is to keep it hidden even after refreshing the page and only reve ...
My Android WebView is experiencing issues with memory access and crashes on a Galaxy S3 running Android 4.0.4. The HTML5 content includes interactive battles where enemies appear for the user to slash, interspersed with normal HTML pages. Despite the use o ...
Could someone assist me in placing the Life's Good logo on the left side of the nav bar without applying the animation from the "btn" class? Below is a snippet of my code with an example where I want the logo highlighted in Yellow: * { padding:0; m ...
My PHP email form is not sending emails because my variables are coming up as null. I have an echo statement after my code to check if the variables have values, but they are not being printed. Only 'done' and 'email $to' are showing up ...
In this project, the objective is to dynamically change the background-color based on different routes. The goal is to display a specific color for UpcomingComponent while keeping the background-color consistent for all other routes. The approach involves ...