Event that occurs when the user clicks on an element in a

I have created a webpage and I want to organize all my onClick events in a separate JS document, similar to how I handle the rest of the JavaScripts I am using.

The snippets I currently have in the HTML that I would like to modify are:

<a href="http://www.commercial.com" onclick="confirmLeave()" target="_blank"> 

and

<IMG SRC="picture_small.jpg" alt="Description" onClick="view(this);">

Here is the related JavaScript code that I maintain in a separate document:

function confirmLeave() {
    if (confirm("Do you want to leave this page?")) {
        return true;
    } else {
        if (window.event) {
            window.event.returnValue = false;
        } else {
            e.preventDefault();
        }
        return false;
    }
}

And

function view(img) {
    imgsrc = img.src.split("_")[0] + "_big.jpg";
    viewwin = window.open(imgsrc, 'viewwin', "width=790,height=444,location=0");
    viewwin.focus();
}

The first function prompts visitors if they want to leave the page when clicking on a link to an external site, while the second function displays a larger version of the image they clicked on.

Answer №1

To create a link to an external javascript file, insert the code below.

<script src="http://yoururl.com/myjs.js"></script>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Automated Facebook Wall Publishing

I have successfully integrated a feature in my application where users can post status updates, photos, and URLs on their Facebook Like stream. I have also added an option for users to post directly on Facebook by including a checkbox. When the user clicks ...

I've been attempting to display information from a mongodb server onto my react application, but unfortunately, it's just not functioning as expected

Below is the error message from the console log: An Error was encountered: Objects are not valid as a React child (found: object with keys {_id, inputText, __v}). If you intended to render a collection of children, please use an array instead. at throwOnIn ...

Encountering a node js issue: "Error: Unable to modify headers after they have been sent."

Encountering an error in node.js, specifically during login or when the code crashes. The error message reads: “Error: Can't set headers after they are sent.” err: Error: Can't set headers after they are sent. at validateHeader (_http ...

Switching icon with jQuery upon clicking

I'm just starting to learn jQuery and I'm working on changing the font icon class when clicked to display a drop down. Right now, it changes the icon and drops down the content as expected. However, I'm facing an issue where I want the icon ...

The button's size shrinks significantly when there is no content inside

When text is absent, the button shrinks in size. I am utilizing an angular model to bind the button text: <button type="button" class="btn btn-primary" ng-bind="vm.buttonText" tooltip="{{vm.tooltipText}}" ></button> I prefer not to apply any ...

AngularJS is not properly clearing the datepicker

Upon submitting the form, I have managed to reset all input fields to blank except for the datepicker which still retains the previously selected date. How can I clear that as well? Snippet of HTML: <div> <form name="profileform" role="fo ...

Concealing Panels within EasyUi Tab Navigation

There is an easyui Tab that consists of 4 tabs. After receiving a response from the server, it may be necessary to hide or show some of the tabs. I attempted to remove the tabs initially and add them back later. However, the issue arises when the tabs are ...

How can I utilize the onSearch event with React's Multiselect Dropdown feature?

I recently integrated the multiselect-react-dropdown library to create a MultiSelect dropdown. This library offers two important props: options and onSearch. The options prop is used to display data in the dropdown, allowing users to select items from it. ...

Troubleshooting Bootstrap: Navigation bar toggling causes JS functions to malfunction

My JS function is no longer working when the responsive website's breakpoint of 768px is activated (specifically, the nav var toggle/collapse). This is causing the problem where the JS function stops working. The HTML code in question is: <div cl ...

The scroll feature in JavaScript is malfunctioning

After countless hours of troubleshooting, I still can't figure out why the code snippet below is not working properly on my website at : <script> $(window).scroll(function () { if ($(window).scrollTop() > 400) { ...

Guide on incorporating a dropdown menu within a Jssor slider

I am facing an issue with trying to include a dropdown menu inside the Jssor slider. The menu does not drop down when placed inside it. Here is the code snippet: <head> <script src="jquery.js"></script> <script src="jssor.slider.min. ...

Switch color in Material-UI based on props

Utilizing code inspired by the Material-UI documentation on customizing the switch, you can customize the switch color to be blue: import React from 'react' import Switch from '@material-ui/core/Switch' import {withStyles} from '@ ...

Creating a straightforward image slideshow using jQuery featuring next and previous buttons

I am looking for assistance in adding next and previous buttons to this slider. I came across a code snippet on a blog that could be useful, which can be found at .net/dk5sy93d/ ...

Can an event be initiated on dynamically loaded iframe content within a document using the jQuery "on" method?

Is there a way to include mousemove and keypress events for iframes? The code provided seems to work well with existing iframes on the page, but it doesn't seem to work for dynamically created frames in the document using JavaScript. $('iframe&a ...

Iterating through a nested array in AngularJS using ng-repeat

I am looking for a way to print out an infinitely deep array structure into a list. Below is the code snippet from a modified AngularJS example where I have added more nested children in the array. How can I display "child of child" and its subsequent chil ...

Improving Vue.js (Vuex) Getter Functions

Currently, I am in the process of restructuring two getters within vuex. Within my state, there exists a predefined array of objects like so: state: { color: 'All colors', size: 'All sizes', allShoes: [ { ...

What is the best way to update JSON without duplicates, especially in the context of using CasperJS?

I am currently utilizing CasperJS to extract inner texts from webpages and store them in a JSON file. Below you can find the code I am using along with an issue that I am encountering! var words = []; var casper = require('casper').create(); va ...

The distinction between a JSON file that is generated dynamically from a response and one that is

I've been working on configuring a bootstrap typeahead feature and here is the jquery code I am using: $(function () { $.ajax({ type: "GET", url: "http://example.com/search?callback=my_callback", data: { keyword: &apos ...

What is the process of storing a file on a Node.js server?

I am currently managing a Node.js server. The task at hand involves retrieving form data from an HTML page ("index.html") and writing that data to a text file. This is the content of my index.html: <form action="/uploads" method="post"> <tabl ...

Using React.JS to Invoke a Function from the State

I'm attempting to invoke the "hello" method that is defined in my React class. The prop on the component is configured to retrieve values from the Students state object, with one of the properties named "hello". The hello property is initialized from ...