how to pass javascript variable to html tag

Question

I Have created href tag passing a pdf file and i'm getting that href value in javascript and i have to pass that javascript variable to html tag how it is possible , it is possible means please help.

Here my html code:

 <div class="pdfdwnld">
    <a href="C:/xampp/www/htdocs/rajashri/uploads/cata111log.pdf" download  class="pdfbtn" data-toggle="modal" data-target="#myModal">Download Pdf</a>
 </div>

Here my Javascript code:

<script type="text/javascript">
var linksArray = document.getElementsByClassName("pdfbtn");
var myFunction = function(event) {
    event.preventDefault();
    var href = this.getAttribute("href");
    alert('hello ' + href);
    return false;
};
for (var i = 0; i < linksArray.length; i++) {
    linksArray[i].addEventListener('click', myFunction, false);
}

In html tag this i need pass javascript variable for like data-value="" here only:

<div class="form_desc mob_view">
    <a class="fancybox" data-fancybox-group="iframe" data-value="" href="#pop_form">DOWNLOAD PDF</a> 
</div>

did u mean this? https://stackoverflow.com/questions/4836290/how-to-change-html-object-element-data-attribute-value-in-javascript — Kasnady, Feb 23 '18 at 04:26
Yaa i have javascript variable but how to pass that to data-value=" ". — Hari, Feb 23 '18 at 04:29

score 0 · Answer 1 · answered Feb 23 '18 at 04:29

0

You can set values using jQuery

$('#pop_form').data('myval',20);

It will set value to data-myval as 20

myval can be any name you can use.

answered Feb 23 '18 at 04:29

Krishnadas PC

5,981
2
53
54

score 0 · Answer 2 · answered Feb 23 '18 at 04:29

0

Try this,

 var allElements = document.getElementsByClassName('fancybox');
 var firstElement = allElements[0];
 firstElement.dataset.value = href;

answered Feb 23 '18 at 04:29

imanshu15

734
3
21

i need pass dynamic value to here like data-value=" " . – Hari Feb 23 '18 at 04:34
well u can like this, href should be your dynamic variable – imanshu15 Feb 23 '18 at 04:35
yes,that dynamic variable how to pass here :
DOWNLOAD PDF
– Hari Feb 23 '18 at 04:41

score 0 · Answer 3 · answered Feb 23 '18 at 06:25

If you need to set/modify value of data-value attribute

function(event) {

  event.preventDefault();

  // access element which fired event by > event.target
  var href = event.target.getAttribute('href');

  // Set attribute
  document.getElementsByClassName('fancybox')[0].setAttribute('data-value', href)

}

how to pass javascript variable to html tag

3 Answers3

Linked