I have the following code to populate a drop down using getmdl-select
var ul = document.getElementById('allocateToUL');
result.forEach(function (u) {
var li = document.createElement('li');
var dataVal = document.createAttribute('data-value');
var dataSelector = document.createAttribute('data-selector');
dataVal.value = u.Id;
dataSelector.value = u.Id;
li.innerText = u.FriendlyName;
li.className = 'mdl-menu__item';
li.setAttributeNode(dataVal);
li.setAttributeNode(dataSelector);
ul.appendChild(li);
// note call getmdlSelect.init once item is added
getmdlSelect.init('.getmdl-select');
componentHandler.upgradeAllRegistered();
});
What I do not seem to be able to do is find out which option is selected here;
I have tried
document.getElementsByClassName('mdl-menu').find('li.active')
But that just tells me 'find' is not a function although it getElements.... does return list of elements.
Any suggestions?
It looks like you want to use the jQuery find method, but you are not using a jQuery selector. Try replacing:
document.getElementsByClassName('mdl-menu').find('li.active')
With:
$('.mdl-menu').find('li.active')
Related
I am creating a feature on a Woocommerce variable product page where a user can select an option and that option gets added to a summary of items selected. I have multiple variations on the page so I have tried to get the innerHTML of every selected target and tried to add it to the UL by dynamically creating an li and adding to it. But at the moment only one li gets created and it adds all the options selected to it. Is there a way to separate each variation into multiple li's so that it adds the selected option to its own individual li? This is what I have so far.example here. It would be greatly appreciated if I am pointed in the right direction. Thanks a lot :)
var wrappers = document.querySelectorAll('.rtwpvs-terms-wrapper');
var summary = document.querySelector('.selection-summary');
var list = document.querySelector('.selected-items');
var li = document.createElement("li");
wrappers[0].classList.remove('opacity');
let increment = 0;
wrappers.forEach((item, sel) => {
item.addEventListener('click', (e) => {
summary.style.display = 'block';
// Create li items and assign on click innerhtml
li.appendChild(document.createTextNode(e.target.innerHTML));
list.appendChild(li);
increment++;
for(var i = 0; i < wrappers.length; i++) {
wrappers[increment].classList.remove('opacity');
}
})
})
You're appending to the same li (which you created at the top level) at every iteration of your loop. You should be creating a new <li> for each item, and append said <li> to your list, like so:
// Create li items and assign on click innerhtml
const li = document.createElement("li");
li.innerHTML = e.target.innerHTML;
list.appendChild(li);
You don't need the var li = document.createElement("li"); at the top level anymore.
I have a list with people's data inside it has a li element with 3 p tags inside, one for name, one for address and one for email.
I filled this list manually but due to some changes to my code I had to rewrite this so the html would be made with javascript.
My code looked like this
<p class="adres">#logopedist.Adres</p>
<p class="email">#logopedist.Email</p>
<p class="mobiel">#logopedist.Mobiel</p>
I rewrote this to build the html using javascript. This looks something like this.
var li = document.createElement('li');
li.className = "lijst";
li.id = "lijst";
li.onclick = "ficheVullen(this)";
p.className = "naam";
p.innerHTML = objLogos.Naam[i];
li.appendChild(p);
p.className = "adres";
p.innerHTML = objLogos.Adres[i];
li.appendChild(p);
var p = document.createElement('p');
p.className = "mobiel";
p.innerHTML = objLogos.Mobiel[i];
li.appendChild(p);
My list generates properly. But in my old code I had this at the start of the list.
<li class="lijst" onclick="ficheVullen(this)">
Whenever you would click an li element it would fill a div with the info from the p tags inside that li, so it would fill the div with name, address, mobile,etc
I cannot seem to get this function to work anymore. It only works on the very first LI element and only works for the name. Even though my code is the same and I append classes to the tags like it had in my old code.
The function looks like this:
function ficheVullen() {
FicheNaam = document.getElementById("FicheNaam");
FicheAdres = document.getElementById("FicheAdres");
FicheGSM = document.getElementById("FicheGSM");
FicheNaam.innerHTML = this.querySelector('.naam').textContent;
FicheGSM.innerHTML = this.querySelector('.mobiel').textContent;
FicheAdres.innerHTML = this.querySelector('.adres').textContent;
I get this error now. Cannot read property 'textContent' of null
I call this function here:
window.onload = function() {
changePage(1);
document.getElementById("lijst").addEventListener("click", ficheVullen);
};
The changepage function is part of my pagination where I use javascript to build the list.
When I move the eventlistener out of this I get this error: Cannot read property 'addEventListener' of null.
I hope this gives enough context
You have to use setAttribute to set id.
elm.setAttribute("id", "uniqueId");
Your case : li.setAttribute("id", "lijst")
li.id = "lijst"; will add "id" to object not as attribute
const parent = document.getElementById("container")
let elm = document.createElement("p")
elm.setAttribute("id", "pElm")
elm.innerText = "p tag"
parent.append(elm)
document.getElementById("pElm").style.background = "red"
<div id="container"></div>
I am quite new to javascript and was wondering if anyone can help with an issue I am having. I want to dynamically add and remove from a list group with inputs. I have worked out the mechanic's from a script floating around the internet but having issues with getting the input as part of the add remove method.
see below.
<script type="text/javascript">
function addItem(){
var ul = document.getElementById("selectme-list");
var selectme= document.getElementById("selectme");
var li = document.createElement("li");
li.className = "list-group-item";
li.setAttribute('id',selectme.value);
li.setAttribute('name','codeal[]');
li.setAttribute('value',selectme.value);
li.appendChild(document.createTextNode(selectme.value));
ul.appendChild(li);
}
function removeItem(){
var ul = document.getElementById("selectme-list");
var selectme = document.getElementById("selectme");
var item = document.getElementById(selectme.value);
ul.removeChild(item);
}
</script>
This script adds and removes the LI fine. But I want to have the input hold the information.
I want example: <li class="list-group-item"><input id="RM" name="codeal[]" value="RM"/>RM</li>
Currently getting example: <li class="list-group-item" id="RM" name="codeal[]" value="RM">RM</li>
Any help would be much appreciated thanks
Try creating a new input node as you created list and append it to list node as child element.
function addItem(){
var ul = document.getElementById("selectme-list");
var selectme= document.getElementById("selectme");
var li = document.createElement("li");
li.className = "list-group-item";
li.setAttribute('id',selectme.value);
x = document.createElement("INPUT");
x.setAttribute('name','codeal[]');
x.setAttribute("type", "text");
x.setAttribute("value", selectme.value);
li.appendChild(x);
ul.appendChild(li);
}
I'm working on a website that has a dynamic list in it and I want to be able to access individual elements in the list.
Is there a way to add a name to each element when using appendChild()?
This is my function:
function addOrder(theName, thePrice) {
var li = document.createElement("li");
var t = document.createTextNode(theName);
li.appendChild(t);
document.getElementById("cart").appendChild(li);
}
Do you mean adding a name or data to each element so you can access it at some later time in JS? If so you would want a data-attribute, which you set by using the dataset property.
function addOrder(theName, thePrice) {
var li = document.createElement("li");
// Add a data attribute with name of data-name and value of theName:
li.dataset.name = theName;
var t = document.createTextNode(theName);
li.appendChild(t);
document.getElementById("cart").appendChild(li);
}
In future code you can now look for a list item with a specific name by using something like this: document.querySelectorAll("[data-name='some name']"); or you could get all list items and filter them:
const listItems = document.querySelectorAll("#cart li");
const nameIWantToFind = 'some name';
const foundName = Array.from(listItems).filter(item => item.dataset.name === nameIWantToFind);
Also, as others have said, you don't need to use createTextNode. You can use textContent instead. Others have suggested innerHTML which will work, but isn't needed if you only plan to insert text, and textContent should have slightly better performance. Here is how you would rewrite the function:
function addOrder(theName, thePrice) {
// It's neater to put your DOM elements in variables at the top of the function
var cart = document.getElementById("cart");
var li = document.createElement("li");
// Add the text inside the `li` element:
li.textContent = theName;
// Add a data attribute with name of data-name and value of theName:
li.dataset.name = theName;
// Append the `li` element to the `#cart` using the variable we defined at the top of the function:
cart.appendChild(li);
}
Definitely!
Here you go:
== UPDATED with ES6 ==
function addOrder(theName, thePrice) {
// Select your `ul` element
const list = document.querySelector("#cart");
// Create `li` element
const li = document.createElement("li");
// Add your dynamic HTML to the `li`
li.innerHTML = theName;
// Append your `li` to your `ul`
list.appendChild(li);
}
Have any concerns? Feel free to comment!
I'm trying to add elements dynamically in an ul with ajax and my current code is this in ajax method:
var ul = document.getElementById("menu");
var li = document.createElement("li");
li.appendChild(document.createTextNode(array[i]));
ul.appendChild(li);
But it creates "standard" li elements, i want to create them in this type:
<li style="cursor:pointer;"><a onclick="javascript:$('#cod').val(array[i])">array[i]</a></li>
How can i do this?
[EDIT]
What i want to create is THIS (you can see that it appears a "shadow" that signify it is selectable
But jvascript creates this type of OPTIONS,
now you can see that the options doesn't got that "shadow".
How i understand content for this <%=IDAnag%> insert your back end. And when you click on link this content has already been generated. Maybe you can try something like that:
function AppendLi(val){
var ul = document.getElementById("menu");
var li = document.createElement("li");
li.innerHTML= val;
ul.appendChild(li);
}
<li style="cursor:pointer;">
<a onclick="AppendLi(this.textContent)">
<%=IDAnag%>
</a>
</li>
<ul id="menu"></ul>
But I do not know how you have built the your backend. maybe best way add this event on backend side?
I solved the problem by myself, if someone needed here is the code:
var ul = document.getElementById("menu");
var li = document.createElement("li");
$("li").each(function()
{
var $li = $(this);
$li.css("cursor","pointer");
});
var a = document.createElement("a");
var l = array[i];
a.textContent = array[i];
a.addEventListener("click",function(){
$("#cod").val(array[i]);
});
li.appendChild(a);
ul.appendChild(li);