use javascript variable in html script

Question

I have an AJAX function in my JavaScript like so

function getWeather(countryName) {
    const monthNames = ["January", "February", "March", "April", "May", "June",
    "July", "August", "September", "October", "November", "December"
    ];

    let dateObj = new Date();
    let month = monthNames[dateObj.getUTCMonth()];
    let day = dateObj.getUTCDate() - 1;
    let year = dateObj.getUTCFullYear();

    let newDate = `${month} ${day}, ${year}`;
    
    $.ajax({
        url: "assets/geojson/countryBorders.geo.json",
        type: "GET",
        dataType: "json",
        data: {
            
        },
        success: function(result) {
.... etc

Within my HTML modal for displaying the weather per country, I would like to include things such as the date.

Is there any way to use the Javascript variable newDate in the HTML script?

something like ....?

 <div class="modal-body">
          <h6 id="capitalCity" class="modal-sub-header"></h6>
          <hr>
          <ul class="dem">
              <p class="date" id="newDate"></p>

Do you want to insert the value of the `newDate` variable inside the html? — Franco Agustín Torres, Oct 29 '22 at 00:18

MalwareMoon · Accepted Answer · 2022-10-29T01:08:20.017

Elaboration on Franco A. Torreses answer this will be your javascript

function getWeather(countryName) {
    const monthNames = ["January", "February", "March", "April", "May", "June",
    "July", "August", "September", "October", "November", "December"
    ];

    let dateObj = new Date();
    let month = monthNames[dateObj.getUTCMonth()];
    let day = dateObj.getUTCDate() - 1;
    let year = dateObj.getUTCFullYear();

    let newDate = `${month} ${day}, ${year}`;
    document.getElementById('newData').textContent = newDate

And your HTML will stay the same. document.getElementById('newData') grabs the element from DOM and .textContent sets it's text to whatever is after =. This is also superior to using .innerHTML as .innerHTML it allows for injections.

If you are after using variables in HTML, you could take a look into either frontent frameworks such as React, VueJS, Angular that allow just using {variable} or some other backend languages such as PHP.

Edit

Regarding innerHTML. As was stated in comments by @tacoshy "innerHTML poses a security issue as it is open for XSS injections if the injected code isn't validated" This is because textContent does not let you insert HTML elements (opposed to .innerHTML), but you don't have to worry about that if your application does not have any user input. Also it's more performant as it does not require DOM-reparse.

`textContent` is not superior because `innerHTML` allows for injections. What you mean is that `innerHTML` poses a security issue as it is open for XSS injections if the injected code isn't validated (validate the code and you are fine). The reason why `textContent` is more efficient is, that `innerHTML` needs the DOM to re-parse which takes more time. As such it is more efficient as long as you only try to insert a text (not superior as it has its limitations compared to `innerHTML`) — tacoshy, Oct 29 '22 at 00:50
@tacoshy You are absolutely right, I just did not want to confuse him with paragraph of regarding something that was not exactly asked. I will refer to your comment in the post. — MalwareMoon, Oct 29 '22 at 00:56
Of course, you can quote me. IMHO there is always a place to review code and to change parts of it to be more efficient. There is also enough space to teach the OP those other methods and explain to him why his knowledge is outdated or inefficient. Learning is the purpose of SO after all. — tacoshy, Oct 29 '22 at 00:59

score 1 · Answer 2 · answered Oct 29 '22 at 00:20

To insert a value inside a DOM element:

document.getElementById('newData').textContent = 'the value'

The document method getElementById retrieves the DOM element by its id, which in this case is newData. The DOM element method textContent changes the DOM element's text.

score 0 · Answer 3 · answered Oct 29 '22 at 00:33

const dateOptions = { year: 'numeric', month: 'long', day: 'numeric' };
const dateFormatter = new Intl.DateTimeFormat( 'en-US', dateOptions ).format;

document.getElementById('newData').textContent = dateFormatter( new Date() );

// Result = October 28, 2022

You can use the browser native function Intl.DateTimeFormat to format your date as needed without having to run lots of logic or using 3rd party code.

use javascript variable in html script

3 Answers3