We Keep Coding

JavaScript: How do I take data from an array and create list in HTML?

So I've got some code in JavaScript that takes the text from any subNav class and places it in a single array.
var subheading = []
var elements = document.getElementsByClassName('subNav');
for(var i=0; i<elements.length; i++) subheading.push(elements[i].textContent)
var navList = subheading.join()
However I'm stuck with then taking this text and putting it into a separate organised list in another div class e.g div sideNavBar.
<p class="subNav">
<a href"">Test 1</a>
</p>
<p class="subNav">
<a href"">Test 2</a>
</p>
<p class="subNav">
<a href"">Test 3</a>
</p>
<p class="subNav">
<a href"">Test 4</a>
</p>
<div class="sideNavBar">
</p>
The idea for this is to be able to put this into a fixed sidebar that can then be used to jump to anchors attached to subheadings as opposed to just having the links at the top of the page.
Could anyone suggest a function to create a list then place the data from my array into it?

Array.map() is great for this:
var arrOfStrings = ["Val1", "Val2", "Val3"]
var stringsAsNewMenu = arrOfStrings.map(val => `<li class="navItem">${val}</li>`).join("")
var menuElem = document.createElement('ul')
menuElem.innerHTML = stringsAsNewMenu
document.body.appendChild(menuElem)

Making dropdown visible javascript

I made a dropdown system with razor script in Umbraco. I finally got all the children working but how do I hide the sub items that should be a dropdown list? I tried something with javascript but that seemed to open all dropdowns instead of each one individually.
Here's my code:
<div class="col-sm-3">
<div class="well well-lg span-padding extra-padding top background-light">
<ul class="nav nav-list tree">
# {
var documentRootNodeId = Model.Content.GetPropertyValue("documentRoot", true); // Fetch recursive document root id.
var selection = Umbraco.TypedContent(documentRootNodeId).Children.Where("Visible"); // Select all nodes below the document root.
}
#foreach(var item in Model.Content.Ancestor(1).Descendants("menu")) {
foreach(var ItemChild in #item.Children("hoofdstuk")) {
<li> #ItemChild.Name </li>
foreach(var Subitem in #ItemChild.Children) {
<li> #Subitem.Name </li>
if (Subitem.Children.Any()) {
foreach(var Finalitem in #Subitem.Children) {
<ul>
<li> < a href = "#Finalitem.Url" > #Finalitem.Name </a></li>
</ul>
}
}
}
}
}
}
</ul>
</div>
</div>
Javascript:
function myFunction(a) {
var itemcount = a.parentNode.getElementsByClassName("sub").length;
for (i = 0; i < itemcount; i++) {
a.parentNode.getElementsByClassName("sub")[i].classList.toggle("show");
}
}
This is what it displays:
Sub-Subtest1 and 2 needs to be hidden till we click it's ancestor which is SubTest1. Same goes for sub-subtest9.
I can't seem to get it working dynamically. If I create something with javascript it opens all the dropdown's at once and not individually.

First, I would recommend you to use Visual Studio, that will help you to fix issues with your code. You should fix your html structure and nest the elements of your list properly. You have li as direct children of li which is invalid.
<div class="col-sm-3">
<div class="well well-lg span-padding extra-padding top background-light">
<ul class="nav nav-list tree">
#{
var documentRootNodeId = Model.Content.GetPropertyValue("documentRoot", true); // Fetch recursive document root id.
var selection = Umbraco.TypedContent(documentRootNodeId).Children.Where("Visible"); // Select all nodes below the document root.
}
#foreach (var item in Model.Content.Ancestor(1).Descendants("menu"))
{
foreach (var ItemChild in item.Children("hoofdstuk"))
{
<li class="item">
#if (ItemChild.Children.Any())
{
<ul class="submenu">
#foreach (var Subitem in ItemChild.Children)
{
<li class="item">
#Subitem.Name
#if (Subitem.Children.Any())
{
foreach (var Finalitem in Subitem.Children)
{
<ul class="submenu">
<li> #Finalitem.Name </li>
</ul>
}
}
</li>
}
</ul>
}
</li>
}
}
</ul>
</div>
</div>
Then you can use jQuery to easily show the submenus. Use [children][1] to retrieve only the first level of submenus:
$(".item").click(function(){
$(this).children(".submenu").toggle(); //it will display or hide your submenu when clicking the item.
});
And your submenu should be hidden by default, you can do that with css:
.submenu{
display: none;
}
Note: to make the code more clear I would recommend you to use Razor helpers to create a recursive function for your sublists.

Trying to make a drop down menu using javascript and it is not working?

I am really new at javascript but as far as I can tell, the code that I have here should be working. No errors come up when I view in the console(nothing comes up for that matter) and all that appears on the website is the button that doesn't do anything and the list items already appearing on the page
<html>
<body>
<nav>
<ul>
<li>
<button class="accordion">Collections</button>
<ul class="dropDown">
<li><p>Mojica Lookbook</p></li>
<li><p>Andrade Editorial</p></li>
<li><p>Bell Videos</p></li>
</ul>
</li>
<li>
Shop
</li>
<li>
Stores
</li>
<li>
Contact
</li>
<li>
<img src="mojica_lookbook/mojica_credits.png" class="credits">
</li>
</ul>
</nav>
</body>
<script>
var dropDown = document.getElementsByClassName("dropDown");
var i = 0;
for(i = 0; i < dropDown.length; i++) {
dropDown[i].onclick = function(){
this.classList.toggle("active");
this.nextElementSibling.classList.toggle("show");
}
}
</script>
</html>

I believe you will need to use the element passed into the callback for the onclick. Instead of using the 'this' keyword within the callback try this:
for(i = 0; i < dropDown.length; i++) {
dropDown[i].onclick = function(e){
e.target.classList.toggle("active");
e.target.nextElementSibling.classList.toggle("show");
}
}
There are a few examples here. As for the button you have not mapped a click event, so that will as you explain do nothing.

Keyboard navigation on nested list using only javascript

I have a ul list as follows. I am new to JS and trying to do a keyboard navigation, just the arrow keys using only javascript.
<ul id= nav>
<li class =subnav id =sub1> Companies
<ul id = hidden>
<li> item 1 </li>
<li> item 2 </li>
<li> item 3 </li>
</ul>
</li>
<li class =subnav id =sub2> LINKS
<ul id = hidden>
<li> item 4 </li>
<li> item 5 </li>
<li> item 6 </li>
</ul>
</li>
</ul>
my JS:
ul = document.getElementById("nav");
li = ul.getElementsByClassName("subnav");
ul2 = document.getElementById("hidden");
li = ul.getElementsByTagName("li");
function keyPress(e)
{
var e = e||window.event;
e =e.which||e.keyCode;
for( var i=0; i<li.length; i++)
{
var f = li[i].childNodes[0];
if(li[i].children.length > 0)
{
for(var j=0; j<li2.length; j++)
{
var x = li2[j].childNodes[0];
}
}
else
{
alert("no child nodes");
}
}
}
I am trying to set focus on the first item and then moving to each nodes using keys.

I suggest using jwerty, awesome keyboard events library.
I used jQuery and jWerty plugin.
Here is a quick JSFiddle: (Click the preview window and start hitting the down key)
http://jsfiddle.net/8QZrV/
As a basic idea, you should create an object with all the elements and then iterate through them, my basic example was like this:
var i = 0;
j = jQuery('.navigator li').length;
And then you hook it up in jwerty, I guess you want to make some actions there, so I guess you should also .focus() the current element.
Enjoy!

how to get li first href in a UL using javascript

everyone i want to get all first href elements in li and i want it in javascript only
<div id="cataloge">
<ul id="catalog-items" class="product-items">
<li id="OS389HL91QJCLMX" class="product-item >
<a id="1:OS389HL91QJCLMX" href="/piezas-y-Sala-4-piezas%29.-116508.html">link1
<ul><li>some data</li><li>some data</li><li>some data</li></ul>
</a>
</li>
<li id="OS389HL91QJCLMX" class="product-item >
<a id="1:OS389HL91QJCLMX" href="/piezas-y-Sala-4-piezas%29.-116508.html">link1
<ul><li>some data</li><li>some data</li><li>some data</li></ul>
</a>
</li>
<li id="OS389HL91QJCLMX" class="product-item >
<a id="1:OS389HL91QJCLMX" href="/piezas-y-Sala-4-piezas%29.-116508.html">link1
<ul><li>some data</li><li>some data</li><li>some data</li></ul>
</a>
</li>
</ul>
<div>
i want get href links in the li classname "product-item" under UL with id catalog- items
i written this below code,but it is giving empty when print the chethan1;
var lists = document.getElementById("catalog-items");
var items = lists.getElementsByTagName("li");
var chethan1="";
for (var i = 0; i < items.length; i++)
{
if(typeof items[i]!="undefined" && items[i]!="" && items[i].className=="product-item")
{
chethan1.push(items[i]);
}
}
console.log(chethan1);
[empty]
plz someone help me to sort out..thanks in advance..

See this: http://jsfiddle.net/M5xYb/
var chethan1= new Array();
Closes string, uses new array from above. Results are not empty.

Among other markup concerns, .push() is to be used on arrays, not strings.
Use var chethan1 = []; instead of var chethan1="";.
Updated Fiddle