CODEWITHSUNDEEP
javascripthtmlcss
Jeff Redge
Jeff Redge

Reputation: 5

How to call a JavaScript function from different HTML File?

I am trying to get a link from a separate HTML file to show a specific auto JavaScript-hidden element. The page shows 8 separate buttons that when clicked it shows a hidden div element.

JavaScipt function code: 

    function tr() {
        var x = document.getElementById("tr");
        if (x.style.display === "block") {
            x.style.display = "none";
        } else {
            x.style.display = "block";
        }
    }

Once again I am trying to call this function from within a separate HTML file.

Thank you!

Edit: Yes sorry should've mentioned I'm extremely inexperienced with JavaScript. Now, when I make it into an object it seems as though the fuction still isn't getting called. Is there anything I need to include to make this object global?

var name = {
    a : function tr() {
        (...)
    }
}

how I'm calling it:

<button onclick="name.a()" class="button">

Upvotes: 0

Views: 148

Answers (1)

Bhavesh Ajani
Bhavesh Ajani

Reputation: 1261

Using following this you can call a JavaScript function from different HTML File:

<script src="demo.js"></script>

here demo.js is your javaScript file name. and in this code add id="tr" and onclick="tr()".

<button onclick="tr()" class="button" id="tr">demo btn</button>

example:

function tr() {
    var x = document.getElementById("tr");
    alert("function is call");

    // if (x.style.display === "block") {
    //     x.style.display = "none";
    // } else {
    //     x.style.display = "block";
    // }
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button onclick="tr()" class="button" id="tr">demo btn</button>
    <script src="demo.js"></script>
</body>

</html>

Upvotes: 1

Related Questions