Changing objects in webform with javascript in js file

Hi,

I have a webform with different html objects for example a textbox:
 
<input type="text" name="cardholder_name" size="20" value=""
                id="auth_cardholder_name" />

Open in new window


and a button
 <button type="submit" id="auth_0"
            value="Validate payment" onclick="void(0);">
            Validate payment</button>

Open in new window


I would like to be able to reach these objects from a js file and change their styles (for example font and color of the text etc.)

I've always done this from the page itself like this for example
document.getElementById("auth_cardno").className = "box";

Open in new window


But how can I achieve tthe same from a separate js file and activate it on page load?

Thanks for help!

Peter
Peter NordbergIT ManagerAsked:
Who is Participating?
 
Duy PhamFreelance IT ConsultantCommented:
You can do the same in your separate js file to change style (or className of your elements). And use window.onload to activate it on page load:

// assume this your js file:  your-scripts.js
...
window.onload = function() {
    // change styles of your elements here
    document.getElementById("auth_cardholder_name").className = "box";
    document.getElementById("auth_0").className = "button-class";
    ...
};
...

Open in new window


And include that separate script file after your body end tag

<html>
    <head>...</head>
    <body>...</body>
    <script type="text/javascript" src="your-scripts.js"></script>
</html>

Open in new window

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.