How to pass variable to the JavaScript function within HTML?

Question

My code works if it is hardcoded with LLC. However, I would like to pass the variable and do not know how to modify the code to accept variable. This is related to Zendesk Guide customization.

For this line:

https://XYZ.zendesk.com/api/v2/help_center/articles/search.json?label_names=LLC',

I would like to replace LLC with a variable value that is passed from HTML.

See code below:

<div>
    {{#if article.labels}}
    {{#each article.labels}} 

    <p>Articles related to <b> {{identifier}} :</b></p>
        <ul class="related">
        <p id="Project"></p>
    </ul>

    {{/is}} 
    {{/each}}
    {{/if}}

    <script type="text/javascript">
        <!-- create elements for LLC articles -->

        function createNode(element) {
          return document.createElement(element);
        }

        function append(parent, el) {
         return parent.appendChild(el);
        }

        <!-- list LLC articles-->

        const ul = document.getElementById('Project');
        const url = 'https://XYZ.zendesk.com/api/v2/help_center/articles/search.json?label_names=LLC';

        fetch(url)
            .then((resp) => resp.json())
            .then(function(data) {

        let family = data.results;

        return family.map(function(article) {
            let li = createNode('li'),
            span = createNode('span');
            span.innerHTML = "<a href ="+`${article.html_url}`+">"+`-    ${article.title}`+"</a>";
            append(li, span);
            append(ul, li);
            })
        })

            .catch(function(error) {   
                console.log(error);
            });
        }
    </script>

From the above HTML, the value of LLC is retrieved from {{identifier}}. I need to pass the value of {{identifier}} to the JavaScript code to replace LLC. How could I achieve this?

Also, don't mix template literals and string concatenation. Do this instead: span.innerHTML = `<a href="${article.html_url}">${article.title}</a>`; Within template string you can put literal strings, and only the parts within ${} are interpolated as expressions. — msanford
– msanford, Commented Apr 24, 2019 at 19:41

Sushanth -- · Accepted Answer · 2019-04-24 18:13:41Z

1

You you have the LLC variable available, then it is just a matter of simple string concatenation.

const LLC = "something";
const url = 'https://XYZ.zendesk.com/api/v2/help_center/articles/search.json?label_names=' + LLC;

You can also use template string literals if there is support for ES6.

const LLC = "something";
    const url = `https://XYZ.zendesk.com/api/v2/help_center/articles/search.json?label_names=${LLC}`;

answered Apr 24, 2019 at 18:13

Sushanth --

55.8k9 gold badges70 silver badges109 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Cat Over a year ago

...and if you don't already know how to, you can get the innerHTML content of an HTML element by first selecting the element it from the DOM. The simplest way is if you can isolate your content in an element with anid attribute, something like Articles related to {{identifier}} :, which allows const myElement = document.getElementById("identifierElement"); const LLC = myElement.innerHTML; to work. But Element.querySelector (developer.mozilla.org/en-US/docs/Web/API/Element/querySelector) is nice too.

Angel Over a year ago

How can I pass 2 variables instead of 1?

Collectives™ on Stack Overflow

How to pass variable to the JavaScript function within HTML?

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related