how to create a html button to call a css script

Question

I am trying to create a button that will call a css script to change the background image of the page

I have tried several things and have had some success with

function changecss(sheet){ document.getElementById('backimage').setAttribute('href', sheet); } </script> <link id="backimage" rel="stylesheet" type="text/css" href="default.css">`` and ```<button type="button" onclick="changecss('bg2.css');"> <font face="Arial Narrow"><b>Change BG</button> <button type="button" onclick="changeBodyBg('black');"> <font face="Arial Narrow"><b>&nbsp;Black&nbsp;&nbsp; </button> <button type="button" onclick="changeBodyBg('red');"> <font face="Arial Narrow"><b>&nbsp;Red&nbsp;&nbsp; </button> </b></font><button type="button" onclick="changeBodyBg('orange');"> <font face="Arial Narrow"><b>Orange</b></font> </button> <button type="button" onclick="changeBodyBg('yellow');"> <font face="Arial Narrow"><b>Yellow</button> </b></font> <button type="button" onclick="changeBodyBg('green');"> <font face="Arial Narrow"><b>Green</button> </b></font>``` **The problem is that it works if it is the first option chosen but, if I select any of the other buttons, which all work, then it does not work** (css stylesheet code is: ```body { background: ##1baa00; background-image: url("zenbg-1.png"), url("zenbg-2.png"); background-repeat: repeat-x, repeat; }```

have tried many things - tried putting the link in a function then calling it, tried using form command but nothing I do seems to call it from a button command — anddum
– anddum, Commented Oct 10, 2020 at 13:54

benhatsor · Accepted Answer · 2020-10-10 17:17:12Z

Instead of messing directly with CSS text, try using a class in your CSS and toggling it.

body { background: url('Some Image'); } body.red { background: red; }

<button type="button" onclick="document.body.classList.toggle('red')">Red</button>

fcdt · Accepted Answer · 2020-10-10 18:09:42Z

1

In a JavaScript <script> tag, make a function and instead of

document.body.style.cssText+=';background-image: url(ZenBG-1.png);background-repeat: round;';

try

document.body.style.backgroundImage = 'url(ZenBG-1.png)'; document.body.style.backgroundRepeat = 'round';

edited Oct 10, 2020 at 18:09

fcdt

2,5215 gold badges17 silver badges27 bronze badges

answered Oct 10, 2020 at 12:56

User9701

402 silver badges6 bronze badges

2 Comments

anddum Over a year ago

this works up to a point - thanks for the background-repeat command. I was using just repeat. The problem is that it still distorts the image. The css code is actually

body { background: ##1baa00; background-image: url("zenbg-1.png"), url("zenbg-2.png"); background-repeat: repeat-x, repeat; }

I am just a beginner and couldn't translate this into html so thought it would be sufficient to call the link function which I use in the header but have been unable to do so

User9701 Over a year ago

Can you please share your code then through codepen.io or something similar so I can easily see what's going wrong?

Collectives™ on Stack Overflow

how to create a html button to call a css script

2 Answers 2

Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Related