How to get the html List value through Javascript?

Question

I am trying to get values from html list <li>.

<ul>
    <li><a>Main Menu</a>
     <ul class="leftbutton" >
      <li value="List1"><a>Sampe 1</a></li>
      <li value="List2"><a>Sample 2</a></li>
      <li value="List3"><a>Sample 3</a></li>
      <li value="List4"><a>Sample 4</a></li>
      <li value="List5"><a>Sample 5</a></li>
     </ul>
    </li>
</ul> 

<iframe id="iframeid" width="100%" height="100%" align="middle"></iframe> 

function changeList()
{
    var iframe = document.getElementById("iframeid");  
    var url = document.getElementById("selectedlist").value + ".html"; 
    iframe.src = url;
}

Where would I put onClick="changeList()" to get the values from the list?

Answer 1

You would put this on the anchor tag, as I assume that is what you are clicking.

Answer 2

I'm not 100% sure about inline iframes but you could simply use

<li><a href="/path/to/html" target="myIframeId">Value</a></li>

This isn't valid html 4 strict but is valid with transitional and works in all browsers regardless.

Answer 3

You get several things wrong here.

1. a HTML list item (<li>) does not have a value
2. a HTML list has no "selected item"
3. you cannot get any "selected" item by calling getElementById()

Here is my alternative suggestion:

<ul>
  <li><a>Main Menu</a>
    <ul class="leftbutton" >
      <li><a href="List1.html" onclick="return changeList(this);">Sample 1</a></li>
      <li><a href="List2.html" onclick="return changeList(this);">Sample 2</a></li>
      <li><a href="List3.html" onclick="return changeList(this);">Sample 3</a></li>
      <li><a href="List4.html" onclick="return changeList(this);">Sample 4</a></li>
      <li><a href="List5.html" onclick="return changeList(this);">Sample 5</a></li>
    </ul>
  </li>
</ul> 

<iframe id="iframeid" width="100%" height="100%" align="middle"></iframe> 

<script type="text/javascript">
function changeList(a)
{
  var iframe = document.getElementById("iframeid");
  iframe.src = a.href;
  return false;
}
</script>

Thoughts: If JavaScript is deactivated, it still works (rudimentarily). The function returns false, so when JavaScript is enabled clicking on the link cancels the href navigation.

Be aware that up to HTML 4.01 Transitional it is also possible to do this entirely without JavaScript. A target attribute with the frame name is sufficient:

<ul>
  <li><a>Main Menu</a>
    <ul class="leftbutton" >
      <li><a href="List1.html" target="iframename">Sample 1</a></li>
      <li><a href="List2.html" target="iframename">Sample 2</a></li>
      <li><a href="List3.html" target="iframename">Sample 3</a></li>
      <li><a href="List4.html" target="iframename">Sample 4</a></li>
      <li><a href="List5.html" target="iframename">Sample 5</a></li>
    </ul>
  </li>
</ul> 

<iframe id="iframeid" name="iframename" width="100%" height="100%" align="middle"></iframe>