Question

102

How to get the html List value through JavaScript?

rated 0 times [ 109] [ 7] / answers: 1 / hits: 17493 / 15 Years ago, sun, may 24, 2009, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

taylert

Add To Favorites

Follow

Total Points: 627

Total Questions: 91

Total Answers: 108

Location: Mayotte

Member since Mon, Sep 12, 2022

2 Years ago

taylert questions

1 How to format date in v-Calendar?

Tue, Jul 28, 20, 00:00, 4 Years ago

1 Check if at least two elements in an array are greater than zero - JavaScript/Typescript

Mon, Feb 17, 20, 00:00, 4 Years ago

1 How do a date range validation with vue/Quasar

Tue, Dec 10, 19, 00:00, 5 Years ago

1 JavaScript: When to use a Class vs. a prototype?

Fri, Sep 13, 19, 00:00, 5 Years ago

1 Is there a generic way to set state in React Hooks? How to manage multiple states?

Tue, Jul 9, 19, 00:00, 5 Years ago

View All

answered 15 Years ago rossthomasn · Accepted Answer

You get several things wrong here.

a HTML list item (<li>) does not have a value

a HTML list has no selected item

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>