How do I pass a variable to a div section?

Any suggestions at all?

I'm used to passing variable data in an href on to PHP. In this case I need to pass the variable data to a DIV on another .html. Can I send the data similarly as I do with PHP or do I send a long string and somehow parse inside of .html?

Any help or suggestions would be greatly appreciated. Thanks.

Are you talking about a div on the same page as the li or on a completely different page?

it's all one big page. separate .html's are called but have DIV statements.


Here is a portion of the html that creates the <li>

html += "<li><a href=#vc2 item='1234'"
   + ">"
   + localStorage["item" + i] + "</br><p>"
   + localStorage["desc" + i] +"</p></a></li>";

In this example I'm hardcoding the item value. I want to pass the item value to a <DIV> html program like the following:

This program is vc2.html.

<div id="vc2">
  <div class="toolbar">
    <h1>VC2</h1>
    <a href="#" class="cancel">Cancel</a>
 </div>

You can't pass it that way you have assign the data to the innerHTML.  Do the href as just href="#" and use an onclick to move what you want: onclick="document.getElementById('vc2').innerHTML=your string"

The code as it is lists the <li>'s properly. I simply want to pass a variable when I click on the specific <li>. Here is the entire contents of vc1.html. I am already using an innerHTML. Where would your suggestion fit in?



<div id="viewcart">
  <div class="toolbar">
   <h1>View Cart</h1>
   <a href="#" class="cancel">Cancel</a>
  </div>
      
   <div id="searchresults">
   <ul id="item" class="edgetoedge">
      <script>
         window.onload = function(){
         var val = parseInt(localStorage.trxCtr);
         var html = "";
         for( var i = 1; i <= val; i++)
         {
             if ( localStorage["item" + i] != "X" )
             {
                html += "<li><a href=#vc2 item='3772'"
                + ">"
                + localStorage["item" + i] + "</br><p>"
                + localStorage["desc" + i] +"</p></a></li>";
             }      
         }
        document.getElementById("item").innerHTML = html;
         };
     </script>
   </ul>
  </div>            
</div>      

I'm using the innerHTML to create the html variable which has the <li> link. The code inside of the href is where I'm thinking that I needI to pass the variable.

What is an onload doing in the middle of the HTML. That can't possibly work, and if it did, it would overwrite itself.  Onload belongs in the head to be executed after the page is loaded.

That code does not make any sense.  If you want information from localStorage on the page then script it in the head for execution at load time and put it in the appropriate container.

I agree with COBOLdinosaur about the onload in the middle of the page is not a great idea. Even though I am not sure to understand passing a variable to a HTML div. Two distinct concepts which should not be used together. Though, I think you can probably do something if I correctly understand what you want to do.

Using a tag attribute as "item" as you did into you A tag allows you to have a storage place located by position of the tag. So, on the A tag, you can add << onclick="test();" >>.

Add the test function into a script tag (preferably in the head).
 

function test() {
alert(this.getAttribute('item'));
}

Select allOpen in new window

If this doesn't fit your needs, please give me details of what you mean by "passing a variable to a div".

The index.html is the only .html that has a head and body. The rest of the .html are included code, and as such they do not have a head and body. Only one head and body. Basically it is one .html with DIV includes.

So the purpose of passing a variable to a DIV is so that when that portion of the code is executed (when the above <li> is selected), the <li> will pass a variable to a DIV section. THAT DIV section will do a completely separate piece of logic that needs the variable, in this case an item number.

Same concept as when you pass variables to a .php?var=x

As far as the location of the onload; the <li>'s do not get created without it. I have tried setting up that entire function as a regular JS function without the onload but when I do the <li>'s do not appear. I recycled that logic from another .hmtl I had. Any suggestions wil be considered.

Update. I went back and cleaned up the function by removing the onload. I was just recycling some code to test. Thanks for pointing that out.

Still looking for some help on passing a variable when a DIV is the target of the href.

The variable coming from an URL can be inserted as an HTML attribute as you inserted the HTML.

Doing so, would allow you to do what I wrote above. Isn't it ?

Same concept as when you pass variables to a .php?var=x

No it is nor same cocept PHP is a full featured programming language.  HTML is just markup. You cannot program with it There is no such thing as a variable in HTML.  Thare no methods for assigning variables in HTML. HTML is not dynamic on its own.  You cannot assign a variable period.

What you can do is use javascript to populate the innerHTML of the target div.  So go ahead and continue trying to make HTML a programming language, and when you get tired of banging your head on the wall, let us know.  Then you can post code that shows us what the div looks like before the operation, and what you want it to look like after the operation.  Then perhaps we can help you with the scripting you need.

There is no point continuing this as long as you insist that you are going to assign a variable to an HTML element.

I understand that the markup is not the same as a program language. I have posted the code above. The html that creates the <li> and the html that control is sent to when the <li> is clicked.

The <li>'s that are displayed have the underlying <a href=#vc2>. When the <li> is selected the #vc2 DIV is accessed. I want to know upon entering the DIV what the item number was that was associated with the <li>. My thinking was that there would be some way to 'pass a parameter' in the <a href> code something like <a href=#vc2?item=1234>.

Is that done inside of:    What you can do is use javascript to populate the innerHTML of the target div. ?
If so, please give me an example.

Please look beyond HOW I am trying to do this and TRY to see what I am wanting to do. I am new to this and am just trying to figure this out. Your help is appreciated.

OK. This is becoming clearer. I will be testing the code shortly.

A couple followup questions. When I am in the target DIV statement how would I reference the item that was sent? Something like a JS where I would say sentitem=????????;       How exactly do I retreive the variable data?

How exactly do I retreive the variable data?

In the HTML it is not variable data.  if you want to reference it you need to use javascript to set a variable to the innerHTML, and then parse the variable to get the value you want.

somevar = document.getElementById('divid').innerHTML;

if the value you want is supposed to be a number you will to convert it with

numvar =parseInt(somevar);
or
numvar=parseFloat(somevar);

depending on whether you need an integer or a float.

Thanks for the education along with the info requested. I think that you've put me on the right track. I will award points and accept your solution. If I have further issues I will post another question.

Thanks for your help.

I'm always glad to help.

You will find that you can get solutions quicker, if you can provide detail.  If we have difficulty understanding what you want to do we need you to help us so we can do a better job of helping you.  Sometimes it might look like we are giving you a hard time, but we are just trying to get you to where you want to go.

Thanks for the A.