there are a bug on IE 11 when i empty the html in a DIV and I remove class in the list with JavaScriptS.
The DIV loses the syle CSS "Overflow:auto" and guard is a great height
There is no bug on another navigator.
Sample:
<!DOCTYPE html>
<html>
<head>
<title>CSS</title>
<style>
div {
margin: 5px;
}
ul {
margin: 5px;
max-height: 200px;
overflow: auto;
}
ul li.selected {
font-weight: bold;
}
.dest {
width: 500px;
min-height: 21px;
max-height: 120px;
overflow: auto;
border: 1px solid #ccc;
background-color: #f9f9f0;
padding: 3px;
}
.dest span {
display: block;
background-color: #fff;
float: left;
border-radius: 2px;
border: 1px solid #ccc;
margin: 2px;
padding: 0px 2px 0px 2px;
line-height: 21px;
height: auto;
}
</style>
<script>
window.onload = function(){
document.getElementById("btclear").onclick = function(){
document.getElementById("dest").innerHTML = "";
};
document.getElementById("btclearplus").onclick = function(){
document.getElementById("dest").innerHTML = "";
var ul = document.getElementById("list");
var lis = ul.getElementsByTagName("li");
for (var i = 0; i < lis.length; i++) {
lis[i].className = "";
}
};
document.getElementById("btall").onclick = function(){
for(var i = 0; i < 50; i++) {
var span = document.createElement("span");
span.innerHTML = "first name " + i + " last name " + i;
document.getElementById("dest").appendChild(span);
}
var ul = document.getElementById("list");
var lis = ul.getElementsByTagName("li");
for (var i = 0; i < lis.length; i++) {
lis[i].className = "selected";
}
};
for(var i = 0; i < 50; i++) {
for(var i = 0; i < 50; i++) {
var li = document.createElement("li");
li.innerHTML = "nom" + i + " prenom" + i;
document.getElementById("list").appendChild(li);
}
}
}
</script>
</head>
<body>
<div id="dest" class="dest"></div>
<div>
<ul id="list"></ul>
</div>
<div>
<button id="btall">Select all</button>
<button id="btclear">Clear all</button>
<button id="btclearplus">Clear all and deselect</button>
</div>
</body>
</html>
Thank you, Jean-Pierre
change the one of the loops variable i to j because you have same variable in both loops
for(var i = 0; i < 50; i++) {
for(var j = 0; j < 50; j++) {
// do you logic
}
}
I deleted the double loop, the problem was not that here.
In Internet Explorer, you must click the "Select All" button and then the button "Clear all and deselect" to reproduce the problem.
<!DOCTYPE html>
<html>
<head>
<title>CSS</title>
<style>
div {
margin: 5px;
}
ul {
margin: 5px;
max-height: 200px;
overflow: auto;
}
ul li.selected {
font-weight: bold;
}
.dest {
width: 500px;
min-height: 21px;
max-height: 120px;
overflow: auto;
border: 1px solid #ccc;
background-color: #f9f9f0;
padding: 3px;
}
.dest span {
display: block;
background-color: #fff;
float: left;
border-radius: 2px;
border: 1px solid #ccc;
margin: 2px;
padding: 0px 2px 0px 2px;
line-height: 21px;
height: auto;
}
</style>
<script>
window.onload = function(){
document.getElementById("btclear").onclick = function(){
document.getElementById("dest").innerHTML = "";
};
document.getElementById("btclearplus").onclick = function(){
document.getElementById("dest").innerHTML = "";
var ul = document.getElementById("list");
var lis = ul.getElementsByTagName("li");
for (var i = 0; i < lis.length; i++) {
lis[i].className = "";
}
};
document.getElementById("btall").onclick = function(){
for(var i = 0; i < 50; i++) {
var span = document.createElement("span");
span.innerHTML = "first name " + i + " last name " + i;
document.getElementById("dest").appendChild(span);
}
var ul = document.getElementById("list");
var lis = ul.getElementsByTagName("li");
for (var i = 0; i < lis.length; i++) {
lis[i].className = "selected";
}
};
for(var i = 0; i < 50; i++) {
var li = document.createElement("li");
li.innerHTML = "nom" + i + " prenom" + i;
document.getElementById("list").appendChild(li);
}
}
</script>
</head>
<body>
<div id="dest" class="dest"></div>
<div>
<ul id="list"></ul>
</div>
<div>
<button id="btall">Select all</button>
<button id="btclear">Clear all</button>
<button id="btclearplus">Clear all and deselect</button>
</div>
</body>
</html>
Thank you, Jean-Pierre
Overflow: Auto problem / bug in IE
.element { overflow-y: auto; overflow-x: visible; width: 450px; }
DEMO
Related
I have four divs having a class name question.
Every question div is having a span as its child element.
I have four divs having a class name answer
Now on click on the span I call appendchild() to append the span whose parent is question now . On appendchild() the span parent becomes answer div.
Now the span is appended in the Answer div.
In span when I click whose parent is now answer div. I want to append the span back to its previous question div. But when I call appendchild() it does not append . It shows no error .
var spn = document.querySelectorAll("span");
var question = document.querySelectorAll(".question");
var answer = document.querySelectorAll(".answer");
var placedOnAnswer;
var placedOnQuestion;
function onspanclick() {
for (var i = 0; i < answer.length; i++) {
if (answer[i].id == this.parentElement.id) {
placedOnAnswer = true;
break;
}
}
for (var i = 0; i < question.length; i++) {
if (question[i].id == this.parentElement.id) {
placedOnQuestion = true;
break;
}
}
if (placedOnAnswer == true) {
for (var i = 0; i < question.length; i++) {
if (question[i].childElementCount == 0) {
question[i].appendChild(document.getElementById(this.id));
console.log("answer not working");
break;
}
}
}
if (placedOnQuestion == true) {
for (var i = 0; i < answer.length; i++) {
if (answer[i].childElementCount == 0) {
answer[i].appendChild(document.getElementById(this.id));
break;
}
}
}
}
for (var i = 0; i < spn.length; i++) {
spn[i].addEventListener("click", onspanclick);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.answer {
width: 100px;
height: 50px;
border: 2px dotted #686868;
border-radius: 10px;
display: inline-block;
overflow: hidden;
vertical-align: top;
margin: 10px;
}
.line {
height: 3px;
border: 2px solid #686868;
margin-top: 30px;
margin-bottom: 30px;
}
.question {
width: 100px;
height: 50px;
border: 2px dotted #686868;
border-radius: 10px;
display: inline-block;
overflow: hidden;
vertical-align: top;
margin: 10px;
}
span {
display: block;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.btn {
display: block;
padding: 10px 20px;
color: #686868;
border: 2px solid #686868;
font-size: 1.2em;
line-height: 1.7;
transition: 0.3s;
background: white;
width: 5%;
margin: 40px auto;
}
.btn:hover {
color: white;
background: #686868;
transition: 0.3s;
}
<body>
<div class="container">
<div class="answer" id="a1"></div>
<div class="answer" id="a2"></div>
<div class="answer" id="a3"></div>
<div class="answer" id="a4"></div>
</div>
<div class="line"></div>
<div class="question" id="q1"><span id="s1">ist</span></div>
<div class="question" id="q2"><span id="s2">wie</span></div>
<div class="question" id="q3"><span id="s3">name</span></div>
<div class="question" id="q4"><span id="s4">ihr</span></div>
<button class="btn">submit</button>
</body>
```
The problem is that placedOnAnswer and placedOnQuestion are global variables. So if you click on an answer and then click on a question, placedOnAnswer will still be true during the second click.
Make them local to the function so the values don't persist between calls.
var spn = document.querySelectorAll("span");
var question = document.querySelectorAll(".question");
var answer = document.querySelectorAll(".answer");
function onspanclick() {
var placedOnAnswer;
var placedOnQuestion;
for (var i = 0; i < answer.length; i++) {
if (answer[i].id == this.parentElement.id) {
placedOnAnswer = true;
break;
}
}
for (var i = 0; i < question.length; i++) {
if (question[i].id == this.parentElement.id) {
placedOnQuestion = true;
break;
}
}
if (placedOnAnswer == true) {
for (var i = 0; i < question.length; i++) {
if (question[i].childElementCount == 0) {
question[i].appendChild(document.getElementById(this.id));
console.log("answer not working");
break;
}
}
}
if (placedOnQuestion == true) {
for (var i = 0; i < answer.length; i++) {
if (answer[i].childElementCount == 0) {
answer[i].appendChild(document.getElementById(this.id));
break;
}
}
}
}
for (var i = 0; i < spn.length; i++) {
spn[i].addEventListener("click", onspanclick);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.answer {
width: 100px;
height: 50px;
border: 2px dotted #686868;
border-radius: 10px;
display: inline-block;
overflow: hidden;
vertical-align: top;
margin: 10px;
}
.line {
height: 3px;
border: 2px solid #686868;
margin-top: 30px;
margin-bottom: 30px;
}
.question {
width: 100px;
height: 50px;
border: 2px dotted #686868;
border-radius: 10px;
display: inline-block;
overflow: hidden;
vertical-align: top;
margin: 10px;
}
span {
display: block;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.btn {
display: block;
padding: 10px 20px;
color: #686868;
border: 2px solid #686868;
font-size: 1.2em;
line-height: 1.7;
transition: 0.3s;
background: white;
width: 5%;
margin: 40px auto;
}
.btn:hover {
color: white;
background: #686868;
transition: 0.3s;
}
<body>
<div class="container">
<div class="answer" id="a1"></div>
<div class="answer" id="a2"></div>
<div class="answer" id="a3"></div>
<div class="answer" id="a4"></div>
</div>
<div class="line"></div>
<div class="question" id="q1"><span id="s1">ist</span></div>
<div class="question" id="q2"><span id="s2">wie</span></div>
<div class="question" id="q3"><span id="s3">name</span></div>
<div class="question" id="q4"><span id="s4">ihr</span></div>
<button class="btn">submit</button>
</body>
```
The mistake I did in logic is that when I click on question div the span is shifting to answer and I made placedOnQuestion = true.
for (var i = 0; i < question.length; i++) {
if (question[i].id == this.parentElement.id) {
placedOnQuestion = true;
break;
}
}
if (placedOnQuestion == true) {
for (var i = 0; i < answer.length; i++) {
if (answer[i].childElementCount == 0) {
answer[i].appendChild(document.getElementById(this.id));
break;
}
}
}
After that when I clicked the span which is now on the answer div I made placedOnAnswer = true. Now both placedOnAnswer and placedOnQuestion is true.
for (var i = 0; i < answer.length; i++) {
if (answer[i].id == this.parentElement.id) {
placedOnAnswer = true;
break;
}
}
When I clicked once more on the span it appends it on the answer div following that I have a condition where it again checks for placedonQuestion being true and it places the span on the answer div.
here it satisfies both the condition and the element was placed where it was before
if (placedOnAnswer == true) {
for (var i = 0; i < question.length; i++) {
if (question[i].childElementCount == 0) {
question[i].appendChild(document.getElementById(this.id));
console.log("answer not working");
break;
}
}
}
if (placedOnQuestion == true) {
for (var i = 0; i < answer.length; i++) {
if (answer[i].childElementCount == 0) {
answer[i].appendChild(document.getElementById(this.id));
break;
}
}
}
I fixed this error by placing this in javascript by placing placedonAnswer= true and placedonQuestion= false. Both should never be true at same time. thanks for putting effort
for (var i = 0; i < answer.length; i++) {
if (answer[i].id == this.parentElement.id) {
placedOnAnswer = true;
placedOnQuestion = false;
break;
}
}
for (var i = 0; i < question.length; i++) {
if (question[i].id == this.parentElement.id) {
placedOnQuestion = true;
placedOnAnswer = false;
break;
}
}
thanks for the effort all the people who put in stack overflow. I get answers of my question and I am learning from it.
I am aiming to create a JS todo list similar to https://www.w3schools.com/howto/howto_js_todolist.asp
I have created the basic structure of my todo list application and the function of the close buttons.
These are working well, but I have a problem with adding new todo list items and checking and unchecking todo items.
I'm not sure if I'm using the classlist toggle property well, and also cannot figure why the add button doesn't work at all.
var todoitemlist = document.getElementsByClassName('todo-item');
var i;
for (i = 0; i < todoitemlist.length; i++) {
var span = document.createElement("SPAN");
span.innerHTML = "Close";
span.className = "closebutton";
todoitemlist[i].appendChild(span);
}
var close = document.getElementsByClassName("closebutton");
var i;
for (i = 0; i < close.length; i++) {
close[i].onclick = function() {
var listitem = this.parentElement;
listitem.style.display = "none";
}
}
var todoitemlistx = document.getElementsByClassName('todo-item');
//checked element
var i;
for (i = 0; i < todoitemlistx.length; i++) {
todoitemlistx[i].onclick = function(ev) {
ev.style.backgroundColor = "red";
ev.classList.toggle("todo-item-checked");
}
}
//add another list item
function add() {
var listitem = document.createElement("LI");
listitem.className = "todo-item";
var text = document.getElementById('todoinput').value;
var myul = getElementById('todo-list');
var t = document.createTextNode(text);
listitem.appendChild(t);
myul.appendChild(listitem);
var span = document.createElement("SPAN");
span.innerHTML = "Close";
span.className = "closebutton";
listitem[i].appendChild(span);
for (i = 0; i < close.length; i++) {
close[i].onclick = function() {
var div = this.parentElement;
div.style.display = "none";
}
}
}
* {
box-sizing: border-box;
}
body {
text-align: center;
margin: 0;
padding: 0;
background-color: #dbf9fc;
font-family: Arial, Helvetica, sans-serif;
color: rgba(0, 27, 39);
}
#todoinput {
margin: 5px;
padding: 5px;
width: 65%;
}
#add-button {
padding: 5px;
margin: 5px;
width: 5%;
background-color: rgba(0, 27, 39);
color: #dbf9fc;
border: none;
border-radius: 5px;
height: 1fr;
cursor: pointer;
}
#add-button:hover {
background-color: black;
}
#todo-list {
display: inline-block;
margin: 0;
padding: 0;
list-style: none;
width: 70%;
}
.todo-item {
position: relative;
display: flex;
justify-content: flex-start;
background-color: white;
border: 2px solid black;
padding: 5px;
margin: 5px;
}
.closebutton {
cursor: pointer;
justify-self: flex-end;
background-color: #e6772d;
position: absolute;
right: 0;
top: 0;
color: white;
float: right;
padding: 5px;
width: 30%;
margin: 0;
}
.closebutton:hover {
background-color: #c46526;
}
.todo-item-checked {
position: relative;
display: flex;
justify-content: flex-start;
background-color: rgb(187, 187, 187);
border: 2px solid black;
padding: 5px;
margin: 5px;
text-decoration: line-through;
}
.black {
background-color: black;
}
<main class="centered">
<h1>ToDo List JS</h1>
<h3>js project</h3>
<form action="">
<input type="text" name="" id="todoinput" placeholder="Enter the activity you've wented to do">
<input type="button" value="Add" id="add-button" onclick="add()">
</form>
<ul id="todo-list">
<li class="todo-item">
Hit the lights
</li>
<li class="todo-item">
Hit the lights
</li>
<li class="todo-item">
Hit the lights
</li>
<li class="todo-item-checked todo-item">
Hit the lights
</li>
</ul>
</main>
I remember what it was like starting development and how hard it could be, so I persevered with this.
I thought it would be a few small changes but it turned into a massive rewrite.
Una grande padulo, as the Italians like to say.
I hope you can or try to understand what I did here.
The big lesson would be, don't write the same code twice, put it in a separate function.
So this seems to work.
Let me know if it doesn't.
var todoitemlist=document.getElementsByClassName('todo-item');
for(var i=0;i<todoitemlist.length;i++)
{
myawesomeclosebutton(todoitemlist[i]);
todoitemlist[i].addEventListener('click',myawesomebackground);
}
function myawesomeclosebutton(myawesomeitem)
{
var span=document.createElement('span');
span.innerHTML='Close';
span.className='closebutton';
span.addEventListener('click',myawesomecloseevent);
myawesomeitem.appendChild(span);
}
function myawesomebackground(ev)
{
if(ev.target.style.backgroundColor!='red')
{
ev.target.style.backgroundColor='red';
}
else
{
ev.target.style.backgroundColor='transparent';
}
}
function myawesomecloseevent(event)
{
var div=event.target.parentElement;
div.style.display='none';
}
function add()
{
var listitem=document.createElement('li');
listitem.className='todo-item';
var myawesomeinput=document.getElementById('todoinput');
var text=myawesomeinput.value;
var myul=document.getElementById('todo-list');
var t=document.createTextNode(text);
listitem.appendChild(t);
myul.appendChild(listitem);
listitem.addEventListener('click',myawesomebackground);
myawesomeclosebutton(listitem);
myawesomeinput.value='';
}
function enterToSubmit(event){
var key = event.keyCode;
if(key===13){
add();
}
}
function get_todos() {
var todos = new Array;
var todos_str = localStorage.getItem('todo');
if (todos_str !== null) {
todos = JSON.parse(todos_str);
}
return todos;
}
function add() {
var task = document.getElementById('task').value;
var todos = get_todos();
todos.push(task);
localStorage.setItem('todo', JSON.stringify(todos));
show();
return false;
}
function remove() {
var id = this.getAttribute('id');
var todos = get_todos();
todos.splice(id, 1);
localStorage.setItem('todo', JSON.stringify(todos));
show();
return false;
}
function show() {
var todos = get_todos();
var html = '<ul>';
for(var i=0; i<todos.length; i++) {
html += '<li>' + todos[i] + '<button class="remove" id="' + i + '">x</button></li>';
};
html += '</ul>';
document.getElementById('todos').innerHTML = html;
var buttons = document.getElementsByClassName('remove');
for (var i=0; i < buttons.length; i++) {
buttons[i].addEventListener('click', remove);
};
}
document.getElementById('add').addEventListener('click', add);
show();
*{
margin: 0px;
padding: 0px;
background-color: aqua;
}
#a{
align-content: center;
text-align: center;
background-color: lime;
}
input:focus{
border-color: aqua;
}
input{
margin: 30px 0px 30px 30px;
border-radius: 35%;
padding-top: 20px;
padding-left: 50px;
padding-right: 50px;
padding-bottom: 20px;
color: aqua;
background-color: rgb(255, 0, 64);
font-size: 20px;
text-align: center;
}
#add,button{
font-size: large;
border-radius: 30%;
background-color: rgb(255, 0, 64);
color: white;
padding: 10px;
margin-bottom: 0px;
margin-top: 0px;
margin-left: 10px;
}
#todos{
}
button{
padding-right: 18px;
padding-left: 18px;
}
li{
font-size: 25px;
border: 10px solid black;
margin: 5px;
padding: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<DOCTYPE html>
<html lang="en">
<head>
<title>TODO List</title>
<link rel="stylesheet" href="nv.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
</head>
<body>
<div id="a">
<input id="task" onkeypress="enterToSubmit(event)"><button id="add">Add</button>
</div>
<hr>
<div id="todos">
</div>
<script src="nv.js"></script>
</body>
</html>
I am making a todo list wab app in javascript html and css and when i insert any element or task it take position according to length of task but i want all button and task in a parallel line
HTML Code :- https://textuploader.com/1oyu3
CSS Code :- https://textuploader.com/1oyuy
JS Code :- https://textuploader.com/1oyui
Img:-current img
Img:-what i want
Thanks
here you can see full at jsfiddle
i add div at your javascript
for(var i=0; i<todos.length; i++) {
html += '<li><div class="list">' + todos[i] + '</div><div class="button"><button class="remove" id="' + i + '">x</button></div></li>';
};
and make add css with class list & button
.list{
float: left;
width: 80%;
text-align: center;
}
.button{
float: left;
width: 20%;
text-align: right;
}
li{
display: flex;
}
change nv.js
function enterToSubmit(event){
var key = event.keyCode;
if(key===13){
add();
}
}
function get_todos() {
var todos = new Array;
var todos_str = localStorage.getItem('todo');
if (todos_str !== null) {
todos = JSON.parse(todos_str);
}
return todos;
}
function add() {
var task = document.getElementById('task').value;
var todos = get_todos();
todos.push(task);
localStorage.setItem('todo', JSON.stringify(todos));
show();
return false;
}
function remove() {
var id = this.getAttribute('id');
var todos = get_todos();
todos.splice(id, 1);
localStorage.setItem('todo', JSON.stringify(todos));
show();
return false;
}
function show() {
var todos = get_todos();
var html = '<ul>';
for(var i=0; i<todos.length; i++) {
html += '<li><span class="todoname">' + todos[i] + '</span><button class="remove" id="' + i + '">x</button></li>'; // add span in name for css
};
html += '</ul>';
document.getElementById('todos').innerHTML = html;
var buttons = document.getElementsByClassName('remove');
for (var i=0; i < buttons.length; i++) {
buttons[i].addEventListener('click', remove);
};
}
document.getElementById('add').addEventListener('click', add);
show();
nv.css
li{
font-size: 25px;
border: 10px solid black;
margin: 5px;
padding: 5px;
height:50px; // add height in li
}
/* add this classes in your css */
.remove
{
float:right;
}
.todoname
{
margin-left: 100px;
vertical-align: middle;
}
I am trying to create a pattern of 5 rows of div tags using for loops in javascript. The first row should have 1 div, the second 2 divs and so on until there the last row has 5 divs. What I currently end up with is 1 row of 15 divs.
<script>
for (var i = 0; i < 5; i++) {
for(var j = 0; j <= i; j++) {
var div = document.createElement("div");
document.body.appendChild(div);
}
var p = document.createElement("p");
document.body.appendChild(p);
}
</script>
CSS
<style>
div {
width: 20px;
height: 20px;
border: 1px solid black;
display: inline-block;
position: relative;
float: left;
}
</style>
You can simply consider br tag to create the separation and no need to use float because you will have to clear it after each row:
for (var i = 0; i < 5; i++) {
for (var j = 0; j <= i; j++) {
var div = document.createElement("div");
div.classList.add('box');
document.body.appendChild(div);
}
var br = document.createElement("br");
document.body.appendChild(br);
}
div.box {
width: 20px;
height: 20px;
border: 1px solid black;
display: inline-block;
}
With float you will need something like this:
for (var i = 0; i < 5; i++) {
for (var j = 0; j <= i; j++) {
var div = document.createElement("div");
div.classList.add('box');
document.body.appendChild(div);
}
var br = document.createElement("br");
document.body.appendChild(br);
}
div.box {
width: 20px;
height: 20px;
border: 1px solid black;
float:left;
}
br {
clear:both; /*This is mandatory !!*/
}
Or like this:
for (var i = 0; i < 5; i++) {
var p = document.createElement("div"); /*Create the row*/
p.classList.add('clear'); /*add the clear class*/
for (var j = 0; j <= i; j++) {
var div = document.createElement("div");
div.classList.add('box');
p.appendChild(div); /*Append blocks to the row and not the body*/
}
document.body.appendChild(p); /*Append the row to the body */
}
div.box {
width: 20px;
height: 20px;
border: 1px solid black;
float:left;
}
div.clear {
clear:both; /*This is mandatory !!*/
}
What I want: User types word into input bar -> user presses Add button -> word is added to two lists "unsortedUL" and "sortedUL" - > user presses Sort button -> the list "sortedUL" gets sorted by descending (z-a), while "unsortedUL" remains exactly how the user inputted it.
I cannot figure out how to get TWO lists while only ONE of them is sorted.
var myNodelist = document.getElementsByTagName("LI");
var i;
for (i = 0; i < myNodelist.length; i++) {
var span = document.createElement("SPAN");
var txt = document.createTextNode("\u00D7");
span.className = "close";
span.appendChild(txt);
myNodelist[i].appendChild(span);
}
var close = document.getElementsByClassName("close");
var i;
for (i = 0; i < close.length; i++) {
close[i].onclick = function() {
var div = this.parentElement;
div.style.display = "none";
}
}
function newElement() {
var li = document.createElement("li");
var inputValue = document.getElementById("myInput").value;
var t = document.createTextNode(inputValue);
li.appendChild(t);
if (inputValue === '') {
alert("You must write a word!");
} else {
document.getElementById("sortedUL").appendChild(li);
}
document.getElementById("myInput").value = "";
var span = document.createElement("SPAN");
var txt = document.createTextNode("\u00D7");
span.className = "close";
span.appendChild(txt);
li.appendChild(span);
for (i = 0; i < close.length; i++) {
close[i].onclick = function() {
var div = this.parentElement;
div.style.display = "none";
}
}
}
function sortList() {
var list, i, switching, b, shouldSwitch;
list = document.getElementById("sortedUL");
switching = true;
while (switching) {
switching = false;
b = list.getElementsByTagName("LI");
for (i = 0; i < (b.length - 1); i++) {
shouldSwitch = false;
if (b[i].innerHTML.toLowerCase() < b[i + 1].innerHTML.toLowerCase()) {
shouldSwitch= true;
break;
}
}
if (shouldSwitch) {
b[i].parentNode.insertBefore(b[i + 1], b[i]);
switching = true;
}
}
}
document.getElementById("date").innerHTML = new Date().toDateString();
document.getElementById("time").innerHTML = new Date().toLocaleTimeString();
body {
margin: 0;
min-width: 250px;
background-color: green;
}
* {
box-sizing: border-box;
}
ul {
margin: 0;
padding: 0;
width: 100%;
float: right;
}
ul li {
cursor: pointer;
position: relative;
padding: 12px 8px 12px 40px;
list-style-type: number;
background: #eee;
font-size: 18px;
transition: 0.2s;
text-align: center;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.close {
position: absolute;
right: 0;
top: 0;
padding: 12px 16px 12px 16px;
}
.header {
background-color: green;
padding: 30px 40px;
color: white;
text-align: center;
}
.header:after {
content: "";
display: table;
clear: both;
}
input {
border: none;
width: 50%;
padding: 10px;
float: center;
font-size: 16px;
}
.addBtn {
padding: 10px;
width: 10%;
background: #d9d9d9;
color: #555;
float: right;
text-align: center;
font-size: 16px;
cursor: pointer;
transition: 0.3s;
}
.sortBtn {
padding: 10px;
width: 10%;
background: #d9d9d9;
color: #555;
float: left;
text-align: center;
font-size: 16px;
cursor: pointer;
transition: 0.3s;
}
<!DOCTYPE html>
<html>
<title>Assignment Two</title>
<body>
<h1 style="color:white;"align="center"id="date"></h1>
<h1 style="color:white;"align="center"id="time"></h1>
<div id="myDIV" class="header">
<h2 style="margin:5px">Enter a list of words</h2>
<input type="text" id="myInput" placeholder="Word...">
<span onclick="newElement()" class="addBtn">Add</span>
<span onclick="sortList()" class="sortBtn">Sort</span>
</div>
<ul id="sortedUL">
</ul>
<ul id="unsortedUL">
</ul>
</body>
</html>
You have to clone the HTML Node to append it twice.
Or create it twice like I did.
var myNodelist = document.getElementsByTagName("LI");
var i;
for (i = 0; i < myNodelist.length; i++) {
var span = document.createElement("SPAN");
var txt = document.createTextNode("\u00D7");
span.className = "close";
span.appendChild(txt);
myNodelist[i].appendChild(span);
}
var close = document.getElementsByClassName("close");
var i;
for (i = 0; i < close.length; i++) {
close[i].onclick = function() {
var div = this.parentElement;
div.style.display = "none";
}
}
function newElement() {
if (inputValue === '') {
alert("You must write a word!");
} else {
var li = document.createElement("li");
var inputValue = document.getElementById("myInput").value;
var t = document.createTextNode(inputValue);
li.appendChild(t);
document.getElementById("sortedUL").appendChild(li);
var li = document.createElement("li");
var inputValue = document.getElementById("myInput").value;
var t = document.createTextNode(inputValue);
li.appendChild(t);
document.getElementById("unsortedUL").appendChild(li);
}
document.getElementById("myInput").value = "";
var span = document.createElement("SPAN");
var txt = document.createTextNode("\u00D7");
span.className = "close";
span.appendChild(txt);
li.appendChild(span);
for (i = 0; i < close.length; i++) {
close[i].onclick = function() {
var div = this.parentElement;
div.style.display = "none";
}
}
}
function sortList() {
var list, i, switching, b, shouldSwitch;
list = document.getElementById("sortedUL");
switching = true;
while (switching) {
switching = false;
b = list.getElementsByTagName("LI");
for (i = 0; i < (b.length - 1); i++) {
shouldSwitch = false;
if (b[i].innerHTML.toLowerCase() < b[i + 1].innerHTML.toLowerCase()) {
shouldSwitch= true;
break;
}
}
if (shouldSwitch) {
b[i].parentNode.insertBefore(b[i + 1], b[i]);
switching = true;
}
}
}
document.getElementById("date").innerHTML = new Date().toDateString();
document.getElementById("time").innerHTML = new Date().toLocaleTimeString();
body {
margin: 0;
min-width: 250px;
background-color: green;
}
* {
box-sizing: border-box;
}
p {
font-size: 16px;
margin-left: 20px;
color: white;
text-transform: uppercase;
}
ul {
margin: 0 0 20px 0;
padding: 0;
width: 100%;
float: right;
}
ul li {
cursor: pointer;
position: relative;
padding: 12px 8px 12px 40px;
list-style-type: number;
background: #eee;
font-size: 18px;
transition: 0.2s;
text-align: center;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.close {
position: absolute;
right: 0;
top: 0;
padding: 12px 16px 12px 16px;
}
.header {
background-color: green;
padding: 30px 40px;
color: white;
text-align: center;
}
.header:after {
content: "";
display: table;
clear: both;
}
input {
border: none;
width: 50%;
padding: 10px;
float: center;
font-size: 16px;
}
.addBtn {
padding: 10px;
width: 10%;
background: #d9d9d9;
color: #555;
float: right;
text-align: center;
font-size: 16px;
cursor: pointer;
transition: 0.3s;
}
.sortBtn {
padding: 10px;
width: 10%;
background: #d9d9d9;
color: #555;
float: left;
text-align: center;
font-size: 16px;
cursor: pointer;
transition: 0.3s;
}
<!DOCTYPE html>
<html>
<title>Assignment Two</title>
<body>
<h1 style="color:white;"align="center"id="date"></h1>
<h1 style="color:white;"align="center"id="time"></h1>
<div id="myDIV" class="header">
<h2 style="margin:5px">Enter a list of words</h2>
<input type="text" id="myInput" placeholder="Word...">
<span onclick="newElement()" class="addBtn">Add</span>
<span onclick="sortList()" class="sortBtn">Sort</span>
</div>
<p>Sorted</p>
<ul id="sortedUL">
</ul>
<p>Unsorted</p>
<ul id="unsortedUL">
</ul>
</body>
</html>
While you need list you can use Javascript Array
Here you can have two Arrays which would be SortedList and UnsortedList
I have declare both the list globally so that you can sort one list and keep one list without change
Refer The Below Code for the Work Flow
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form>
<div>
<input type="text" name="txtName" id="txtName"/>
<input type="button" value="Add" onclick="AddToList()"/>
<input type="button" value="Sort" onclick="SortList()"/>
</div>
</form>
</body>
</html>
<script>
var sortedList = [];
var unsortedList = [];
function AddToList() {
var data = document.getElementById("txtName").value;
sortedList.push(data);
unsortedList.push(data);
}
function SortList() {
sortedList.sort();
sortedList.reverse();
console.log(sortedList);
console.log(unsortedList);
}
</script>
Here I have created two buttons as you said
And Called a function to sort and other to add in the List.
As you said you need the Unsorted List to be as it is, So in the SortList() function we have printed sortedList and unsortedList Both two see a diffrence.
As expected sortedList will print the descending order data and unsortedList will print normal data.
You just need to insert it into both lists as each word is added, i.e. where you have:
document.getElementById("sortedUL").appendChild(li);
you should add a second line like this:
document.getElementById("unsortedUL").appendChild(li.cloneNode(true));
The node cloning might be what you were missing if you tried it before, otherwise it would move the same element and it ends up in only one list. The 'true' argument makes a deep copy so that the text node underneath it is copied as well.
Incidentally, this whole operation would be a lot easier with jQuery, it's the kind of DOM manipulation that the library was meant for. However people jump to jQuery so quickly and it's good that you are doing it with vanilla JavaScript.