The browser is not displaying the JavaScript alert

I'm having trouble understanding why an alert is not showing up in my browser. I am using Chrome on Yosemite.

Below is the code from my script.js file:

$ (document).one('pageinit', function() {
  // add handler
  $ ('#submitAdd').on('tap', addWalk) ;
  // add a walk
  function addWalk() {
    alert (1);
  }
);

And here is the beginning of index.html:

<html>
  <head>
    <title>Miletracker</title>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css" />
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" />
    <link rel="stylesheet" href="css/style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
    <script scr="js/script.js"></script>
    <script>
      $(function(){
        $('.date') .each(function(){
          $(this) .datepicker();
        })
      });
    </script>
  </head>

Answer №1

Your code has a few issues that need to be addressed for it to function correctly. First off, you need to change scr to src in your script tag:

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

Secondly, consider using $(function) instead of the current event handler you are using. Lastly, it is recommended to place reusable functions outside of anonymous functions, like your event handler.

Below is the modified code that addresses these concerns:

$(function () {
    $('#submitAdd').on('tap', addWalk);
});

// I moved this function outside the other function.
function addWalk() {
    alert(1);
}

Answer №2

After considering the above recommendations from different sources, it is important to ensure that your HTML page contains a <body> tag with an "id" attribute set to "submitAdd", as indicated below. (Based on the JavaScript code suggesting that an event is being registered with submitAdd).

<body>
<div id="submitAdd">
tap here </div>
</body>

Furthermore, upon the page loading, you need to register the function with the tap event for the submitAdd element. This means that the function will not be automatically called but only triggered when the specified event occurs.

Answer №3

Ensure that your script.js file is correctly loading. You can check this by accessing the developer tools in Google Chrome.

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

Having trouble compiling a TypeScript code that utilizes OpenLayers library

I've encountered an issue with my TypeScript code using OpenLayers. When I try to import a second code file into the main one, I get an error that says: index.ts(3,15): error TS2686: 'ol' refers to a UMD global, but the current file is a mo ...

React Login Redirect

I am struggling to implement a redirect in my React project login. Despite researching online and finding solutions using routers, I have been unsuccessful in adding it to my code correctly. Here is my code - how can I effectively implement the router? Ap ...

What is the best way to create synchronous AJAX requests?

Can I convert this into a function? // Function to check if station is alive function checkStation(valueSelected) { let result = false; $.ajax({ url: "lib/grab.php", data: "check_live=1&stream_url="+valueSelected, ...

I have the ability to click and drag an external event in fullcalendar, but unfortunately I am

I am currently using jquery-ui 1.12.1 along with fullcalendar.js 3.4 within an angular 4 project. I have successfully implemented the functionality to drag events on the screen, but I am facing an issue where the drop property does not fire when trying to ...

Using jquery to insert a new row into a table

Here is the HTML and Javascript code I have been working on. My goal is to clone a row in a table and update the ids of each input element. While debugging the script, I can see the row being cloned and added to the table temporarily, but it disappears f ...

Struggling with making an Ajax and Jquery drop down menu work? Wondering how to use Javascript to retrieve a variable and then utilize it in PHP? Let's troubleshoot

Currently, I am utilizing Ajax/Jquery to present a dropdown menu with data retrieved from my SQL database. The process involves using javascript to obtain a variable that is then utilized in PHP. However, the function doesn't seem to be working as exp ...

I'm having trouble with a memory leak caused by destroying an ExtJs grid object - it seems to be lingering in the initialconfig. How can I properly remove this initialconfig to prevent the leak

While working on setting up a grid within a panel, I encountered an issue where even after destroying the grid, a reference to it is still retained inside the initial configuration for the panel. This prevents proper cleanup of resources. Is there a meth ...

Determine in an efficient way during mouseover if the control key is being pressed with Vue

My initial approach to tracking whether the control key (ctrl) is pressed while hovering over a <section> is as follows: <template> <section v-on:mouseover="controlKeyPressed = $event.ctrl">...</section> </template> Howeve ...

Jquery display function experiencing unresponsiveness

Currently, I am trying to implement some show/hide functionality in my JavaScript file: $(document).ready(function() { $('#me').hide(); $('#send').click(function() { $('#me').show("slow"); }); }); Strange ...

AngularJS - Enhance table row visibility with ngRepeat for targeted highlighting

Example Data <table class="table table-condensed table-striped table-responsive"> <thead> <tr> <th>Sender</th> <th>Subject</th> <th>Received</th> <th>Actions&l ...

Switch up the AJAX jQuery URL based on checkboxes selected

As I work with four checkboxes and fetch JSON data from an API using jQuery AJAX, my goal is to dynamically change the URL based on checkbox selection. Although the ajax code functions properly within the click function, it fails when placed outside of it. ...

How can I force CSS to return to the unvisited style once the user leaves a visited page with an <a> tag?

a.navigation:link {color: white; text-decoration: none; padding: 20px 20px 20px 20px; border: 0.5px solid white; border-radius: 70px 70px;} a.navigation:visited {color: lightgreen; padding: 20px 20px 0px 20px; border: 0.5px solid li ...

Is there a way to retrieve the parameters of a function that I am passing as an argument to another function?

As I strive to retrieve the arguments from the function passed as a parameter in order to ensure they are properly forwarded, an error has emerged: TypeError: 'caller', 'callee', and 'arguments' properties may not be access ...

Unable to transfer data successfully from popup to extension.js

I am currently developing a browser extension using Crossrider and I'm facing an issue with sending data from the popup to extension.js Here is my code for the popup: <!DOCTYPE html> <html> <head> <!-- This meta tag is relevant ...

Carrying over additions in arrays using only Javascript

I'd like to implement a basic array addition with carryover. Additionally, I need to display the carryover and result values. For instance: e.g var input = [[0,0,9],[0,9,9]]; var carryover = []; var result = []; Thank you! ...

What is the process by which React recreates the React element tree (virtual DOM) with every state update?

From what I've gathered, every time a state is updated in React, it generates the react element tree (virtual DOM) and then compares it with the new one using a diffing algorithm. However, there's something I find puzzling. Let's say we hav ...

Angular 14's "rootItem" animation trigger was created with the following alerts: - The properties listed below are not animatable: overflow

Upon upgrading to Angular 14, I encountered this warning. The properties mentioned are not actually used in my animations. [Error in console][1] The animation triggers "rootItem" has been built with the following warnings: - The following provided propert ...

Looking to reduce the size of a logo image within a container as you scroll down a webpage?

I've been working on creating a logo section for my website, but I'm struggling to make it shrink as users scroll down and expand back to its original size when they scroll up. I've tried various JavaScript and jQuery functions without succe ...

What is the purpose of using "this" in the code provided below?

As a novice in JavaScript, I find myself struggling to fully grasp certain aspects of the script below; I understand that Map, Player, and App are all classes, while map, player, and app represent instances of these classes; However, why is the keyword " ...

The photos stored in the Google Cloud bucket may experience a delay in updating

After updating an image in the Google Cloud bucket, there seems to be a delay where the URL continues to serve the old version for a few minutes (approximately 5 minutes). The link we are currently using is structured as follows: https://storage.googleap ...