I can't seem to get my to-do list working. I've been following a tutorial on YouTube and after writing out all the code, nothing seems to be added/displayed if I attempt to add something to the to-do list. I've had a good look through everything and also rewatched the video and double checked I had the exact same code (the video doesn't provide the source code). I'm lost at this point and would appreciate any help.
The functionality of the project should allow people to add something to the to-do list, edit items they have in their list and also be able to delete their item.
Is there any way to not have the input field display after adding an entry, until the user clicks the "edit" button? When I add an entry, not only does it show what I had entered, it also displayed the input field to edit the entry like so:
// Add To-Do's
var add_todo_btn = document.getElementById('add-btn');
var todo_input = document.getElementById('todo-input');
var list = document.getElementById('list');
add_todo_btn.addEventListener('click', function () {
var todo = todo_input.value;
var item = document.createElement('DIV');
item.classList.add('item');
var item_text = document.createElement('DIV');
item_text.classList.add('item-text');
item_text.textContent = todo;
var edit_input = document.createElement('INPUT');
edit_input.classList.add('edit-input');
edit_input.classList.add('hide');
edit_input.name = 'edit-input';
edit_input.type = 'text';
edit_input.value = todo;
var edit_input_btn = document.createElement('BUTTON');
edit_input_btn.textContent = 'UPDATE';
edit_input_btn.classList.add('action-btn');
edit_input_btn.classList.add('update-btn');
edit_input_btn.classList.add('hide');
edit_input_btn.type = 'button';
var action_btns = document.createElement('DIV');
action_btns.classList.add('action-btns');
var edit_btn = document.createElement('BUTTON');
edit_btn.classList.add('action-btn');
edit_btn.classList.add('edit-btn');
edit_btn.textContent = 'EDIT';
// Edit To-Do's
edit_btn.addEventListener('click', function () {
edit_input.classList.remove('hide');
item_text.classList.add('hide');
edit_input_btn.classList.remove('hide');
edit_input_btn.addEventListener('click', function () {
item_text.textContent = edit_input.value;
edit_input.classList.add('hide');
item_text.classList.remove('hide');
edit_input_btn.classList.add('hide');
});
});
var remove_btn = document.createElement('BUTTON');
remove_btn.classList.add('action-btn');
remove_btn.classList.add('remove-btn');
remove_btn.textContent = 'REMOVE';
// Remove To-Do's
remove_btn.addEventListener('click', function () {
item.parentNode.removeChild(item);
});
action_btns.append(edit_input_btn);
action_btns.append(edit_btn);
action_btns.append(remove_btn);
item.append(item_text);
item.append(edit_input);
item.append(action_btns);
list.append(item);
todo_input.value = '';
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<title>Todo App</title>
</head>
<body>
<div class="app">
<div class="header">
<div class="title">To-Do List</div>
</div>
<div class="input">
<input type="text" name="todo-input" id="todo-input" class="input-element" placeholder="What do you need to do?" />
<button type="button" name="add-btn" id="add-btn" class="input-btn">
Add
</button>
<div class="todo-list" id="list"></div>
</div>
</div>
</body>
</html>
It looks like you're already adding a "hide" class in the correct circumstances - you just need to define the css for this class:
.hide{
display: none;
}
Once you add this, the example functions as you would expect:
// Add To-Do's
var add_todo_btn = document.getElementById('add-btn');
var todo_input = document.getElementById('todo-input');
var list = document.getElementById('list');
add_todo_btn.addEventListener('click', function () {
var todo = todo_input.value;
var item = document.createElement('DIV');
item.classList.add('item');
var item_text = document.createElement('DIV');
item_text.classList.add('item-text');
item_text.textContent = todo;
var edit_input = document.createElement('INPUT');
edit_input.classList.add('edit-input');
edit_input.classList.add('hide');
edit_input.name = 'edit-input';
edit_input.type = 'text';
edit_input.value = todo;
var edit_input_btn = document.createElement('BUTTON');
edit_input_btn.textContent = 'UPDATE';
edit_input_btn.classList.add('action-btn');
edit_input_btn.classList.add('update-btn');
edit_input_btn.classList.add('hide');
edit_input_btn.type = 'button';
var action_btns = document.createElement('DIV');
action_btns.classList.add('action-btns');
var edit_btn = document.createElement('BUTTON');
edit_btn.classList.add('action-btn');
edit_btn.classList.add('edit-btn');
edit_btn.textContent = 'EDIT';
// Edit To-Do's
edit_btn.addEventListener('click', function () {
edit_input.classList.remove('hide');
item_text.classList.add('hide');
edit_input_btn.classList.remove('hide');
edit_input_btn.addEventListener('click', function () {
item_text.textContent = edit_input.value;
edit_input.classList.add('hide');
item_text.classList.remove('hide');
edit_input_btn.classList.add('hide');
});
});
var remove_btn = document.createElement('BUTTON');
remove_btn.classList.add('action-btn');
remove_btn.classList.add('remove-btn');
remove_btn.textContent = 'REMOVE';
// Remove To-Do's
remove_btn.addEventListener('click', function () {
item.parentNode.removeChild(item);
});
action_btns.append(edit_input_btn);
action_btns.append(edit_btn);
action_btns.append(remove_btn);
item.append(item_text);
item.append(edit_input);
item.append(action_btns);
list.append(item);
todo_input.value = '';
});
.hide{
display: none;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<title>Todo App</title>
</head>
<body>
<div class="app">
<div class="header">
<div class="title">To-Do List</div>
</div>
<div class="input">
<input type="text" name="todo-input" id="todo-input" class="input-element" placeholder="What do you need to do?" />
<button type="button" name="add-btn" id="add-btn" class="input-btn">
Add
</button>
<div class="todo-list" id="list"></div>
</div>
</div>
</body>
</html>
You can add 'readonly' inline to your input tag. This will display your input field as is but the user won't be able to edit the content of the input tag. If you want to hide the input field, simply change the display style to none, i.e. display: none; .
You can create a JavaScript function that modifies the styling of these elements onClick.
Related
<!DOCTYPE html>
<html>
<head>
<title>Learning About Nodes</title>
</head>
<body>
<ul>
<li>Hammerhead</li>
<li>Tiger</li>
<li>Great White</li>
</ul>
<button id="btn">Just do it</button>
</body>
</html>
btnElement = document.getElementById("#btn");
if (btnElement) {
btnElement.addEventlistener("click", justdoitFunction);
}
function justdoitFunction() {
const ul2 = document.createElement("ul");
document.body.appendChild(ul);
const listElement = document.createElement("li");
listElement.textContent = "This is done by Panda.";
ul2.appendChild(listElement);
}
I am trying to add a text content using the just do it button. I don't see what the mistake is. Help is greatly appreciated.
I have found some syntax errors, so i fixed it here:
const btnElement = document.getElementById("btn");
function justdoitFunction() {
const ul = document.createElement("ul");
document.body.appendChild(ul);
const listElement = document.createElement("li");
listElement.textContent = "This is done by Panda.";
ul.appendChild(listElement);
}
if (btnElement) {
btnElement.addEventListener("click", justdoitFunction);
}
But I can see that you are trying to insert an item into a ul list. Instead of creating a new whole list each time you click the button, try to select the existing list and add the item there:
<!DOCTYPE html>
<html>
<head>
<title>Learning About Nodes</title>
</head>
<body>
<ul id="list">
<li>Hammerhead</li>
<li>Tiger</li>
<li>Great White</li>
</ul>
<button id="btn">Just do it</button>
</body>
</html>
const btnElement = document.getElementById("btn");
function justdoitFunction() {
const ul = document.getElementById("list");
const listElement = document.createElement("li");
listElement.textContent = "This is done by Panda.";
ul.appendChild(listElement);
}
if (btnElement) {
btnElement.addEventListener("click", justdoitFunction);
}
I am trying to create a comment box where on each submit a new is dynamically created. The inner elements of the <div> being 3 buttons Edit, Post, Cancel and a close icon(image). These are also dynamically created. I finally append them all together. The below code would generate something like the below image on two submits. The error I'm facing is that, whatever <div>'s close icon/button is clicked, always the last <div> is being affected. Here I tried to close 'Hi' but 'hello' is being affected.Also there is a duplication of the <div> on even comments.
Kindly help me correct these issues.
<!DOCTYPE html>
<html>
<head>
<title>Comment</title>
</head>
<body>
<textarea id="ta" rows="30" cols="30" readonly></textarea>
<br>
<input type="textbox" id="tb"></input><br>
<button onclick="add()">Submit</button><br>
<script type="text/javascript">
var newDiv="",i=1,ta="";
function add() {
i++;
ta=document.getElementById('ta');
newDiv = document.createElement("div");
newDiv.id = "d"+i;
newDiv.style.display="block";
newTa = document.createElement("input");
newTa.type="text"
newTa.id = "t"+i;
//newTa.readonly='true';
newTa.setAttribute("readOnly","true");
newTa.style.display="block";
newTa.onclick=function(){
newP.style.visibility="visible";
newImg.style.visibility="visible";
newBut1.style.visibility="visible";
newButt1.style.visibility="visible";
};
// document.querySelector('body').addEventListener('click', function(event) {
newP=document.createElement("BUTTON");
newP.id="p"+i;
newP.innerHTML="Edit";
newP.style.visibility="hidden";
newP.style.display="inline";
newP.onclick=function()
{
newTa.removeAttribute('readonly'); // only needed the first time
newTa.readOnly = false;
//newTa.setAttribute("readOnly","false");
//newTa.readonly='false';
//newP.innerHTML="wrng";
}
newImg=document.createElement("IMG");
newImg.id="i"+i;
newImg.src="http://www.freeiconspng.com/uploads/close-icon-30.png";
newImg.style.width="20%";
newImg.style.height="20%";
newImg.alt="close";
newImg.style.visibility="hidden";
newImg.style.display="inline";
newImg.onclick=function()
{
newDiv.innerHTML="";
//newDiv.remove();
}
newBut1=document.createElement("button");
newBut1.id="b"+i;
newBut1.innerHTML="Post";
newBut1.style.visibility="hidden";
newBut1.style.display="inline";
newBut1.onclick=function(){
//newTa.readonly='true';
newTa.setAttribute("readOnly","true");
}
newButt1=document.createElement("button");
newButt1.id="bt"+i;
newButt1.innerHTML="Cancel";
newButt1.style.visibility="hidden";
newButt1.onclick=function(){
newTa.value=document.getElementById('tb').value;
newTa.readonly='true';
}
newDiv.appendChild(newTa);
newDiv.appendChild(newP);
newDiv.appendChild(newImg);
newDiv.appendChild(newBut1);
newDiv.appendChild(newButt1);
var b=""
b="t"+i;
ta.appendChild(newDiv);
document.getElementById(b).value=document.getElementById('tb').value;
}
</script>
</body>
</html>
Try this code. I have changed textarea to div.
Initial i to 0 instead of 1. You can also set it to 1. It won't affect the functionality.
Some variables were global, I have changed them to local variable now like newDiv,newP, newImg etc.
<!DOCTYPE html>
<html>
<head>
<title>Comment</title>
</head>
<body>
<!--<textarea id="ta" rows="30" cols="30" readonly></textarea>-->
<div id="ta"></div>
<br>
<input type="textbox" id="tb"></input><br>
<button onclick="add()">Submit</button><br>
<script type="text/javascript">
var i=0,ta="";
function add() {
(function(){
i++;
var temp_i = i;
ta=document.getElementById('ta');
var newDiv = document.createElement("div");
newDiv.id = "d"+temp_i;
newDiv.style.display="block";
newTa = document.createElement("input");
newTa.type="text"
newTa.id = "t"+temp_i;
//newTa.readonly='true';
newTa.setAttribute("readOnly","true");
newTa.style.display="block";
newTa.onclick=function(){
console.log(temp_i);
console.log(i);
newP.style.visibility="visible";
newImg.style.visibility="visible";
newBut1.style.visibility="visible";
newButt1.style.visibility="visible";
};
// document.querySelector('body').addEventListener('click', function(event) {
var newP=document.createElement("BUTTON");
newP.id="p"+temp_i;
newP.innerHTML="Edit";
newP.style.visibility="hidden";
newP.style.display="inline";
newP.onclick=function()
{
newTa.removeAttribute('readonly'); // only needed the first time
newTa.readOnly = false;
//newTa.setAttribute("readOnly","false");
//newTa.readonly='false';
//newP.innerHTML="wrng";
}
var newImg=document.createElement("IMG");
newImg.id="i"+temp_i;
newImg.src="http://www.freeiconspng.com/uploads/close-icon-30.png";
newImg.style.width="20%";
newImg.style.height="20%";
newImg.alt="close";
newImg.style.visibility="hidden";
newImg.style.display="inline";
newImg.onclick=function()
{
newDiv.innerHTML="";
//newDiv.remove();
}
var newBut1=document.createElement("button");
newBut1.id="b"+temp_i;
newBut1.innerHTML="Post";
newBut1.style.visibility="hidden";
newBut1.style.display="inline";
newBut1.onclick=function(){
//newTa.readonly='true';
newTa.setAttribute("readOnly","true");
}
var newButt1=document.createElement("button");
newButt1.id="bt"+temp_i;
newButt1.innerHTML="Cancel";
newButt1.style.visibility="hidden";
newButt1.onclick=function(){
newTa.value=document.getElementById('tb').value;
newTa.readonly='true';
}
newDiv.appendChild(newTa);
newDiv.appendChild(newP);
newDiv.appendChild(newImg);
newDiv.appendChild(newBut1);
newDiv.appendChild(newButt1);
var b=""
b="t"+temp_i;
ta.appendChild(newDiv);
document.getElementById(b).value=document.getElementById('tb').value;
})();
}
</script>
</body>
</html>
Why not you use jquery to minimize your code campaign. Below is the code which will fix your problem.
<!DOCTYPE html>
<html>
<head>
<title>Comment</title>
</head>
<body>
<br>
<div class="container">
<input type="textbox" id="tb"><br>
<button>Edit</button><button>Post</button><button class="cancel">Cancel</button><br />
</div>
<button class="submit">Submit</button><br>
<script
src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.submit').click(function() {
var element = '<div class="container">'+'<input type="textbox" id="tb"><br>'+
'<button>Edit</button><button>Post</button><button class="cancel">Cancel</button><br /></div>';
$('.submit').before(element);
});
$('body').delegate('.cancel', 'click', function() {
$(this).parent().remove();
});
});
</script>
</body>
</html>
Thanks
I am trying to to increment/decrement a value in a paragraph when a button is clicked.
$(document).ready(function() {
var breakTime = 5;
var section = 25;
var start = "Start";
var stop = "Stop";
function Pomodoro(element, target) {
this.element = element;
this.target = target;
};
Pomodoro.prototype.incrementer = function incrementer() {
// this takes care of break and section timers incrementing
this.element.click(function() {
breakTime++;
var el = this.target;
el.html(breakTime);
});
};
// end
Pomodoro.prototype.decrementer = function decrementer() {
// this takes care of break and section timers incrementing
breakerDec.element.click(function() {
breakTime--;
var el = breakerDec.target.html(breakTime);
});
};
// end
var breakerInc = new Pomodoro();
var ele = $("#inner1");
var tar = $("#par");
breakerInc.element = ele;
breakerInc.target = tar;
breakerInc.incrementer.bind(breakerInc);
//end
var breakerDec = new Pomodoro();
breakerDec.element = $("#inner2");
breakerDec.target = $("#par");
breakerDec.decrementer();
var sectionInc = new Pomodoro($("#inner3"), $("#par2"));
sectionInc.incrementer.bind(sectionInc);
});
and i am getting no result when i click the button.
this is the html:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Pomodoro Timer</title><!-- End of Title -->
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="wrapper">
<div class="top">
<div class="div div-1"><p id="par" class="breaktime-1">5</p>
<div class="inner-div inner-1"><button id="inner1" type="button" class="btn">+</button></div>
<div class="inner-div inner-2"><button id="inner2" type="button" class="btn">-</button></div>
</div>
<div class="div div-2"><p id="par2" class="breaktime">25</p>
<div class="inner-div inner-1"><button id="inner3" type="button" class="btn">+</button></div>
<div class="inner-div inner-2"><button id="inner4" type="button" class="btn">-</button></div>
</div>
</div>
<div class="div div-3">
<h3 class="heading">section</h3>
<button type="button" class="btn-Start-Stop"></button
</div>
<div><p></p></div>
</div>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.4.js"></script>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
Here is one (trimmed-down) solution just using vanilla javascript:
function changeValue() {
var breaktime = this.parentNode.getElementsByClassName('breaktime')[0];
var val = breaktime.innerHTML;
if (this.className === 'increment') {
val++;
}
else if (this.className === 'decrement') {
val--;
}
breaktime.innerHTML = val;
}
function startStop() {
var values = [];
var breaktimes = document.getElementsByClassName('breaktime');
breaktimes[1].classList.toggle('decrementing');
if (breaktimes[1].classList.contains('decrementing') === true) {
values[1] = parseInt(breaktimes[1].innerHTML);
values[1]--;
breaktimes[1].innerHTML = values[1];
var decrementer = setInterval(function(){
values[0] = parseInt(breaktimes[0].innerHTML);
values[1] = parseInt(breaktimes[1].innerHTML);
if (breaktimes[1].classList.contains('decrementing') !== true) {
clearInterval(decrementer);
}
values[1]--;
breaktimes[1].innerHTML = values[1];
if (values[1] === values[0]) {
window.alert('The counter has reached ' + values[1]);
clearInterval(decrementer);
}
}, 1000);
}
}
var buttons = document.getElementsByTagName('button');
var startStopButton = buttons[(buttons.length -1)];
for (var i = 0; (i+1) < buttons.length; i++) {
buttons[i].addEventListener('click',changeValue,false);
}
startStopButton.addEventListener('click',startStop,false);
<section>
<div>
<p class="breaktime">5</p>
<button id="inner1" type="button" class="increment">+</button>
<button id="inner2" type="button" class="decrement">-</button>
</div>
<div>
<p class="breaktime">25</p>
<button id="inner3" type="button" class="increment">+</button>
<button id="inner4" type="button" class="decrement">-</button>
</div>
<div>
<h3>Section</h3>
<button type="button" class="btn-Start-Stop">Start / Stop</button>
</div>
<div>
<p></p>
</div>
</section>
If you'd like to implement logic using constructors, you can bind events inside of initialization of your instance.
Here is reworked your code based on your html. But code could be improved, so Pomodoro instance can be able not only to decrease or increase, but do both functions.
Also some template engine can give you ability to easy define amount of increase/decrease blocks you want to add to your page.
I created a prompt box with a question. After answering, you receive the answer in a div created with JavaScript called id2. Now I am trying to place my id2 in front of id1 which is the parentNode. So it will show the answer above the first div id1. Can someone explain to me why it's not working?
<!DOCTYPE html>
<html>
<head>
<title>lab7</title>
<meta charset="utf-8" lang="en" name="my page" />
<style>
.class1 {
width: 100%;
height: 60px;
background-color: #BCC6CC;
}
</style>
<script type="text/javascript">
function loadQ() {
var firstdiv = document.createElement("div");
firstdiv.setAttribute("class", "class1");
firstdiv.setAttribute("id", "id1");
var jw = prompt("Which movie is number 1 Box Office 2015?","Jurassic World");
document.getElementById("id2").innerHTML ="" + jw + " Made $652,198,011 Total Gross Sales";
document.getElementById("id2").style.backgroundColor = "#786D5F";
var id1 = document.getElementByTagName("div")[0];
var parent1 = id1.parentNode();
var beforeME = document.getElementByTagName("id2");
parent1.insertBefore(id1, beforeME);
};
</script>
</head>
<body onload="loadQ()">
<div id="id1" class="class1">
<br>
<b>Top 2 Box Office Movie for 2015</b>
</div>
<div class="class2" id="id2">
</div>
</body>
</html>
There are at least two issues in your code:
document.getElementsByTagName needs an s (it returns multiple elements).
To get an object by id, you need to use document.getElementById.
I rewrote my code and made it more clear. So, each div id and class are define.
<script type="text/javascript">
function loadQ() {
var firstdiv = document.createElement("div");
firstdiv.setAttribute("class", "class1");
firstdiv.setAttribute("id", "id1");
firstdiv.style.backgroundColor = "#BCC6CC;";
document.getElementById('id1').innerHTML ="<h2 style='padding:20px;'>Top Box Office Movie 2015</h2>","<br><br>";
var seconddiv = document.createElement("div");
seconddiv.setAttribute("class", "class2");
seconddiv.setAttribute("id", "id2");
seconddiv.style.backgroundColor = "#786D5F";
var reper = document.getElementById('id1');
var parinte = reper.parentNode;
parinte.insertBefore(seconddiv, reper);
</script>
I am trying to use a link to clear a text input field. I am hiding and showing a memo field and and if the user puts text in the field and clicks "remove memo" link I want to text field to clear on click.
<html>
<head>
<script language="JavaScript">
function toggle(id) {
var state = document.getElementById(id).style.display;
if (state == 'block') {
document.getElementById(id).style.display = 'none';
} else {
document.getElementById(id).style.display = 'block';
}
}
oldTextAry = new Array();
function changeText (fieldObj, newTexStr) {
if (newTexStr == fieldObj.innerHTML) {
fieldObj.innerHTML = oldTextAry[fieldObj.id];
} else {
oldTextAry[fieldObj.id] = fieldObj.innerHTML;
fieldObj.innerHTML = newTexStr;
}
}
</script>
<style type="text/css">
<!--
#hidden1 {display: none;}
-->
</style>
</head>
<body>
<a href="###" onclick="toggle('hidden1'); changeText(this,'Remove Memo');" class="memo" >Add Memo</a>
</div>
<div id="hidden1"><div class="memo">Memo: <input type="text" id="ctlWorkflow_ctlMemo381" size="45" maxlength="32" name="ctlWorkflow:ctlMemo381"></div> </div>
</body>
</html>
I am stuck and cannot get the field to clear.
Use the below code in the click delegate. Sorry for the mistaken answer.
document.getElementById("ctlWorkflow_ctlMemo381").value = '';
Cheers