How to change font of a button when clicked?

Question

I need to put a button called add. After the user clicks, it should change to added.

<html>
<body>
     <script>
     function one()
     {
         document.write("Added");
     }    
     </script>                   
     <input type="button" value="Add" onclick="one()">
</body>
</html>

but this code replaces all the content in my page and says "added" while I need to change only the button text, without any changes in the background.

By 'change...font' do you mean you want to change the words on the button (from 'add' to 'added'), or you want to change the font-family (from Arial to Times New Roman (for example))? — David Thomas, Jul 20 '13 at 16:15

score 4 · Accepted Answer · answered Jul 20 '13 at 16:53

4

Do this:

<html>
<body>                   
<input type="button" value="Add" onclick="this.value='Added'">
</body>
</html>

JSfiddle: http://jsfiddle.net/7w5AQ/

answered Jul 20 '13 at 16:53

pattyd

5,659
10
37
57

Filipe Silva · Answer 2 · 2013-07-22T11:49:08.090

Your document.write is doing much more than you want it to.

You can do just this:

<html>
    <head>
     <script>
         function one(element)
         {
             //Your other javascript that you want to run
             // You have 'element' that represents the button that originated the click event and you can just do the next line to change the text
             element.value = "Added";
         }    
         </script>             
    </head>
    <body>

         <input type="button" value="Add" onclick="one(this);">
    </body>
</html>

How to change font of a button when clicked?

2 Answers2