Блог

Главная - Вопросы по программированию - Передача переменных javascript в атрибут html-объекта «data-url»

Передача переменных javascript в атрибут html-объекта «data-url»

#javascript #html #variables #url

#javascript #HTML #переменные #url-адрес

Вопрос:

Я пытаюсь поместить переменную в свой javascript, которая перейдет в URL-адрес, являющийся HTML-объектом. Я попытался назначить атрибут «data-url», который частично используется со встроенной формой опроса. Я также безуспешно пробовал setAttribute .

 <div class="typeform-widget" data-url="https://eatforklore.typeform.com/to/XPDPsx?p1=xxxxxamp;amp;p2=xxxxxamp;amp;p3=xxxxxamp;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>

Ответ №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 является:

  1. не то, что вы хотите — используйте getElementsByClassName вместо этого.
  2. Возвращает вам массив.

Вызов set atrribute для массива не будет работать. Похоже, вместо этого вы хотите сделать что-то вроде:

 <div class="typeform-widget" data-url="https://eatforklore.typeform.com/to/XPDPsx?p1=xxxxxamp;amp;p2=xxxxxamp;amp;p3=xxxxxamp;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>

Редактировать: чтобы немного продолжить, getElmentsByTagName было бы полезно, если вы хотите получить все div на странице, но в вашем коде используется имя класса, а не имя тега.

Редактирование 2: исправлено для цикла — спасибо, что указали на мой недосмотр @JPO 🙂