Develop Reference

Is it possible to use 1 JS file for 2 HTML?

I'm trying to write JS code so that when a button is pushed in the first HTML page, in the second HTML page some content is displayed. I tried to do it in one JS file but it did not work, so I'm asking if maybe I have to use two separate JS files and in that case how do they communicate with each other? I'm using jQuery.

I'm not sure if you mean that two HTML pages are of the same website or they are two pages apart.
But if you mean the both are of the same website, I advise you to do the functionally of the page 2 on a div in page 1 and then only change the content dynamically by clicking the button on page 1 by jquery. "append()" function must be very usefull for this.
If the two pages are not related and they are of the same website, you can pass a JSON to the LocalStorage and then use it in page 2 by appending the JSON values between the html tags.
Whatever, if the two pages are so different or are not of the same website, you have to develop a websocket with "socket.io" or just use another "listener" library (like "datatable" for jquery) to show the data dynamically in page 2 in the case data comes from a db (should be the best way).
Please let me know if this is usefull or how can I help more.

Extracting data from a web page and inserting into html code of another webpage

I have multiple webpages that only contain a single number in the HTML code, nothing else. These get updated from an IOT device I made. I also have a main data webpage, that is meant to display all of the data on one page. However, I cannot figure out how to extract the number the data webpages' in the HTML code of the main data webpage.
The only workaround I have found is by using iframes, but this seems very clumsy, and not "pleasing for the eyes". Is there any way to do this using HTML, or maybe javascript? I am very new to web development. The only restriction is that I cannot change how the data is uploaded from the IoT device, so it has to be extracted from the individual data webpages that contain only numbers.
Thanks in advance :)

Once you find the Javascript selector for the innerHTML of your iFrame, you can get the value out of the iframe for use within the parent or window:
//Getting a value from the first iframe
//Assumes the page in the iframe only contains a single plaintext value
myValue = document.querySelectorAll('iframe')[0].contentWindow.document.body.innerText;
To make it more appealing you could easily hide the iFrame:
//Hiding the embedded iframes
for (var i=0; i<document.querySelectorAll('iframe').length; i++){
document.querySelectorAll('iframe')[i].style.visibility = "hidden";
};

What you need to do is
Fetch the html pages
Parse the data from each page
Render it to your current page
This is not trivial task, mostly because parsing and handling multiple fetches that may take random amount of time to complete. And browser security restrictions in case the files are in different domains.
It would be better if the individual files were .json files not html files.
Here is a codesandbox with a simple example: https://codesandbox.io/s/sleepy-borg-kuye6?file=/src/index.js
Here is one tutorial:
https://gomakethings.com/getting-html-with-fetch-in-vanilla-js/

Trouble inserting a javascript variable into an HTML tag [duplicate]

I want to add twitter card meta tags to my website. i cannot add static tags since the content attribute in the meta tag has to change dynamically.
Plz help if someone has a solution.

You can't, at least not in any way that Twitter is going to recognise.
When Twitter fetches the page, it is always going to get the meta elements that are in the HTML, never ones added with client side JavaScript.
If you are changing content dynamically then make use of the history API to update the URI, and make sure that the server will generate all the content for each URI when the URI is used as an entry point (you can still use JavaScript to generate the content when moving from another page on the site).

You can generate pages dynamically (server side) as long as you don't intend to change them after. Think about the process in the same way you would build landing pages for SEO purposes. Twitterbot is in many ways really similar to Googlebot and similar indexers.
See https://dev.twitter.com/blog/twitter-cards-tips-tricks for a few examples of sites doing this.

Document.titles while using html templates?

So I'm dynamically filling a small set of template pages with dynamic data from a DB, with the dynamic inputs contained in the URL params.
I'm using a URL rewriter(mod_rewrite) to create static-looking URLs for these template pages, but I'd really like to have the page titles be dynamic too.
I've found out how to do this in javascript after the page has been loaded, but apparently that won't work correctly for SEO, or for links to the page.
The main example I have, is that the wiki page for genome.
http://en.wikipedia.org/wiki/genome
… is rewritten to:
http://en.wikipedia.org/w/index.php?title=genome
Yet the page title will be Genome - Wikipedia, instead of Template - Wikipedia.
How does wikipedia dynamically rename the page title? Somehow I doubt they create new static html pages for every single article, they probably use a template.
Is there any way to have a parameter be assigned to the page title?
Thanks in advance.

You can always write javascript to rename the page title from the argument;
document.title = "This is the new page title.";
How to dynamically change a web page's title?

Show div from another website

Is there a way to use an iframe or some other method of showing a named div from another website?
I want to pull in some data from a government website into a google map and when they click the point I want the information from one of the divs on that page to display.

Using JQuery, you should be able to exactly that with the load-function.
Here is a small example to get a container with id "container" on a page called Test.html:
$('#contentDiv').load('/Test.html #container');
You can visit the JQuery documentation here for more info.

I take assumption that you are sure of div's ID in that other website.
If yes. use Jquery Ajax to pull the site's content into a hidden iframe in your site. then fetch the content of the div-in-question into some variable and then you can use it for your purpose (parse html table data or do whatever)
Discard the iframe's content so that you don't have unnecessary items in your page's DOM.

Ajax Call
In-House Service to Scrape the HTML from the page
Select the div with xpath / SGML parser
Return to ajax call-handler
Replace the content of your div
However There are other problems, i.e. scraping someone's site for their content without their permission is BAD.
They may or may not care, but still you should seek permission, or one day you could find your webserver blacklisted from their site. Or worse... Especially a government site.
You should probably go about figuring out how to properly obtain the data you need (perhaps there's an api somewhere) and then render your own version.

You would have to make use of either JSONP or a middle-agent to retrieve the data (i.e. a PHP script using the CURL library).
JSONP functionality is included in numerous Javascript libraries such as MooTools and jQuery. That is the method I would use.
MooTools: http://mootools.net/docs/more/Request/Request.JSONP
jQuery: http://docs.jquery.com/Release:jQuery_1.2/Ajax
Once you have retrieved the body of the page the DIV resides on, you could use REGEX to extract the information from the specific DIV element.