将javascript变量传递给html对象“data-url”的属性答案

【问题标题】：Passing javascript variables into attribute of html object "data-url"将javascript变量传递给html对象“data-url”的属性
【发布时间】：2017-02-25 22:03:49
【问题描述】：

我试图在我的 javascript 中放置一个变量，该变量将进入一个 html 对象的 url。我已经尝试分配属性“data-url”，该属性部分用于嵌入式调查表。我也试过 setAttribute 没有成功。

<div class="typeform-widget" data-url="https://eatforklore.typeform.com/to/XPDPsx?p1=xxxxx&amp;p2=xxxxx&amp;p3=xxxxx&amp;p4=xxxxx" data-text="Mo. 1 Product Reviews" style="width: 100%; height: 500px;"></div>
<script>// <![CDATA[
var a = document.getElementsByTagName('typeform-widget');
a.data-url = "https://eatforklore.typeform.com/to/XPDPsx?p1=" + p1;

(function(){var qs,js,q,s,d=document,gi=d.getElementById,ce=d.createElement,gt=d.getElementsByTagName,id='typef_orm',b='https://s3-eu-west-1.amazonaws.com/share.typeform.com/';if(!gi.call(d,id)){js=ce.call(d,'script');js.id=id;js.src=b+'widget.js';q=gt.call(d,'script')[0];q.parentNode.insertBefore(js,q)}})()
// ]]></script>

【问题讨论】：

标签： javascript html variables url

【解决方案1】：

document.getElementsByTagName 根据标签而不是类选择节点。例如，如果我想选择页面上的所有链接，我会使用：

var links = document.getElementsByTagName('a');

@ian-mundy 建议getElementsByClassName 是对的，但是for 循环中有错误。它应该看起来像：

var a = document.getElementsByClassName('typeform-widget');
for(var i = 0; i < a.length; i++) {
    var link = a[i];
    link.setAttribute('data-url','https://eatforklore.typeform.com/to/XPDPsx?p1=' + p1);
}

【讨论】：

【解决方案2】：

getElementsByTagName 是：

不是您想要的 - 请改用 getElementsByClassName。
返回一个数组。

在数组上调用 set 属性将不起作用。看起来你想要做的是：

<div class="typeform-widget" data-url="https://eatforklore.typeform.com/to/XPDPsx?p1=xxxxx&amp;p2=xxxxx&amp;p3=xxxxx&amp;p4=xxxxx" data-text="Mo. 1 Product Reviews" style="width: 100%; height: 500px;"></div>
<script>// <![CDATA[
var a = document.getElementsByClassName('typeform-widget');
for(var i = 0; i < a.length; i ++)
  a[i].setAttribute('data-url','https://eatforklore.typeform.com/to/XPDPsx?p1=' + p1);

(function(){var qs,js,q,s,d=document,gi=d.getElementById,ce=d.createElement,gt=d.getElementsByTagName,id='typef_orm',b='https://s3-eu-west-1.amazonaws.com/share.typeform.com/';if(!gi.call(d,id)){js=ce.call(d,'script');js.id=id;js.src=b+'widget.js';q=gt.call(d,'script')[0];q.parentNode.insertBefore(js,q)}})()
// ]]></script>

编辑：跟进一下，如果您想获取页面上的每个 div，getElmentsByTagName 会很有用，但您的代码使用的是类名而不是标签名。

编辑 2：固定 for 循环 - 感谢您指出我的疏忽 @JPO :)

【讨论】：