-1

i have code html

<button onclick=location=URL>Refresh</button>

how is code given css color?for example as below

CSS code `

.button {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 8px 8px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

.button2 {background-color: #008CBA;} /* Blue */

` in html

<button class="button button2">Refresh</button>

but if implemented in this code

<button onclick=location=URL>Refresh</button>

an error occurs

can anyone help me with this?

Newbie
  • 7
  • 4
  • 1
    `onclick=location=URL` is not valid HTML, and the `.` at the start of `.button {` means it looks for something with the class "button", not the button element. – DBS Dec 26 '22 at 17:10
  • "an error occurs" - What error? How are you trying to implement the first code in the second code? Read [ask]. Provide a real [mcve]. Tell us the *defaults* of the problem. – Quentin Dec 26 '22 at 17:19
  • onClick is deprecated, use a listener instead! – tatactic Dec 26 '22 at 18:23

4 Answers4

0

Your onclick attribute is wrong. You need to use window.location.href or window.location.reload(); Here is the documentation : https://developer.mozilla.org/en-US/docs/Web/API/window/location.

Also, if you want to add css to html and you don't know how to do, you can check this https://www.w3schools.com/CSS/css_howto.asp

Here is a working code :

.button {
    background-color: #4CAF50;/* Green */
    border: none;
    color: white;
    padding: 8px 8px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}

.button2 {
    background-color: #008CBA;
}
<button class="button button2" onclick="window.location.href='https://stackoverflow.com/questions/74922452/color-button-using-css-html';">Refresh</button>
SioGabx
  • 344
  • 1
  • 8
Malik Zain
  • 11
  • 4
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Dec 27 '22 at 08:56
0

onclick is deprecated and hard to read. Consider to use a listener to your button!

The code to refresh a page is window.location.reload();

    let btn_01;
    document.addEventListener("DOMContentLoaded", onReady);
    function onReady(){
        btn_01 = document.getElementById("button_1");
        btn_01.addEventListener("click",click_1);
    }
    function click_1(){
        window.location.reload();
    }
.button {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 8px 8px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

.button2 {background-color: #008CBA;} /* Blue */
<button id="button_1" class="button button2">Refresh</button>
tatactic
  • 1,379
  • 1
  • 9
  • 18
-1

I can't see how you are using the onclick. but something is wrong here:

<button onclick=location=URL>Refresh</button>

Parenthesis are missing. Maybe try something along the line of this

<button onclick="location.href='../'">
Agent 327
  • 76
  • 8
user2737728
  • 7
  • 7
-1

you must change 2 things:

  • atribute onclick: you mus have this: " around the javascript. like
<button onclick="location=URL" >Refresh</button>
  • if you like to use style with .button, you must add atribute class="button". like this:
<button onclick="location=URL" class="button" >Refresh</button>

or, you can use other think in style: instead of .button{ ... }, use button{ ... }.

honza
  • 34
  • 1
  • 4