Passing argument to function doesn't get recognized by function

Passing argument to function doesn't get recognized by function - javascript

I built a list using javascript and add an eventlistener to each li element like this
for (var i = (page - 1) * records_per_page; i < (page * records_per_page); i++) {
var li = document.createElement('li');
li.id= "lijst";
li.className="lijst";
var p = document.createElement('p');
p.className = "name"
p.id = "Naam"
p.innerHTML = obj.Name[i];
li.appendChild(p);
var p = document.createElement('p');
p.className = "adres";
p.id = "Adres"
p.innerHTML = obj.Adres[i];
li.appendChild(p);
var p = document.createElement('p');
p.className = "gsm";
p.id = "GSM"
p.innerHTML = obj.GSM[i];
li.appendChild(p);
myUL.appendChild(li);
}
const element = document.querySelectorAll(".lijst");
element.forEach(function(el){
el.addEventListener('click',function(){
fillDiv(el);
})
});
When I call my function it doesn't recognize the argument I pass to the function.
function fillDiv(el){
FicheNaam = document.getElementById("FicheNaam");
FicheGSM = document.getElementById("FicheGSM");
FicheAdres = document.getElementById("FicheAdres");
FicheNaam.innerHTML = el.querySelector('.naam').textContent;
FicheGSM.innerHTML = el.querySelector('.gsm').textContent;
FicheAdres.innerHTML = el.querySelector('.adres').textContent;
}
function fillDiv(el){
FicheNaam = document.getElementById("FicheNaam");
FicheGSM = document.getElementById("FicheGSM");
FicheAdres = document.getElementById("FicheAdres");
FicheNaam.innerHTML = el.querySelector('.naam').textContent;
FicheGSM.innerHTML = el.querySelector('.gsm').textContent;
FicheAdres.innerHTML = el.querySelector('.adres').textContent;
}
var current_page = 1;
var records_per_page = 2;
var obj = {
Name: ["John","Peter","Ben","Jonathan"],
GSM: ["123","456","789","444"],
Adres: ["Adress1","Adress2","Adress3","Adress4"],
};
function changePage(page){
var btn_next = document.getElementById("btn_next");
var btn_prev = document.getElementById("btn_prev");
var listing_table = document.getElementById("myUL");
var page_span = document.getElementById("page");
if (page < 1) page = 1;
if (page > numPages(obj)) page = numPages(obj);
listing_table.innerHTML = "";
for (var i = (page - 1) * records_per_page; i < (page * records_per_page); i++) {
var li = document.createElement('li');
li.id= "lijst";
li.className="lijst";
var p = document.createElement('p');
p.className = "name"
p.id = "Naam"
p.innerHTML = obj.Name[i];
li.appendChild(p);
var p = document.createElement('p');
p.className = "adres";
p.id = "Adres"
p.innerHTML = obj.Adres[i];
li.appendChild(p);
var p = document.createElement('p');
p.className = "gsm";
p.id = "GSM"
p.innerHTML = obj.GSM[i];
li.appendChild(p);
myUL.appendChild(li);
}
const element = document.querySelectorAll(".lijst");
element.forEach(function(el){
el.addEventListener('click',function(){
fillDiv(el);
})
});
page_span.innerHTML = page +"/"+numPages(obj);
}
function prevPage(){
if (current_page > 1) {
current_page--;
changePage(current_page);
}
}
function nextPage()
{
if (current_page < numPages(obj)) {
current_page++;
changePage(current_page);
}
}
function numPages(obj)
{
return Math.ceil(obj.Name.length / records_per_page);
}
window.onload = function() {
changePage(1);
};
#filldiv{
background-color:grey;
float:right;
}
<div id="filldiv">
<p id="FicheNaam">Name</p>
<p id="FicheGSM">GSM</p>
<p id="FicheAdres">Address</p>
</div>
<a onclick="prevPage()" class="previous" id="btn_prev" aria-label="Previous">
<span aria-hidden="true">«</span></a>
<a class="next" onclick="nextPage()" id="btn_next" aria-label="Next">
<span id="page"></span>
<span aria-hidden="true">»</span> </a>
<ul id="myUL">
</ul>
Included a jsfiddle https://jsfiddle.net/h3o2Lbe8/ and snippet of my code.
I need to fill the div on the right with the information within each li.

Heres the fix:
function fillDiv(el) {
FicheNaam = document.getElementById("FicheNaam");
FicheGSM = document.getElementById("FicheGSM");
FicheAdres = document.getElementById("FicheAdres");
FicheNaam.innerHTML = el.querySelector('.name').textContent;
FicheGSM.innerHTML = el.querySelector('.gsm').textContent;
FicheAdres.innerHTML = el.querySelector('.adres').textContent;
}
Explanation:
The code is fine except for a naming issue.
In the function changePage() you used the classname 'name'
And in the fillDiv function you tried to use classname 'naam' in the query selector
FicheNaam.innerHTML = el.querySelector('.naam').textContent;
An exception occured in the funciton because el.querySelector('.naam') returns undefined and you tried to access .textContent property.
Exception in console
Screenshot of your code working

Related

container.appendChild is not a function

var refreshBtn = document.getElementsByClassName("refresh-button");
var container = document.getElementsByClassName("container");
const maxpalate = 32;
function RefreshFunction() {
for (let i = 0; i < maxpalate; i++) {
let randomhex = Math.floor(Math.random() * 0xffffffff).toString(16);
randomhex = `#${randomhex.padStart(6, "0")}`;
const color = document.createElement("li");
color.classList.add = "color";
color.innerHTML = `<div class="rect-box" style="background: ${randomhex}"></div>
<span class="hex-value">${randomhex}</span>`;
container.appendChild(color);
}
}
I am not getting the solution,please tell me the Solution of this

getElementsByClassName returns multiple elements. You need to use container[0] instead of container.
Call appendChild method instead of appandChild.

First of all, it is not appandChild it is appendChild.
Second "getElementsByClassName" returns an array but the "container" is a single element so you need to use a single element instead.
var container = document.getElementsByClassName("container");
const maxpalate = 2;
function RefreshFunction() {
debugger
for (let i = 0; i < maxpalate; i++) {
let randomhex = Math.floor(Math.random() * 0xffffffff).toString(16);
randomhex = `#${randomhex.padStart(6, "0")}`;
const color = document.createElement("li");
color.classList.add = "color";
color.innerHTML = `<div class="rect-box" style="background: ${randomhex}"></div>
<span class="hex-value">${randomhex}</span>`;
container[0].appendChild(color);
}
}
RefreshFunction()

Autosize textarea height based on content

I'm trying to create a textarea with some content inside and i need the height to be based on the content size.
cargarClases() {
var containerGeneral = document.querySelector(".bimContainer").querySelector(".containerInfo--list").querySelector("nav").querySelector("ul");
for (let i = 0; i < 15; i++) {
var li = document.createElement('li');
li.classList.add("classDesplegable");
containerGeneral.appendChild(li);
var image1 = document.createElement('img');
image1.src = '../view/manageproject/img/FlechaBim.svg';
li.appendChild(image1);
var p = document.createElement('p');
p.innerHTML = "Nombre de la clase";
li.appendChild(p);
var ul = document.createElement('ul');
ul.classList.add("dNone");
containerGeneral.appendChild(ul);
for (let j = 0; j < 4; j++) {
var li1 = document.createElement('li');
ul.appendChild(li1);
var p = document.createElement('p');
p.innerHTML = "Nombre de la c...";
p.classList.add("textClass");
li1.appendChild(p);
var p2 = document.createElement('p');
p2.innerHTML = "Nombre de la c...";
p2.classList.add("textClass2");
li1.appendChild(p2);
var textarea = document.createElement("textarea");
function updateHeight(el) {
el.style.height = '';
el.style.height = el.scrollHeight + 'px';
}
updateHeight(textarea);
textarea.addEventListener('input', () => updateHeight(textarea));
textarea.maxLength = "44"
textarea.innerHTML = "P1D30Tr0M0sC0WMul3P1D30Tr0M0sC0WMul3";
if (i % 2 == 0) {
//input.disabled = "true"; togliere commento quando sapremo quali classi possano essere editate e quali no
textarea.classList.add("textArea");
textarea.classList.add("line-clamp");
} else {
textarea.classList.add("textArea");
}
li1.appendChild(textarea);
var check = document.createElement('input');
check.type = 'checkbox';
check.classList.add("inputCheck2");
li1.appendChild(check);
}
}
}
This is what i've found on internet but it doesn't work. The height output is always 0px.
Any help is appreciated because i'm going crazy.
Have a nice day!
Edited so maybe it's easier to understand the problem

Javascript: Editing a list item

I have made a to do list using vanilla JS , each list item has a delete and an edit option , delete works fine, but when I am editing a list item it is not editing the line item on which i use the edit option rather it updates the last added list item
HTML:
<div id="wrapper">
<div id="inputWrapper">
<input type="text" name="" id="listDetail"
placeholder="What's the task about" autofocus>
<button id="addBtn">Add</button>
</div>
<ul id="ul"></ul>
JS:
var listDetail = document.getElementById("listDetail");
var addBtn = document.getElementById("addBtn");
var ul = document.getElementById("ul");
addBtn.onclick = function () {
if (listDetail.value !== "") {
var li = document.createElement("LI");
ul.appendChild(li);
}
else {
alert("List item cannot be empty");
}
var entry = document.createElement("SPAN");
var entryText = document.createTextNode(listDetail.value);
entry.className = "userEntry";
entry.appendChild(entryText);
li.appendChild(entry);
var span = document.createElement("SPAN");
var spanText = document.createTextNode("\u00D7");
span.className = "close";
span.appendChild(spanText);
li.appendChild(span);
var close = document.getElementsByClassName("close");
for (var i = 0; i < close.length; i++) {
close[i].onclick = function () {
this.parentElement.style.display = "none";
}
}
var edit = document.createElement("SPAN");
var eText = document.createTextNode("\u270E");
edit.className = "edit";
edit.appendChild(eText);
li.appendChild(edit);
var editC = document.getElementsByClassName("edit");
for (var e = 0; e < editC.length; e++) {
editC[e].onclick = function () {
var p = prompt("Edit your entry");
entry.innerText = p;
}
}
var liTag = document.getElementsByTagName("LI");
for (var j = 0; j < liTag.length; j++) {
liTag[j].onclick = function () {
this.classList.toggle("checked");
}
}
listDetail.value = "";
}
How do I ensure it updates the right line item?

Here lies your problem:
var entry = document.createElement("SPAN"); // <<<
...
for (var e = 0; e < editC.length; e++) {
editC[e].onclick = function () {
var p = prompt("Edit your entry");
entry.innerText = p; // <<< you are modifying the entry that you've just created
}
}
I don't see a need for a for loop.
var listDetail = document.getElementById("listDetail");
var addBtn = document.getElementById("addBtn");
var ul = document.getElementById("ul");
addBtn.onclick = function () {
if (listDetail.value !== "") {
var li = document.createElement("LI");
ul.appendChild(li);
}
else {
alert("List item cannot be empty");
}
var entry = document.createElement("SPAN");
var entryText = document.createTextNode(listDetail.value);
entry.className = "userEntry";
entry.appendChild(entryText);
li.appendChild(entry);
var close = document.createElement("SPAN");
var cText = document.createTextNode("\u00D7");
close.className = "close";
close.appendChild(cText);
li.appendChild(close);
close.onclick = function () {
this.parentElement.style.display = "none";
}
var edit = document.createElement("SPAN");
var eText = document.createTextNode("\u270E");
edit.className = "edit";
edit.appendChild(eText);
li.appendChild(edit);
edit.onclick = function () {
var p = prompt("Edit your entry");
var entry = this.parentElement.getElementsByClassName("userEntry")[0]; // get sibling userEntry element
entry.innerText = p;
}
li.onclick = function () {
this.classList.toggle("checked");
}
listDetail.value = "";
}
<body>
<div id="wrapper">
<div id="inputWrapper">
<input type="text" name="" id="listDetail" placeholder="What's the task about" autofocus>
<button id="addBtn">Add</button>
</div>
<ul id="ul"></ul>

You have to create an ID for each specific tag, and when the user edits it uses that rather than the class.
var listDetail = document.getElementById("listDetail");
var addBtn = document.getElementById("addBtn");
var ul = document.getElementById("ul");
var cnt = 0
addBtn.onclick = function() {
if (listDetail.value !== "") {
var li = document.createElement("LI");
ul.appendChild(li);
} else {
alert("List item cannot be empty");
}
var entry = document.createElement("SPAN");
var entryText = document.createTextNode(listDetail.value);
entry.className = "userEntry";
entry.setAttribute("id", "entry" + cnt);
entry.appendChild(entryText);
li.appendChild(entry);
var span = document.createElement("SPAN");
var spanText = document.createTextNode("\u00D7");
span.className = "close";
span.appendChild(spanText);
li.appendChild(span);
var close = document.getElementsByClassName("close");
for (var i = 0; i < close.length; i++) {
close[i].onclick = function() {
this.parentElement.style.display = "none";
}
}
var edit = document.createElement("SPAN");
var eText = document.createTextNode("\u270E");
edit.className = "edit";
edit.setAttribute("id", "edit" + cnt);
edit.appendChild(eText);
li.appendChild(edit);
var editC = document.getElementById("edit" + cnt);
editC.onclick = function() {
var p = prompt("Edit your entry");
var obj = document.getElementById("entry" + cnt);
obj.innerText = p;
}
var liTag = document.getElementsByTagName("LI");
for (var j = 0; j < liTag.length; j++) {
liTag[j].onclick = function() {
this.classList.toggle("checked");
}
}
listDetail.value = "";
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vquery/5.0.1/v.min.js"></script>
<div id="wrapper">
<div id="inputWrapper">
<input type="text" name="" id="listDetail" placeholder="What's the task about" autofocus>
<button id="addBtn">Add</button>
</div>
<ul id="ul"></ul>

Created Element in function not appending to DOM

I am having some issues figuring out why my created Element won't append to the DOM within my function.
let startText = document.querySelector('.text-container').innerHTML = "Lets Start.";
let lvlTitle = document.querySelector('.text-container');
let background = document.querySelector('.full-page');
lvlTitle.addEventListener('click', countChangeBackground);
var clicks = 0;
function countChangeBackground() {
clicks += 1;
var message = "";
if (clicks == 1) {
message = "Test";
background.style.backgroundColor = "#f81884";
lvlTitle.style.color = "#f2eee2";
} else if (clicks == 2) {
message = "Test2";
background.style.backgroundColor = "#f5ce28";
lvlTitle.style.color = "black";
} else if (clicks == 3) {
message = "Add Li to ul";
var ul = document.querySelector('.text-container');
var li = document.createElement('li');
li.className = 'text-content';
li.appendChild(document.createTextNode('New Text'));
ul.appendChild(li);
console.log(li);
} else {
message = startText;
background.style.backgroundColor = "#f2eee2";
lvlTitle.style.color = "black";
}
lvlTitle.innerHTML = message;
};
<div class="full-page">
<div class="click-container">
<ul class="text-container">
</ul>
</div>
</div>
And here is a jsfiddle:
Append Li to DOM

This is the line causing you problems:
lvlTitle.innerHTML = message;
When you set the innerHTML, if there are other nodes inside of that element, they are overwritten.
You need to alter your logic to only set the innerHTML in some cases.
I've updated your jsfiddle here: http://jsfiddle.net/jepoqd01/

You are overwriting the entire container with innerHTML and not reaching the correct content text
See solution add new variable lvlContainer with get the .text-container and lvlText get the .text-content
let startText = document.querySelector('.text-content').innerHTML = "Lets Start.";
let lvlTitle = document.querySelector('.text-content');
let lvlContainer = document.querySelector('.text-container');
let background = document.querySelector('.full-page');
lvlTitle.addEventListener('click', countChangeBackground);
var clicks = 0;
function countChangeBackground() {
clicks += 1;
var message = "";
if (clicks == 1) {
message = "Test";
background.style.backgroundColor = "#f81884";
lvlContainer.style.color = "#f2eee2";
} else if (clicks == 2) {
message = "Test2";
background.style.backgroundColor = "#f5ce28";
lvlContainer.style.color = "black";
} else if (clicks == 3) {
message = "Add Li to ul";
var ul = document.querySelector('.text-container');
var li = document.createElement('li');
li.className = 'text-content';
li.appendChild(document.createTextNode('New Text'));
ul.appendChild(li);
console.log(li);
} else {
message = startText;
background.style.backgroundColor = "#f2eee2";
lvlContainer.style.color = "black";
}
lvlTitle.innerHTML = message;
};
is in jsfiddle: http://jsfiddle.net/lucaslimax/7jx194gp/37

onmouseover show only one submenu ( Javascript )

Good day,
trying to make a small menu only with Javascript and got a problem that onmouseover event shows all submenus and not only one.
this is the part of the code that suppose to change style.display to block.
var ul = document.getElementById("navMainId"),
var liDropdown = ul.getElementsByClassName("dropdown");
for (var i = 0; i < liDropdown.length; i++) {
liDropdown[i].style.display = "inline-block";
liDropdown[i].onmouseover = function () {
var ul = document.getElementById("navMainId"),
dropdown = ul.getElementsByClassName("dropdown-content");
for (var i = 0; i < dropdown.length; i++) {
dropdown[i].style.display = "block";
}
}
liDropdown[i].onmouseleave = function () {
var ul = document.getElementById("navMainId"),
dropdown = ul.getElementsByClassName("dropdown-content");
for (var i = 0; i < dropdown.length; i++) {
dropdown[i].style.display = "none";
}
}
}
How can i change the code to make it work ?
here is whole code on Fiddle ( ssry it is a mess ) : https://jsfiddle.net/apvsnzt5/1/

I've updated the fiddle:
https://jsfiddle.net/apvsnzt5/3/
All you needed to do was change
dropdown = ul.getElementsByClassName("dropdown-content");
to
dropdown = this.getElementsByClassName("dropdown-content");
So that it targets the "this" (being the LI you are hovered over) rather than finding the "dropdown-content" inside the UL.
Also do it on the onmouseleave.

Seems you have incorrect reference to container when mouser over. You need concrete content based on your mosue position.
var dropdown = this.getElementsByClassName("dropdown-content");
try updated fiddle

add the following to your css part
.dropdown-content{
display:none ! important;
}
a:hover+.dropdown-content{
display:block ! important;
}
it will works fine.
var menuCont = document.createElement("div");
document.body.appendChild(menuCont);
var ulMain = document.createElement("ul");
menuCont.appendChild(ulMain);
ulMain.className = "navMain";
ulMain.id = "navMainId";
/****** MENU ******/
// Software
var liSoftware = document.createElement("li");
liSoftware.className = "menu dropdown";
ulMain.appendChild(liSoftware);
var aSoftware = document.createElement("a");
aSoftware.className = "menuName dropbtn";
aSoftware.href = "#";
aSoftware.textContent = "Test1";
liSoftware.appendChild(aSoftware);
// GeCoSoft
var liGeco = document.createElement("li");
liGeco.className = "menu dropdown";
ulMain.appendChild(liGeco);
var aGeco = document.createElement("a");
aGeco.className = "menuName dropbtn";
aGeco.href = "#";
aGeco.textContent = "Test2";
liGeco.appendChild(aGeco);
/******* Submenu *******/
// Software Sub
var divSubSoft = document.createElement("div");
divSubSoft.className = "dropdown-content";
liSoftware.appendChild(divSubSoft);
var aSub1 = document.createElement("a"),
aSub2 = document.createElement("a");
aSub1.className = "menuSubName";
aSub1.textContent = "SubMenu1";
aSub1.href = "#";
aSub2.className = "menuSubName";
aSub2.textContent = "SubMenu2";
aSub2.href = "#";
divSubSoft.appendChild(aSub1);
divSubSoft.appendChild(aSub2);
// Gecosoft Sub
var divSubGeco = document.createElement("div");
divSubGeco.className = "dropdown-content";
liGeco.appendChild(divSubGeco);
var aSub3 = document.createElement("a"),
aSub4 = document.createElement("a");
aSub3.className = "menuSubName";
aSub3.textContent = "Submenu3";
aSub3.href = "#";
aSub4.className = "menuSubName";
aSub4.textContent = "SubMenu4"
aSub4.href = "#";
divSubGeco.appendChild(aSub3);
divSubGeco.appendChild(aSub4);
/****** MENU STYLE ******/
var i = "";
ulMain.style.listStyleType = "none";
ulMain.style.margin = "0px";
ulMain.style.padding = "0px";
ulMain.style.overflow = "hidden";
ulMain.style.backgroundColor = "rgb(232, 225, 225)";
var ul = document.getElementById("navMainId"),
li = ul.getElementsByTagName("li");
for (var i = 0; i < li.length; i++) {
li[i].style.cssFloat = "left";
}
var a = ul.getElementsByTagName("a");
for (var i = 0; i < a.length; i++) {
a[i].style.display = "inline-block";
a[i].style.color = "black";
a[i].style.textAlign = "center";
a[i].style.padding = "14px 16px";
a[i].style.textDecoration = "none";
a[i].onmouseover = function () {
this.style.backgroundColor = "rgb(174, 170, 170)";
}
a[i].onmouseleave = function () {
this.style.backgroundColor = "rgb(232, 225, 225)";
}
}
/************ Dont know what to do here **************/
var liDropdown = ul.getElementsByClassName("dropdown");
for (var i = 0; i < liDropdown.length; i++) {
liDropdown[i].style.display = "inline-block";
liDropdown[i].onmouseover = function () {
var ul = document.getElementById("navMainId"),
dropdown = ul.getElementsByClassName("dropdown-content");
for (var i = 0; i < dropdown.length; i++) {
dropdown[i].style.display = "block";
}
}
liDropdown[i].onmouseleave = function () {
var ul = document.getElementById("navMainId"),
dropdown = ul.getElementsByClassName("dropdown-content");
for (var i = 0; i < dropdown.length; i++) {
dropdown[i].style.display = "none";
}
}
}
var divDropCont = ul.getElementsByClassName("dropdown-content");
for (var i = 0; i < divDropCont.length; i++) {
divDropCont[i].style.display = "none";
divDropCont[i].style.position = "absolute";
divDropCont[i].style.backgroundColor = "#f9f9f9";
divDropCont[i].style.minWidth = "160px";
divDropCont[i].style.boxShadow = "0px 8px 16px 0px rgba(0,0,0,0.2)";
}
var aDropCont = ul.getElementsByClassName("menuSubName");
for (var i = 0; i < aDropCont.length; i++) {
aDropCont[i].style.color = "black";
aDropCont[i].style.padding = "12px 16px";
aDropCont[i].style.textDecoration = "none";
aDropCont[i].style.display = "block";
aDropCont[i].style.textAlign = "left";
aDropCont[i].onmouseover = function () {
this.style.backgroundColor = "rgb(174, 170, 170)";
}
aDropCont[i].onmouseleave = function () {
this.style.backgroundColor = "rgb(249, 249, 249)";
}
}
.dropdown-content{
display:none ! important;
}
a:hover+.dropdown-content{
display:block ! important;
}

We Keep Coding

JavaScript is the programming language of the Web.

Passing argument to function doesn't get recognized by function - javascript

Related

container.appendChild is not a function

Autosize textarea height based on content

Javascript: Editing a list item

Created Element in function not appending to DOM

onmouseover show only one submenu ( Javascript )

Categories

Resources