Changing objects in webform with javascript in js file


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 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

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

Open in new window

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.