I thought this would be easier, but clearly I haven't touched JavaScript/HTML in a long time. I am closer with the following code to getting this to work, yet it seems like webpage still throws an error:

GET https://newapo.apo.nmsu.edu/media/skywatcher/dailyVids/[date]_24hr.webm net::ERR_ABORTED 404 (Not Found)

So the following seems to just not be working at the right 'time' as the alert that pops up is the correct string.

<script>
    document.querySelector('#daily').src = document.querySelector('#daily').src.replace('[date]', finalDay);
    alert(document.querySelector('#daily').src);
</script>

Later in my HTML code I want to use that finalDay as part of a dynamic link:

<div >
          <p> Video (Last 24Hours): </p>
            <video width="800" controls="controls" preload="metadata">
              <source id="daily" src ="{{ MEDIA_URL }}skywatcher/dailyVids/[date]_24hr.webm#t=0.5" type="video/webm">
            </video>
</div>

This is in a Django template though this particular page is doing no server side items. In reality the src should be:

<source src ="{{ MEDIA_URL }}skywatcher/dailyVids/20220512_24hr.webm#t=0.5" type="video/webm">

So not sure, I thought I could use some special tag like {{ }} to have it show up but realized that is variables coming FROM the Django server. Hopefully I don't have to do a whole innerHTML call figuring out somehow what that source src id is etc...

Is there really no way to insert a JavaScript variable easily into HTML?

CodePudding user response：

you could simply add an id attribute to your source tag, then use:

if you add this arribute to source tag

<source id = "source">

then

finalDay = someCalculatedDate();

const source = document.querySelector("#source");
source.src = `${MEDIA_URL}skywatcher/dailyVids/${finalDay}_24hr.webm#t=0.5`

media_url and finalday are javascript variable

CodePudding user response：

UPDATE

Changed .toLocaleDateString('en-US') to .toLocaleDateString('en-GB'), I forgot US doesn't pad with zeros and the UK does. The difference is:

Lang-Country	Format	Example
en-US	D/M/YYYY	1/1/1970
en-GB	DD/MM/YYYY	01/01/1970

---

Assuming `finalDay()` is a function that returns a string of today's date in this form: `yyyymmdd`, it should use the `Date()` constructor to get today's date and then the following methods:

1. .toLocaleDateString('en-GB'), returns a string: "05/13/2022"
2. .split('/') to remove all "/", returns an array ["05","13","2022"]
3. .reverse() to switch "05" and "2022" around, returns an array ["2022","13","05"]
4. .join('') to combine the array into a single string, returns "20221305"

const finalDay = function() {
  const today = new Date(); 
  return today.toLocaleDateString('en-GB').split('/').reverse().join('');
}

Next, interpolate that string from finalDay() into a template literal (a string with superior syntax):

const url = `${MEDIA_URL}skywatcher/dailyVids/${finalDay()}_24hr.webm#t=0.5`;

Unfortunately MEDIA_URL is unknown (either you don't know it yet or you forgot to include it?), so we will continue with a working example. You can replace the following url with the one above if or when you have MEDIA_URL:

const vidSrc = document.querySelector('source');

// This is a working example
vidSrc.src = `https://glpjt.s3.amazonaws.com/so/av/vid5.mp4`;

let MEDIA_URL;

const finalDay = function() {
  const today = new Date(); 
  return today.toLocaleDateString('en-GB').split('/').reverse().join('');
}

const url = `${MEDIA_URL}skywatcher/dailyVids/${finalDay}_24hr.webm#t=0.5`;

const vidSrc = document.querySelector('source');

// This is a working example
vidSrc.src = `https://glpjt.s3.amazonaws.com/so/av/vid5.mp4`;

// This is the real src for your OP
/*
vidSrc.src = url;
*/
console.log(`This is what the real segment would look like without MEDIA_URL`)
console.log(`skywatcher/dailyVids/${finalDay()}_24hr.webm#t=0.5`);

<video width="800" controls="controls" preload="metadata">
  <source type="video/webm">
</video>