Returned JavaScript value wont render inside a div element

Question

This a basic question (Posting this again, as it was not re-opened after I updated the question). But I couldn't find any duplicates on SO.

This is a script I intend to use in my project on different pages. The purpose is to override the default ID shown in a span element to the order number from the URL parameter session_order. This doesn't affect anything and only enhances the UX for my project.

scripts.js (loaded in the header):

function get_url_parameter(url, parameter) {
    var url = new URL(url);
    return url.searchParams.get(parameter);
}

And in my HTML template, I call the function this way,

<div onload="this.innerHTML = get_url_parameter(window.location.href, 'session_order');">24</div>

Also tried this,

<div><script type="text/javascript">document.write(get_url_parameter(window.location.href, 'session_order'));</script></div>

When the page is rendered, nothing changes. No errors or warnings in the console either for the first case.

For the second case, console logged an error Uncaught ReferenceError: get_url_parameter is not defined, although script.js loads before the div element (without any errors).

Normally, I'd do this on the server-side with Flask, but I am trying out JavaScript (I am new to JavaScript) as it's merely a UX enhancement.

What am I missing?

Since HTML reads from top to bottom, if your function is declared after the element call, it won't find it. You can wrap your javascript at the end of body in order to find it. — André Silva, Nov 13 '19 at 13:21
@AndréSilva, if that's the case, the first case should fail too right? I don't see a similar error in the console for that. — Claudia, Nov 13 '19 at 13:22
And I am loading my `script.js` in the `` and calling the function in the ``. — Claudia, Nov 13 '19 at 13:23

score 2 · Accepted Answer · answered Nov 13 '19 at 13:26

Try this:

// This is commented because it can't be tested inside the stackoverflow editor
//const url = window.location.href;
const url = 'https://example.com?session_order=13';

function get_url_parameter(url, parameter) {
    const u = new URL(url);
    return u.searchParams.get(parameter);
}

window.onload = function() {
  const el = document.getElementById('sessionOrder');
  const val = get_url_parameter(url, 'session_order');
  if (val) {
    el.innerHTML = val;
  }
}

<span id="sessionOrder">24</span>

Define the function you need for getting the URL param and then on the window load event, get the URL parameter and update the element.

Thank you. This works. I'd still like to understand why `
24
` wont work. — Claudia, Nov 13 '19 at 13:36

score 0 · Answer 2 · answered Nov 13 '19 at 13:27

0

Here you go. Try to stay away from inline scripts using document.write.

function get_url_parameter(url, parameter) {
    var url = new URL(url);
    return url.searchParams.get(parameter);
}

window.addEventListener('load', function() {
  const url = 'https://yourpagesdomain.name/?session_order=hello'; //window.location.href;
  
  const sessionOrder = get_url_parameter(url, 'session_order');
  document.getElementById('sessionOrder').innerText = sessionOrder;
  
});

<div id="sessionOrder"></div>

answered Nov 13 '19 at 13:27

phuzi

12,078
3
26
50

Thank you. This works, but I want to understand why `
24
` is not working. – Claudia Nov 13 '19 at 13:30
Essentially, you can't. The `onload` event is only supported for a few elements and `
` is not one of them. https://stackoverflow.com/questions/4057236/how-to-add-onload-event-to-a-div-element
– phuzi Nov 13 '19 at 13:35
Thank you. This clarified my question. – Claudia Nov 13 '19 at 13:38

score 0 · Answer 3 · answered Nov 13 '19 at 13:27

0

The order of your markup and script matters...

<div></div>

<script>
function get_url_parameter(url, parameter) {
    var url = new URL(url);
    return url.searchParams.get(parameter);
}
</script>

<script>
document.querySelector('div').innerHTML = get_url_parameter('https://example.com?session_order=2', 'session_order');
</script>

answered Nov 13 '19 at 13:27

McKabue

2,076
1
19
34

I understand. But in my case, my `script.js` is loaded in the ` whereas the function is called inside the ``. And I am trying to understand why `this.innerHTML` wont work too. – Claudia Nov 13 '19 at 13:33

Returned JavaScript value wont render inside a div element

3 Answers3