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>

Answer 1

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)

}

Answer 2

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.

Answer 3

Try this,

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