How to call JavaScript function in html without button

One of the frequent works is calling JavaScript functions in HTML. While many developers are familiar with calling functions using buttons, there are cases where you may need to trigger a JavaScript function without a button click.

This article will guide you through different methods and paths to call JavaScript functions in HTML without the need for a button.

Methods to Call JavaScript Function in HTML without Button

Here are the following methods to call JavaScript function in HTML without button:

Method 1: Calling a JavaScript Function on Page Load

When we want to call a JavaScript function as soon as the page loads, we can apply the onload event.

This event is triggered when all the page’s resources, such as images and stylesheets, have finished loading.

To call a JavaScript function on page load, you can assign the function to the onload event of the window object.

<script>
    function main() {
        // Your code here
    }

    window.onload = main;
</script>

In this example code, the main() function will be called when the page finishes loading.

You can replace main() with the name of your desired function.

Method 2: Using a JavaScript Function with a Timer

If we want to call a JavaScript function after an exact time interval, we can apply the setTimeout function.

This function allows you to execute a function after a stipulated delay, it is measured in milliseconds.

Here’s an example code:

<script>
    function main() {
        // Your code here
    }

    setTimeout(main, 3000);
</script>

In this example code, the main() function will be required after a delay of 3 seconds.

You can change the delay by modifying the value passed as the second argument to setTimeout.

Method 3: Using Event Listeners to Call a JavaScript Function

Event listeners provide a dynamic method to call JavaScript functions based on different user interactions.

By providing event listeners with specific HTML elements, we can trigger a function when events like clicks, mouse movements, or form submissions occur.

For Example:

<script>
    function main() {
        // Your code here
    }

    document.getElementById('btnButton').addEventListener('click', main);
</script>

<button id="btnButton">Click Me</button>

In this example code, the main() function will be called when the user clicks the button with the id “btnButton“.

You can replace ‘click‘ with other event types like ‘mouseover‘ or ‘submit‘ to trigger the function based on various events.

Method 4: Using Keyboard Events to Trigger JavaScript Functions

If we want to call a JavaScript function when a precise key is pressed, we can apply a keyboard events.

By connecting event listeners to the keydown or keyup events, we can trigger functions based on user keyboard input.

Here’s an example code:

<script>
    function main(event) {
        if (event.key === 'Enter') {
            // Your code here
        }
    }

    document.addEventListener('keydown', main);
</script>

In this example code, the main() function will be required when the user presses the Enter key.

You can change the condition to check for other keys or combinations.

Method 5: Calling a JavaScript Function with AJAX

AJAX (Asynchronous JavaScript and XML) allows you to make asynchronous requests to the server without reloading the entire page.

We can use AJAX to call a JavaScript function and process the response.

For example:

<script>
    function main() {
        // Your AJAX code here
    }

    // Example using the fetch API
    fetch('/api/data')
        .then(response => response.json())
        .then(data => main(data));
</script>

In this example code, the main function will be called after retrieving data from the /api/data endpoint.

We can change the AJAX code with your own implementation using libraries like Axios or the native XMLHttpRequest.

Method 6: Using the Window Object to Call JavaScript Functions

The window object in JavaScript provides access to different properties and methods related to the browser window.

We can apply the window object to call JavaScript functions.

For example:

<script>
    function main() {
        // Your code here
    }

    window.main();
</script>

In this example code, the main() function is assigned as a property of the window object.

This allows you to call the function using window.main().

Method 7: Using JavaScript Functions with URL Parameters

URL parameters allow you to pass data to a web page through the URL itself.

We can apply the URL parameters to call JavaScript functions with different values.

<script>
    function main(parameter) {
        // Your code here
    }


    const urlParams = new URLSearchParams(window.location.search);
    const paramValue = urlParams.get('param');

    main(paramValue); 
</script>

In this example code, the main function is called with the value of the param parameter obtained from the URL.

We can change the parameter name and URL structure based on your requirements.

Method 8: Triggering JavaScript Functions with Form Submission

When a user submits a form, you can call a JavaScript function to handle the form data or perform other actions.

By linking an event listener to the form’s submit event, you can trigger a function when the form is submitted.

Here’s an example code:

<script>
    function handleSubmitExamples(event) {
        event.preventDefault(); 

        // Your code here
    }

    document.getElementById('myForm').addEventListener('submit', handleSubmitExamples);
</script>

<form id="myForm">
    <!-- Form fields -->
    <button type="submit">Submit</button>
</form>

In this example code, the handleSubmitExamples function will be called when the user submits the form.

The event.preventDefault() stop the form from being submitted traditionally, allowing you to handle the submission using JavaScript.

Method 9: Using the onchange Event to Call JavaScript Functions

The onchange event is triggered when the value of an input element changes.

You can utilize this event to call JavaScript functions when the user modifies the input’s value.

<script>
    function handleChangeMain(event) {
        // Your code here
    }

    document.getElementById('btnInput').addEventListener('change', handleChangeMain);
</script>

<input id="btnInput" type="text">

In this example code, the handleChangeMain function will be utilized when the user changes the value of the input field with the id “btnInput“.

You can replace ‘change‘ with other events like ‘input‘ to trigger the function based on the exact user interactions.

Method 10: Using JavaScript Functions with Custom Events

Custom events allow you to specify and trigger your own events in JavaScript.

We can use custom events to call JavaScript functions when specific actions or conditions are met.

Here’s an example code:

<script>
    function handleCustomEventMain(event) {
        // Your code here
    }

    document.addEventListener('btnEvent', handleCustomEventMain);

    // Trigger the custom event
    const customSampleEvent = new Event('btnEvent');
    document.dispatchEvent(customSampleEvent);
</script>

In this example code, the handleCustomEventMain function is called when the custom event ‘btnEvent‘ is assigned.

You can replace ‘btnEvent‘ with your own custom event name and dispatch the event at the proper time in your code.

Method 11: Using the onload Event to Call JavaScript Functions

The onload event is triggered when a define element, such as an image or a script, finishes loading.

We can apply this event to call JavaScript functions once specific elements have loaded.

For example:

<script>
    function handleLoadExample() {
        // Your code here
    }

    document.getElementById('btnImage').onload = handleLoadExample;
</script>

<img id="btnImage" src="image.jpg">

In this example code, the handleLoadExample function will be called when the image with the id “btnImage” finishes loading.

You can replace ‘btnImage‘ with the id of the element you want to listen for the onload event.

Method 12: Calling JavaScript Functions with Mobile Device Events

Mobile devices provide different touch and gesture events that you can apply to call JavaScript functions.

By connecting event listeners to these events, you can trigger functions based on user touch interactions.

<script>
    function handleTouchMain(event) {
        // Your code here
    }

    document.addEventListener('touchstart', handleTouchMain);
</script>

In this example code, the handleTouchMain function will be used when the user starts touching the screen.

You can replace ‘touchstart‘ with other touch events like ‘touchmove‘ or ‘touchend‘ to trigger the function based on different touch interactions.

Method 13: Using JavaScript Functions with Scroll Events

Scroll events are triggered when the user scrolls the web page. We can apply scroll events to call JavaScript functions when specific scrolling conditions are met.

For example:

<script>
    function handleScrollMain(event) {
        // Your code here
    }

    window.addEventListener('scroll', handleScrollMain);
</script>

In this example code, the handleScrollMain function will be called when the user scrolls the web page.

You can change the conditions inside the function to trigger the correct action based on scrolling positions or offsets.

Method 14: Using the DOMContentLoaded Event to Call JavaScript Functions

The DOMContentLoaded event is triggered when the HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.

We can apply this event to call JavaScript functions when the DOM is ready.

<script>
    function handleDOMContentLoadedExample(event) {
        // Your code here
    }

    document.addEventListener('DOMContentLoaded', handleDOMContentLoadedExample);
</script>

In this example code, the handleDOMContentLoadedExample function will be required when the DOM has finished loading.

This event is useful when we need to manipulate the DOM or interact with specific elements as soon as they are available.

Method 15: Calling JavaScript Functions with Image Load Events

When an image finishes loading, we can call a JavaScript function to handle the loaded image or perform other actions.

By connecting an event listener to the image’s load event, we can trigger a function when the image is loaded.

Here’s an example code:

<script>
    function handleImageLoadExample(event) {
        // Your code here
    }

    document.getElementById('btnImage').addEventListener('load', handleImageLoadExample);
</script>

<img id="btnImage" src="image.jpg">

In this example code, the handleImageLoadExample function will be called when the image with the id “btnImage” finishes loading.

We can replace ‘btnImage‘ with the id of the image you want to listen for the load event.

Method 16: Using JavaScript Functions with Mouse Events

Mouse events allow you to call JavaScript functions based on user interactions with the mouse, such as clicks, movements, or hover.

By applying event listeners to mouse events, you can trigger functions when the exact mouse actions occur.

Let’s take a look at the example code:

<script>
    function handleClickMain(event) {
        // Your code here
    }

    document.getElementById('btnElement').addEventListener('click', handleClickMain);
</script>

<div id="btnElement">Click Me</div>

In this example code, the handleClickMain function will be required when the user clicks the element with the id “btnElement“.

We can replace ‘click‘ with other mouse events like ‘mouseover‘ or ‘mousemove‘ to trigger the function based on different mouse interactions.

Method 17: Using the Intersection Observer API to Call JavaScript Functions

The Intersection Observer API allows you to effectively detect when an element enters or exits the viewport.

We can apply this API to call JavaScript functions when elements become visible or hidden to the user.

Here’s an example code:

<script>
    function handleIntersectionMain(entries, observer) {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                // Your code here
            }
        });
    }

    const sampleOptions = {
        root: null,
        rootMargin: '0px',
        threshold: 0.5
    };

    const observer = new IntersectionObserver(handleIntersectionMain, sampleOptions);
    const target = document.getElementById('btnElement');
    observer.observe(target);
</script>

<div id="btnElement">This is an element</div>

In this example code, the handleIntersectionMain function will be called when the element with the id “btnElement” intersects the viewport by 50% or more.

We can change the limit and other options to customize the action based on your requirements.

FAQs

Conclusion

In conclusion, there are different methods to call JavaScript functions in HTML without relying on buttons alone.

By using the events, such as page load, form submissions, URL parameters, mobile device events, and more, you can apply functions based on specific conditions or user interactions.

Additional Resources

• How to find common elements in two arrays JavaScript
• How to remove numbers from string in JavaScript
• How to Update Value in JavaScript