Why do all my buttons turn green when I use coloredButton(function,color) function?

Question

When I use the following code, all buttons are green. Why? and how do I fix this? code:
```
var coloredButton = function coloredButton(func, color="white") {
this.func = func;
this.color = color;
document.write("<style>input {background-color:"+color+"; color:"+color+"; font-size:200%;}</style>");
document.write("<input type=\"button\" value=\"----------\" onclick=\""+func+"\"/>");
}
var BA = new coloredButton("alt1()","red");
var BB = new coloredButton("alt2()","blue");
document.write("<br/>");
var BC = new coloredButton("alt3()","yellow");
var BD = new coloredButton("alt4()","green");
function alt1() {
alert("hi");
}
function alt2() {
alert("bye");
}
function alt3() {
alert("enter");
}
function alt4() {
alert("exit");
}
```

Answer 1

I changed a lot ...
But you should imagine each element as unique, you should not create multiple styling tags, because they serve all the elements of the page and the last one is always what the browser uses.

https://code.sololearn.com/WAcCmrahV548/#html

Answer 2

Thanks Jônatas Araripe!