Passing a variable to javascript through HTML Element

Yura Published at Dev

Yura

I have 3 hidden buttons in my HTML that i have created to hold my values.

A fourth submit button will take the values of these 3 buttons and use them as parameters for a Javascript function.

My hidden buttons

<button type="button" value="Title Retrieved should be here" id="TitleHolder" style="visibility: hidden;"></button>
<button type="button" value="Each year, thousands of patients and families from across the United States and beyond travel to Boston Children's Hospital to seek treatment for complex diseases and conditions. All of our patients are unique, but their stories tend to have a lot in common: a serious health problem, doctors and nurses collaborating from half a world away, the remarkable determination of children and families -- and a happy ending." id="StoryHolder" style="visibility: hidden;"></button>
<button type="button" value="25" id="IDHolder" style="visibility: hidden;"></button>

The button to be clicked and to send the values

<a id="btn" class="initialism basic_open" onclick="viewModal(document.getElementById('TitleHolder').value, document.getElementById('StoryHolder').value, document.getElementById('IDHolder').value)" >Read full story &raquo</a> </div>

My javascript function

function viewModal(Title1, Story, ID) {
    var modal = document.getElementById(ID);

    modal.style.display = "block";
}

kemicofa ghost

The main problem with your code, was the ID variable in your viewModal. As you can see here, you never passed your modal ID when you called viewModal:

viewModal(document.getElementById('TitleHolder').value, document.getElementById('StoryHolder').value, document.getElementById('IDHolder').value)

I changed your code, to make it "cleaner". Here is a working version of what you want. Avoid adding events directly onto HTML elements.

//Wait till the page has finished loading.
window.addEventListener("load", function(){
  
  //Retrieve and store the hidden inputs elements.
  var storyHolder = document.getElementById('StoryHolder');
  var idHolder = document.getElementById('IDHolder');
  var titleHolder = document.getElementById('TitleHolder');

  //Add click event on button.
  document.getElementById('btn').addEventListener('click', function(){
      //When button is clicked, log all the hidden input values.
      console.log(storyHolder.value, idHolder.value, titleHolder.value);

     //TODO: Modal code here.
     //UNCOMMENT: document.getElementById('REPLACE_THIS_WITH_MODAL_ID').style.display = "block";
  });
});

<input type="hidden" value="Title Retrieved should be here" id="TitleHolder"/>
<input type="hidden" value="Each year, thousands of patients and families from across the United States and beyond travel to Boston Children's Hospital to seek treatment for complex diseases and conditions. All of our patients are unique, but their stories tend to have a lot in common: a serious health problem, doctors and nurses collaborating from half a world away, the remarkable determination of children and families -- and a happy ending." id="StoryHolder"/>
<input type="hidden" value="25" id="IDHolder">

<a id="btn">Read full story &raquo</a>

Collected from the Internet

Please contact [email protected] to delete if infringement.