javascript変数をhtmlオブジェクト "data-url"の属性に渡す

Question

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> 

Answer 1

getElementsByTagName次のとおりです。

1. ない何をしたい - 代わりにgetElementsByClassNameを使用しています。
2. 配列を返します。

配列のatrributeを呼び出しても機能しません。

<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：ループのために修正された - 私の監督@JPOを指摘してくれてありがとう:)

Answer 2

document.getElementsByTagNameはそのタグではなく、そのクラス上のノードベースを選択します。

イアン・マンディ@

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

が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); 
}