So been trying to learn more javascript, by doing small projects that are simple but are starting stuff. One of the projects is a to-do app which for some people is really simple, but for me as a starter it's quite complex.
Now here is the thing, I had it working for the most part, I can add stuff, and one thing only HALF works, I wrote a bit that adds a X button to a li element. Now it works when I put the li element in the HTML page itself, but when it's added through javascript, it doesn't.
There is no error, it was working before but for some reason it.. broke.
<!DOCTYPE html>
<head>
<title>To Do App!</title>
<link rel="stylesheet" type="text/css" href="CSS/stylesheet.css">
</head>
<body>
<div id="h1Div">
<h1> To-do app! </h1>
<input type="text" id="inputForList">
<input type="button" id="btnInput" value="Add me!" onclick="btnFunction()">
</div>
<ul id="ulSection">
<li>Test 1</li>
<li>Test 2</li>
</ul>
<script src="Scripts/javascript.js"></script>
</body>
This is the HTML page, super simple.
//Adds li element with input from a textbox
function btnFunction(){
var cLi = document.createElement("li");
var inpList = document.getElementById("inputForList").value;
var txtNode = document.createTextNode(inpList);
cLi.appendChild(txtNode);
//Check to see if anything is filled in, otherwise send message. And 'appends' it to the list item
if(inpList === ''){
alert("Voeg wat toe!");
} else {
document.getElementById("ulSection").appendChild(cLi);
}
// Reset value of Textbox to ""
document.getElementById("inputForList").value = "";
}
//Sets a 'x' on every element.
var ulList = document.getElementsByTagName("li");
var i;
for(i = 0; i < ulList.length; i++){
var span = document.createElement("span");
var xBtn = document.createTextNode("\u00D7");
span.className = "Done";
span.appendChild(xBtn);
ulList[i].appendChild(span);
}
And this is the Javascript.
As stated, it worked before. But for some reason, now the bottom section, the X button (\u00D7) part, it sn't working on the 'new stuff' that I add through the text input..
Your code is good, you just need to do the same thing you did in
var ulList = document.getElementsByTagName("li");
var i;
for (i = 0; i < ulList.length; i++) {
var span = document.createElement("span");
var xBtn = document.createTextNode("\u00D7");
span.className = "Done";
span.appendChild(xBtn);
ulList[i].appendChild(span);
}
in btnFunction() (with the exception of the for loop, which isn't needed in the function, as only one element is added at a time). The reason for this is your code only runs when the page is loaded, or when it is specifically told to run (in your case, on a button click). if you just create an element the js doesn't know to update it with an x, you have to tell it to do so.
//Adds li element with input from a textbox
function btnFunction() {
var cLi = document.createElement("li");
var inpList = document.getElementById("inputForList").value;
var txtNode = document.createTextNode(inpList);
cLi.appendChild(txtNode);
//Check to see if anything is filled in, otherwise send message. And 'appends' it to the list item
if (inpList === '') {
alert("Voeg wat toe!");
} else {
document.getElementById("ulSection").appendChild(cLi);
var ulList = document.getElementsByTagName("li");
var span = document.createElement("span");
var xBtn = document.createTextNode("\u00D7");
span.className = "Done";
span.appendChild(xBtn);
ulList[ulList.length-1].appendChild(span);
}
// Reset value of Textbox to ""
document.getElementById("inputForList").value = "";
}
//Sets a 'x' on every element.
var ulList = document.getElementsByTagName("li");
var i;
for (i = 0; i < ulList.length; i++) {
var span = document.createElement("span");
var xBtn = document.createTextNode("\u00D7");
span.className = "Done";
span.appendChild(xBtn);
ulList[i].appendChild(span);
}
<!DOCTYPE html>
<head>
<title>To Do App!</title>
<link rel="stylesheet" type="text/css" href="CSS/stylesheet.css">
</head>
<body>
<div id="h1Div">
<h1> To-do app! </h1>
<input type="text" id="inputForList">
<input type="button" id="btnInput" value="Add me!" onclick="btnFunction()">
</div>
<ul id="ulSection">
<li>Test 1</li>
<li>Test 2</li>
</ul>
<script src="Scripts/javascript.js"></script>
</body>
Related
I have been working on learning JavaScript, and I have a piece of JavaScript which is supposed to open a hamburger menu on the top left of the page.
The thing is, the code works once, but for some reason the if{} statement is not working the second time:
let toggleNavStatus = false;
let toggleNav = function() {
let getSidebar = document.querySelector(".nav-sidebar");
let getSidebarUl = document.querySelector(".nav-sidebar ul");
let getSidebarTitle = document.querySelector(".nav-sidebar span");
let getSidebarLinks = document.querySelectorAll(".nav-sidebar a");
if (toggleNavStatus === false){
getSidebarUl.style.visibility = "visible";
getSidebar.style.width = "272px";
getSidebarTitle.style.opacity = "0.5";
let arrayLength = getSidebarLinks.length();
for(let i = 0; i < arrayLength; i++){
getSidebarLinks[i].style.opacity = "1";
}
toggleNavStatus = true;
}
else if (toggleNavStatus === true){
getSidebar.style.width = "50px";
getSidebarTitle.style.opacity = "0";
let arrayLength = getSidebarLinks.length();
for(let i = 0; i < arrayLength; i++){
getSidebarLinks[i].style.opacity = "0";
}
getSidebarUl.style.visibility = "hidden";
toggleNavStatus = false;
}
}
JavaScript Code
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html" />
<meta name="author" content="XeroXipher" />
<link rel="stylesheet" type="text/css" href="styles.css"/>
<title>End World</title>
</head>
<body>
<nav class="nav-main">
<div class="btn-toggle-main" onclick="toggleNav()"></div>
<ul>
<li>Home</a></li>
<li>Cities</li>
<li>Forums</li>
<li>Account Settings</li>
</ul>
</nav>
<aside>
<nav class="nav-sidebar">
<ul>
<li><span>Navigation</span></li>
<li>Cities</li>
<li>Forums</li>
<li>Account Settings</li>
<li>Logout</li>
</ul>
</nav>
</aside>
</body>
<script src="main.js"></script>
</html>
HTML Code
I have a good understanding on how if, else works and I cannot figure out what isn't working.
It seems to run the if(false) correctly but not run else if(true);"
I have a good understanding on how if, else works and I cannot figure out what isn't working.
It seems to run the if(false) correctly but not run else if(true);"
There is a bug if you take a look at the console when trying to get the length.
let arrayLength = getSidebarLinks.length();
just remove the parentheses after the 'length'
let arrayLength = getSidebarLinks.length;
let arrayLength = getSidebarLinks.length();
length is not a method. So, no need of function call.
On removing the parantheses, the click me toggles elements visible and invisible.
I hope this might helpful for your question. Instead of using if/else we can use javascript toggle. The thing your code not working was, one is tpe validation and elment will loss visiblity after first click.
let toggleNav = function() {
let getUl = document.querySelector(".toggle-ul");
getUl.classList.toggle("visible");
}
.btn-toggle-main{
cursor:pointer;
}
.toggle-ul{
display:none;
}
.toggle-ul.visible{
display:block;
}
<nav class="nav-main">
<div class="btn-toggle-main" onclick="toggleNav()">Click Me</div>
<ul class="toggle-ul visible">
<li>Home</a></li>
<li>Cities</li>
<li>Forums</li>
<li>Account Settings</li>
</ul>
</nav>
Try to replace
toggleNavStatus = true;
by
return true;
and
toggleNavStatus = false;
by
return false;
I'm not absolutely sure about it, but I guess as your function lacks a defined return value, it returns a standard value in the end that is assigned to toggleNavStatus, overwriting the value you set before.
Good evening guys. I am learning javascript. After learning some basics, I decided to make TODO LIST and got the todo list code from the internet. But I have a question on my mind. My code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<div>
<h2>ToDo</h2>
<input type="text" id="inputum" />
<button onclick="fonksiyonum()">Ekle</button>
</div>
<ul id="yeniUl"></ul>
<script>
function fonksiyonum() {
var liEkle = document.createElement('li');
var inputtaYazanlar = document.getElementById('inputum').value;
var textim = document.createTextNode(inputtaYazanlar);
liEkle.appendChild(textim);
document.getElementById('yeniUl').appendChild(liEkle);
document.getElementById('inputum').value = '';
var button = document.createElement('BUTTON');
var hiks = document.createTextNode('\u00D7');
button.appendChild(hiks);
liEkle.appendChild(button);
button.className = 'close';
var close = document.getElementsByClassName('close');
for (i = 0; i < close.length; i++) {
close[i].onclick = function () {
var div = this.parentElement;
div.style.display = 'none';
};
}
}
</script>
</body>
</html>
As I understand it, for (i = 0; i < close.length; i++) is used to get the button.close[i].onclick = function () shows the function that will run when the button is pressed. But why close[i] what does the letter 'i' mean here? After that there is var div = this.parentElement. I don't understand this.parentElement. I would be happy if someone could explain the concept of parent element to me.
close.length is actually List/Array of all the Buttons. You can tell by the Elements in getElementsByClassName.
So you are looping through all the Close Buttons and adding an onclick() method to each.
list = [btn0, btn1]
list.length // length = 2
// for i=0; i<list.length; i++
// 1st pass, i == 0:
list[0] // btn0
// 2st pass, i == 1:
list[1] // btn1
// 3rd pass, i == 2
// i is not less than length, 2, end.
For the parentElement I always look at the tabs, Just go 1 left tab over and up; that's the parent! That's why formatting is important, to make this easy!
<div> <!-- <- Parent -->
<h2>ToDo</h2>
<input type="text" id="inputum" />
<button onclick="fonksiyonum()">Ekle</button> <!-- <- Button --->
</div>
Firstly I know I can make things a lot easier by creating the ul in HTML. I'm not supposed to be doing that.
My HTML:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body id="body">
<form id="form" >
<input id="userInput" placeholder="Enter your list item here">
<button type="button" onclick="inputFunction()">Add</button>
</form>
<script src="A4.js"></script>
</body>
</html>
My Javascript so far:
// Creating Array
var listData = ["Crab","Lobster","Scallops"];
// Creating initial List
function listFunction(){
var ul = document.createElement("ul");
ul.id = 'ulId';
document.getElementById('body').appendChild(ul);
listData.forEach(liFunction);
function liFunction(element){
var li = document.createElement('li');
ul.appendChild(li);
li.innerHTML+=element;
}
}
listFunction();
// Adding user input to the list
function inputFunction() {
var input = document.getElementById("userInput").value;
listData.push(input);
var newLi = document.createElement("li");
document.getElementById('ulId').appendChild(newLi);
newLi.innerHTML=input;
}
var liImg = document.getElementsByTagName('li');
for (var i = 0; i < liImg.length; i++) {
liImg[i].addEventListener('mouseover', handlerFunction, false);
}
function handlerFunction(e) {
var img = document.createElement("img");
img.setAttribute("src","https://cdn1.iconfinder.com/data/icons/nuove/128x128/actions/fileclose.png");
img.setAttribute("height","10");
img.setAttribute("width", "10");
document.getElementsByTagName('li').innerHTML += "img";
}
So what I'm supposed to be doing is first create a list using the listData array, and displaying it on the page. Then I take the user input and add it to the list. This part is working fine
The part I am stuck on is having to create/display an image next to each list item when it is mouseover'ed. Then having to delete that specific list item if the image is clicked. I've created the eventListener, but the img part doesn't seem to be working.
The problem is when you're appending the image to the li element.
Solution:
e.target.appendChild(img);
// Creating Array
var listData = ["Crab", "Lobster", "Scallops"];
// Creating initial List
function listFunction() {
var ul = document.createElement("ul");
ul.id = 'ulId';
document.getElementById('body').appendChild(ul);
listData.forEach(liFunction);
function liFunction(element) {
var li = document.createElement('li');
ul.appendChild(li);
li.innerHTML += element;
}
}
listFunction();
// Adding user input to the list
function inputFunction() {
var input = document.getElementById("userInput").value;
listData.push(input);
var newLi = document.createElement("li");
document.getElementById('ulId').appendChild(newLi);
newLi.innerHTML = input;
}
var liImg = document.getElementsByTagName('li');
for (var i = 0; i < liImg.length; i++) {
liImg[i].addEventListener('mouseover', handlerFunction);
}
function handlerFunction(e) {
var img = document.createElement("img");
img.setAttribute("src", "https://cdn1.iconfinder.com/data/icons/nuove/128x128/actions/fileclose.png");
img.setAttribute("height", "10");
img.setAttribute("width", "10");
e.target.appendChild(img);
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body id="body">
<form id="form">
<input id="userInput" placeholder="Enter your list item here">
<button type="button" onclick="inputFunction()">Add</button>
</form>
<script src="A4.js"></script>
</body>
</html>
Hope this helps!
img is not string, it is a variable, so remove the surrounding double quotes from that. Since img is a node element, instead of using innerHTML you should use appendChild(). You also should use the e.target to refer the specific li element:
Change:
document.getElementsByTagName('li').innerHTML += "img";
To
e.target.appendChild(img);
I will suggest you to use mouseenter instead of mousemove. I think you need to attach the mouseleave event as well. You also have to attach the events to the newly created li elements.
Try the following way:
// Creating Array
var listData = ["Crab","Lobster","Scallops"];
// Creating initial List
function listFunction(){
var ul = document.createElement("ul");
ul.id = 'ulId';
document.getElementById('body').appendChild(ul);
listData.forEach(liFunction);
function liFunction(element){
var li = document.createElement('li');
ul.appendChild(li);
li.innerHTML+=element;
}
}
listFunction();
// Adding user input to the list
function inputFunction() {
var input = document.getElementById("userInput").value;
listData.push(input);
var newLi = document.createElement("li");
newLi.addEventListener('mouseenter', handlerFunction, false);
newLi.addEventListener('mouseleave', removeImage, false);
document.getElementById('ulId').appendChild(newLi);
newLi.insertAdjacentHTML('beforeend', input);
}
var liImg = document.getElementsByTagName('li');
for (let i = 0; i < liImg.length; i++) {
liImg[i].addEventListener('mouseenter', handlerFunction, false);
liImg[i].addEventListener('mouseleave', removeImage, false);
}
function handlerFunction(e) {
var img = document.createElement("img");
img.setAttribute("src","https://cdn1.iconfinder.com/data/icons/nuove/128x128/actions/fileclose.png");
img.setAttribute("height","30");
img.setAttribute("width", "30");
img.addEventListener('click', function(){
this.closest('li').remove();
});
e.target.appendChild(img);
}
function removeImage(e){
e.target.querySelector('img').remove();
}
<body id="body">
<form id="form" >
<input id="userInput" placeholder="Enter your list item here">
<button type="button" onclick="inputFunction()">Add</button>
</form>
<script src="A4.js"></script>
</body>
I'm trying to build a simple todo list. I would like to add a (x) to each item in the list. The list has two existing items, and the rest will be added from user input.
My current code can only add (x) to existing items. I followed the following tutorial, but i think the way it adds (x) to both existing items and new input items are redundant. (note it basically uses "var span = document.createElement("SPAN"); ..." twice.
Is there a way that I can append the (x) in the end to all li items in the document?
// Create a "close" button and append it to each list item
var allListItems = document.getElementsByTagName("li");
function appendClose(x){
var close = document.createElement("span");
var text = document.createTextNode("(\u00D7)");
close.appendChild(text);
return x.appendChild(close);
}
// Turn object into array.
const peopleArray = Object.keys(allListItems).map(i => allListItems[i]);
console.log(peopleArray);
peopleArray.map(appendClose);
// Create new list item after button click.
function createNewElement(){
var li = document.createElement("li"); // create <li>
var v_userInput = document.getElementById("myInput");
var content = document.createTextNode(v_userInput.value);
li.appendChild(content);
document.getElementById("myUL").appendChild(li);
document.getElementById("myInput").value = ""; //fresh the input box;
};
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Work to-do</title>
</head>
<body>
<h1> Work to-do </h1>
<div id="myDiv">
<input id="myInput" type="text" placeholder="New item..." maxlength="27">
<button id="enter" onclick="createNewElement()">Add</button>
</div>
<ul id="myUL">
<li>Gym</li>
<li>Food</li>
</ul>
</body>
<script type="text/javascript" src="7_todo.js"></script>
</html>
You just have to write one more line inside createNewElement() to do that:
appendClose(li);
Further, you should also prevent empty values being appended to todo-list by checking the length of input value. I've added an example of that.
// Create a "close" button and append it to each list item
var allListItems = document.getElementsByTagName("li");
function appendClose(x){
var close = document.createElement("span");
var text = document.createTextNode("(\u00D7)");
close.appendChild(text);
return x.appendChild(close);
}
// Turn object into array.
const peopleArray = Object.keys(allListItems).map(i => allListItems[i]);
// console.log(peopleArray);
peopleArray.map(appendClose);
// Create new list item after button click.
function createNewElement(){
var li = document.createElement("li"); // create <li>
var v_userInput = document.getElementById("myInput");
// Prevents empty task in todo list
if(v_userInput.value.length === 0) {
alert('Enter something!');
return ;
}
var content = document.createTextNode(v_userInput.value);
li.appendChild(content);
appendClose(li); // Edited here
document.getElementById("myUL").appendChild(li);
document.getElementById("myInput").value = ""; //fresh the input box;
};
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Work to-do</title>
</head>
<body>
<h1> Work to-do </h1>
<div id="myDiv">
<input id="myInput" type="text" placeholder="New item..." maxlength="27">
<button id="enter" onclick="createNewElement()">Add</button>
</div>
<ul id="myUL">
<li>Gym</li>
<li>Food</li>
</ul>
</body>
<script type="text/javascript" src="7_todo.js"></script>
</html>
I'm trying to dynamically set the content of a popup.
Here is a first HTML page where everything is defined statically :
<html>
<head>
<meta charset='utf-8'>
<link href='css/font-awesome.css' rel='stylesheet'>
<link href='css/myStyle.css' rel='stylesheet'>
</head>
<body>
<div id="data">
<ul class='links-list'>
<li><a target='_blank' href='siteURL'><i class='myButton'>TEXT</i></a></li>
<li><a target='_blank' href='twitterURL'><i class='myButton'>TEXT</i></a></li>
</ul>
</div>
</body>
</html>
Now I need to dynamically set my buttons, so I've removed everything which will be dynamically created :
<html>
<head>
<meta charset='utf-8'>
<link href='css/font-awesome.css' rel='stylesheet'>
<link href='css/myStyle.css' rel='stylesheet'>
</head>
<body>
<div id="data">
</div>
<script type="text/javascript" src="script.js">
</script>
</body>
</html>
My content script "script.js" receive data (array of links) and have to create buttons in my HTML document :
self.port.on("liste", function(list)
{
var div = document.getElementById('data'); // Get <div id="data">
var ul = document.createElement('ul'); // Create <ul class='links-list'>
ul.class = 'links-list';
for (var i = 0; i < list.links.length; ++i)
{
var site = list.links[i];
var li = document.createElement('li'); // Create <li>
var link = document.createElement('a'); // Create <a>
var button = document.createElement('i'); // Create <i>
button.class = "myButton";
link.text = site.text;
link.href = site.url;
link.target = '_blank';
link.appendChild(button);
li.appendChild(link);
ul.appendChild(li);
}
div.appendChild(ul);
});
Issue is links created dynamically aren't using "myStyle.css", here is a comparaison :
Static vs dynamic load :
Could anyone help me resolving this? Thank you.
The correct way to give an item a class using javascript is - unintuitively enough - className, or setAttribute. So either of these will add the correct class:
button.className = 'myButton'
button.setAttribute('class', 'myButton')
Using just .class does not work in Javascript:
document.getElementById('a1').class = 'aClass';
document.getElementById('a2').className = 'aClass';
document.getElementById('a3').setAttribute('class', 'aClass');
.aClass { color: red; }
<pre id="a1">.class</pre>
<pre id="a2">.className</pre>
<pre id="a3">.setAttribute</pre>
Looks to me like the comment from CBroe is the answer. In your javascript you're putting the text into the link instead of your button. That means that the button will essentially be invisible. That's why it looks different from your hard-coded example. Try this javascript instead.
var div = document.getElementById('data'); // Get <div id="data">
var ul = document.createElement('ul'); // Create <ul class='links-list'>
ul.className = 'links-list';
for (var i = 0; i < 4; ++i){
var url = i;
var li = document.createElement('li'); // Create <li>
var link = document.createElement('a'); // Create <a>
var button = document.createElement('i'); // Create <i>
button.className = "myButton";
button.innerHTML = 'text'+i;
link.text = "ab ";
link.href = url;
link.target = '_blank';
link.appendChild(button);
li.appendChild(link);
ul.appendChild(li);
}
div.appendChild(ul);