Launching an external JavaScript from within a separate JavaScript file

I'm in the process of developing a virtual 'directory' for various locations in my city to assist fellow students. Here's the concept:

  1. On a map, I've pinned all the locations

  2. Clicking on these pins triggers a JavaScript function that generates a brief overview next to the map.

  3. My goal is to include a script within the existing script which, based on the day (using a case statement), displays the opening and closing hours of each location.

I'm relatively new to this and uncertain if there are any logical barriers preventing this from functioning. Below is my code:

The initial JavaScript snippet:

brukbar = "<h4>Brukbar & Supa</h4>
<img src=__PICTURE class=bilde_lite><br>
<span class=beskrivelse_klikk>
<b>&Aring;pent: </b> **->> THIS IS WHERE I WANT THE SCRIPT FOR OPENING DAY <<-** <br>
<b>Rating: </b> 
<br><hr>
__DESCRIPTION LOCATION__
</span>
<hr> <a href=# target=_blank>External page</a><br>"

Below is the case study:

    var d=new Date();
    var theDay=d.getDay();
    switch (theDay)
    {
    case 1:
    document.write("08-20");
    break;
    case 2:
    ....
    case 0:
    document.write("08-20");
    }

Is it possible to encapsulate this as a function (as shown above) and then call it within the main script? I attempted to do so but only managed to display the opening time on a blank page.

I may be taking an overly convoluted approach to this task, so I welcome any suggestions or guidance (Note: I prefer not to create separate pages for each location).

Answer №1

var useful = "<h4>Useful & Super</h4><img src=__PICTURE class=image_small><br>    <span class=description_click><b>Opening hours: </b>"
+ getSchedule() +
"<br><b>Rating: </b><br><hr>__DESCRIPTION LOCATION__</span><hr> <a href=# target=_blank>External page</a><br>";

function getSchedule()
{
  var d=new Date();
  var theDay=d.getDay();
  switch (theDay)
    {
    case 1:
     return "08-20";
    break;
    case 2:
    ....
    case 0:
      return "08-20";
    }
}

Answer №2

If you have some HTML code and want to add a personalized message within it, follow these steps:

Firstly, create a placeholder for your content like this:

<div id="custom-div-content"></div>

Next, in your switch case statement, add the following code:

document.getElementById("custom-div-content").innerHtml("your custom message");

This snippet simply locates the div element with the specified ID ("custom-div-content") and updates its inner HTML content.

I hope this explanation clears things up for you.

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

"Effortless Auto-complete with Linked Content and Visuals

I've been searching everywhere and have not been able to find a solution for this issue. I can successfully use JQuery Easyautocomplete () with links, and also with images separately, but I can't figure out how to make it work with both. I am new ...

Is it time to ditch daylight saving time - am I managing my dates and times correctly?

Currently, I am in the process of working on a PHP/mySQL web application where dates are stored as unix timestamps in columns that are UNSIGNED INT(10). When it comes to displaying these dates in the web view, we utilize moment.js to parse the numbers. On ...

Detect when the Keyboard is hidden in React Native

On my screen, I have a date picker and a text input. In order to prevent awkward transitions, I need to hide the keyboard before displaying the date picker. Currently, I'm resorting to a workaround because I don't know how to trigger a callback ...

Using Javascript/HTML to enable file uploads in Rails

I'm currently facing an issue with uploading and parsing a file in Rails, as well as displaying the file content in a sortable table. I followed a tutorial on to get started. This is what my index.html.erb View file looks like: <%= form_tag impo ...

Unable to perform a POST request and send JSON data using AJAX with jQuery at the

It seems like there may be a server issue causing this problem, and unfortunately, I don't have access to our server to troubleshoot. I was hoping that someone else might have a solution or could help me understand the root cause of the issue. The is ...

Create a function that generates an HTML string and returns it to be used in JSX

As a newcomer to JSX/React, I am seeking guidance on removing inline code. I have created a function that returns the value to be displayed in the template/JSX. The function works well except when it needs to return a string along with an element like a Li ...

Does AngularJS have a similar function to $(document).ajaxSuccess()?

When working with AngularJS, I am looking to implement a universal ajax loader that does not require integration into each controller to function. In jQuery, this can be achieved through the following code: (function globalAjaxLoader($){ "use strict"; ...

Combining multiple JSON strings into a single object using JavaScript

I am facing an issue with parsing a JSON output that contains two strings with specific formats: [{"device_id":"9700015","update_time":"2017-01-04 18:30:00","sensor_value":"1287.6"}] [{"device_id":"9700016","update_time":"2016-12-31 18:30:00","senso ...

I'm having trouble understanding why this code is causing confusion for the user's selection during a specific part of the execution. I can't seem

In this memory game, event listeners respond to user input after a sequence of colored divs change color to appear illuminated. The expected behavior is that once the user clicks on the correct div in the right order, the sequence restarts with an additi ...

Encountering a connectivity issue with the MongoDB server

While I wrote my server IP on the mongoose connection string, I am unable to insert data into MongoDB. How can I resolve this issue? var express = require("express"); var app = express(); var mongoose = require('mongoose'); mongoose.connect(&ap ...

What is the best method to ensure that none of the select option values are left empty?

I have a total of 5 select option drop down menus currently, but this number may increase in the future depending on requirements. The issue I'm facing is that when I select the last element, it returns true even though the other elements are empty. I ...

The v-on handler is encountering an error: "ReferenceError: i18n is not defined"

I'm currently working on a Vue.js project to create a multi-language website, but I'm struggling with how to access and utilize the i18n constant. I've attempted using the eventBus approach, but it doesn't seem to be the right solution ...

Implementing a JavaScript Module Using JavaScript

I have encountered a simple problem. I am trying to use two JavaScript files: one following the module pattern and another one that calls the first one. I have tested all the code using Node.js and everything works fine when it is all in one file. However, ...

Having trouble with PHP not receiving data when using a $.ajax POST request?

I'm facing an issue where my code seems to be correctly passing a JavaScript variable to PHP. On the JavaScript side, everything works fine - I receive success messages and see the data in the network tab. However, on the PHP side, I am unable to retr ...

Unlock the potential of JavaScript by accessing the local variable values in different functions

I've been struggling for days to find a solution to this issue... https://i.stack.imgur.com/KDN7T.jpg https://i.stack.imgur.com/tOfCl.jpg The image above illustrates the challenge I'm facing - trying to apply data values from elsewhere to the ...

Issues arise with the functionality of Datatables when attempting to implement a

I am trying to sort the "Date Created" column in my table in descending order of the latest date. I found a forum that suggested using the datetime datatable sorting plugin, but it didn't work as expected. Can someone help me solve this issue? Below a ...

Is there a way to make this eval() function function properly in Internet Explorer?

My JavaScript code is fetching another JavaScript "class" from a different XHTML page. The fetched JavaScript looks like this: (function() { this.init = function() { jQuery("#__BALLOONS__tabs").tabs(); }; }) Once the f ...

What is the best way to showcase the content from multiple uploaded files?

Below is an example demonstrating how to display the contents of a single uploaded file. .js $scope.uploadFilename = function (files) { if (!files[0]) { return; } var reader = new FileReader(); reader ...

Using Cleave.js to hide the input field in an HTML form

I am currently implementing cleave.js on a website in order to create a mask that restricts input to only a 3-digit number. Here is the snippet of code I am using with cleave.js: <script> let number = new Cleave("#numberId", { ...

Detecting the click area within a window using JavaScript to automatically close an element

Hello everyone, I am currently working on implementing a JavaScript code that is commonly used to detect click areas for closing an element such as a side navigation or a floating division when the user clicks outside of the element. The functionality wo ...