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

1

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>

answered Oct 10, 2020 at 17:17

benhatsor

2,0639 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

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

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related