javascript - 如何将变量传递给 HTML 中的 JavaScript 函数?

标签 javascript html

如果使用 LLC 进行硬编码,我的代码就可以正常工作。但是,我想传递变量,不知道如何修改代码来接受变量。这与 Zendesk 指南定制有关。

对于这一行:

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

我想用从 HTML 传递的变量值替换 LLC。

见下面的代码:

<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>

从上面的 HTML 中,LLC 的值是从 {{identifier}} 中检索到的。我需要将 {{identifier}} 的值传递给 JavaScript 代码以替换 LLC。我怎样才能做到这一点?

最佳答案

您有可用的 LLC 变量,那么这只是简单的字符串连接问题。

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

如果支持 ES6,您还可以使用模板字符串文字。

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

关于javascript - 如何将变量传递给 HTML 中的 JavaScript 函数?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55836149/

相关文章:

javascript - 如何在 Laravel 中自定义 vue-filemanager 前端?

javascript - HTML DOM 模板 : data-* versus closures for binding data

悬停时动画元素的 JavaScript 问题

javascript - 如何使 HTML 元素仅在特定屏幕尺寸下可点击

javascript - 如何将 JSON 插入到 zope chameleon 模板的脚本标签中?

javascript - 当检测到单击 div 时更改 div 的样式

javascript - 按日期排序 Angular 2 管道

javascript - 固定标题 Div 的 CSS 问题

html - 在 Thymeleaf 中为图像设置 CSS 样式

javascript - jQuery $.get() 不会在表单提交时执行