Please guys while is my nav not targeting. Check my code the <!--nav1--> and explaine to me whats wrong

Question

I decided to add navigations into a drop down list. But the #id wont target its place in the <article >
https://code.sololearn.com/WDK2H03POo35/?ref=app

Answer 1

modify your select tag to
<select onchange="if (this.value) window.location.href=this.value">

I would also suggest using snake notation for id, example
id="What is Html"
to
id="what_is_html"

Answer 2

Orin Cook
this is as short as I can get it, but I would like to know if there is an even simpler solution.

<select onchange="location.href=this.value">

I also believed that an href="#target_id" was needed, but my experiment seems to indicate that location.href can find the target using the id alone.
Not sure how this behavior is implemented cross browser, so use with caution.

it has a bug, though....
onchange event behavior does not trigger if the option was preselected and not changed.
perhaps somebody could suggest a fix?
https://code.sololearn.com/WSNC3PHYY2In/?ref=app

Answer 3

Olayeye Eniola Olamilekan
Orin Cook

Here is the debugged version of my first code.

The problem with the first code was with the onchange event, because the last selected option was being remembered by each select element, the onchange event was not being triggered if the selected value is the same (not changed). This is not ideal because it doesn't scroll to that page section if it was the last selected one. You can only go to different sections(or div) everytime.

I added a reset to this.value as well as a better default option.

This one works more predictably.
Smooth scroll css doesn't seem to work, though.

https://code.sololearn.com/WIxTbOhsy7JD/?ref=app

Answer 4

As Bob_Li suggests, id names cannot contain whitespace; instead what you've done here is given them both multiple ids, so #What or #is will take you to the first one, #Elements will take you to the second one, and id tags will send you to the first instance of that id, so #Html will take you to the first one and NOT the second one.

Also, if you want your options to actually link to the sections, you'll need to actually use anchor tags, <a href="#id"> To make that work in a dropdown list, you'll probably need to include some JavaScript (though perhaps someone else has a clever solution for doing it in pure html).

Answer 5

Thanks y'all for your help