I have made a little javascript to-do app in order to get better at the language. I am trying to create a counter which increments each time a task is added to the ordered list, but it does not work. Here is my code:
var button = document.getElementById('add-button');
button.addEventListener('click', function() {
var item = document.getElementById('input').value;
var text = document.createTextNode(item);
var newItem = document.createElement('li');
newItem.appendChild(text);
document.getElementById('todoList').appendChild(newItem);
var count = 0;
count++;
document.getElementById('counter').innerHTML = count;
var removeTask = document.createElement('img');
removeTask.setAttribute('src', '/images/trash.jpg');
removeTask.setAttribute('id', 'trash');
removeTask.addEventListener('click', function() {
newItem.parentNode.removeChild(newItem);
});
newItem.appendChild(removeTask);
});
<div class="header">
<form>
<h2>Todo App</h2>
<p>Add a new todo</p>
<input type="text" id="input" placeholder="Enter an activity......">
<button type="button" id="add-button">Add Task</button>
</form>
</div>
<ol id="todoList">
<h1>Things to do:</h1>
<div id="counter">0</div>
</ol>
Right now it increments to 1 when one clicks but it ends there. I tried making a for loop that loops until the length of the newItem but that did not work at all. How can I make it increment on each time an item is added?
You need to define count outside of the scope of the event listener, otherwise you will always increment 0 by 1 for every item added (and 0+1 is always 1). Put the declaration outside of the listener, and increment that value:
var button = document.getElementById('add-button');
var count = 0;
button.addEventListener('click', function() {
var item = document.getElementById('input').value;
var text = document.createTextNode(item);
var newItem = document.createElement('li');
newItem.appendChild(text);
document.getElementById('todoList').appendChild(newItem);
count++;
document.getElementById('counter').innerHTML = count;
var removeTask = document.createElement('img');
removeTask.setAttribute('src', '/images/trash.jpg');
removeTask.setAttribute('id', 'trash');
removeTask.addEventListener('click', function() {
newItem.parentNode.removeChild(newItem);
});
newItem.appendChild(removeTask);
});
<div class="header">
<form>
<h2>Todo App</h2>
<p>Add a new todo</p>
<input type="text" id="input" placeholder="Enter an activity......">
<button type="button" id="add-button">Add Task</button>
</form>
</div>
<ol id="todoList">
<h1>Things to do:</h1>
<div id="counter">0</div>
</ol>
Related
I have a box 2 x 2 using flex property with number 0 inside each box, and a button to click
function click() {
var id = "item-";;
for(var i = 1; i <= 6; i++) {
id = id + i;
var element = document.getElementById(id);
var value = element.innerHTML;
value++;
document.getElementById(id).innerHTML = value;
}
}
<div class="flex-container">
<div class="container-1">
<div id="item-1">0</div>
<div id="item-2">0</div>
<div id="item-3">0</div>
</div>
<div class="container-2">
<div id="item-4">0</div>
<div id="item-5">0</div>
<div id="item-6">0</div>
</div>
</div>
<button class="btn" onclick="click()">Click</button>
I want to create a function click() that if I click a button then the number inside the box will increase, but not all numbers in all boxes. I want the number increasing box by box.
But my function only increases the value in the first box. Can someone let me know what should I do, please?
Currently, first iteration of the for () will work because id will become item-1, but the second iteration you will create the new id, but you just append i, so it becomes item-12 instead of item-2
Just only remember the id and prefix it with item- when you use it. Then after each press, update the innerHTML and increase the counter, or reset to 1 if we've just updated the last <div>
var currentIndex = 1;
function incrementButton() {
let element = document.getElementById('item-' + currentIndex);
element.innerHTML = ++element.innerHTML;
currentIndex = (currentIndex === 6) ? 1 : ++currentIndex;
}
<div class="flex-container">
<div class="container-1">
<div id="item-1">0</div>
<div id="item-2">0</div>
<div id="item-3">0</div>
</div>
<div class="container-2">
<div id="item-4">0</div>
<div id="item-5">0</div>
<div id="item-6">0</div>
</div>
</div>
<button class="btn" onclick="incrementButton()">Click</button>
I work currently on my todo list.
I manged to get the text value from my input but i dont now how to add and element with the text value inside the text area. I want to add the text from my input inside the textarea in the undordered list.
Green is the input field and i want to get it from there in the white field
//query select to get button
let btn = document.querySelector('.add');
// selector to selct undorder list inside todotex
const ul = document.querySelector('.list');
//selector for input
const input = document.querySelector('input');
// eventlistner by button clicked
btn.addEventListener('click', function() {
var txt = input.value;
let li = document.createElement('li').innerHTML(txt);
ul.append(li);
});
<div class="card">
<div class="todoheader">TODO List</div>
<div class="todotext"></div>
<ul class="list">
</ul>
<div class="addtodo">
<button class="add" type="button"> + </button>
<input type="text" class="input" placeholder="add todo"></input>
</div>
</div>
As comment by #CBroe.
Replace innerHTML(txt);to innerHTML = txt;
https://jsfiddle.net/Memorynotfound/obhq8x50/
I found this JSFiddle that might help. Google is your best friend.
This guide explains it:
https://memorynotfound.com/dynamically-addremove-items-list-javascript/
function addItem(){
var ul = document.getElementById("dynamic-list");
var candidate = document.getElementById("candidate");
var li = document.createElement("li");
li.setAttribute('id',candidate.value);
li.appendChild(document.createTextNode(candidate.value));
ul.appendChild(li);
}
function removeItem(){
var ul = document.getElementById("dynamic-list");
var candidate = document.getElementById("candidate");
var item = document.getElementById(candidate.value);
ul.removeChild(item);
}
<ul id="dynamic-list"></ul>
<input type="text" id="candidate"/>
<button onclick="addItem()">add item</button>
<button onclick="removeItem()">remove item</button>
I am trying to add an increasing count number when a button is clicked, within the container <div>.
My code is not working, what am I missing?
let taskCounter = 0;
let addTaskFunction = () => {
const container = document.querySelector(".container");
taskCounter++;
let counterInDiv = document.createElement(`<div> ${taskCounter} </div>`);
container.appendChild(counterInDiv);
};
document.getElementById('addTask').addEventListener("click", () => {
addTaskFunction();
});
<h1>Your tasklist for today</h1>
<div class="container">
<div class="inputPart">
<input id="taskInput" value="" placeholder="Fill in the following task here" />
<button id="addTask">Add task</button>
<button id="removeAllTasks">Delete tasks</button>
</div>
</div>
You need to use the tag name (div) for document.createElement then set the innerHTML instead of using the actual HTML code.
let taskCounter = 0;
let addTaskFunction = () => {
const container = document.querySelector(".container");
taskCounter++;
let counterInDiv = document.createElement("div"); // <--HERE
counterInDiv.innerHTML = taskCounter;
container.appendChild(counterInDiv);
};
document.getElementById('addTask').addEventListener("click", () => {
addTaskFunction();
});
<body>
<h1>Your tasklist for today</h1>
<div class="container">
<div class="inputPart">
<input id="taskInput" value="" placeholder="Fill in the following task here" />
<button id="addTask">Add task</button>
<button id="removeAllTasks">Delete tasks</button>
</div>
</div>
<script src="app.js"></script>
</body>
I believe that this is the code you want:
let taskCounter = 1;
const taskList = document.getElementById("taskList");
const addTaskBtn = document.getElementById("addTask");
addTaskBtn.addEventListener("click", () => {
let task = document.getElementById("taskInput").value;
let counterInDiv = document.createElement("div");
counterInDiv.textContent = `${taskCounter++}: ${task}`;
taskList.appendChild(counterInDiv);
});
const deleteTasksBtn = document.getElementById("removeAllTasks");
deleteTasksBtn.addEventListener("click", () => {
taskList.innerHTML = "";
taskCounter = 1;
});
<h1>Your tasklist for today</h1>
<div class="container">
<div class="inputPart">
<input id="taskInput" placeholder="Fill in the following task here" />
<button id="addTask">Add task</button>
<button id="removeAllTasks">Delete tasks</button>
</div>
<div id="taskList"></div>
</div>
I made a few changes:
You do not need a function for the event listener, you can put the code inside an anonymous function that is passed to the event listener
taskCounter should start at 1, not 0
If you want the delete tasks button to work, then you should put the tasks inside a different container that can be easily cleared. I used one with the ID of "taskList"
document.querySelector() only selects a single element, but you gave it a class of "container". If multiple <div>s have the class "container", then you will run into problems.
document.createElement takes a tag name as the parameter, not HTML code. You should use document.createElement("div") then set the .textContent to whatever you want.
I have tried a bunch of ways to get this to work. I'm not a coder, and I have a frankensteined abomination of a counter program I put together as a replacement for our expensive counters that kept breaking on us (basically you input a value at the start of the day, and based on that value a calculation is done for the GOAL for the day).
I now want to add a GOAL BY LUNCH field/display that - however simply doing something like
var lunchgoal = goal * 0.69;
And then putting it on the page like I have with the goal field, does not seem to work.
I can either get it to display 0 - which seems like its displaying just the basic 0 value of goal before it is being incremented, or NaN - not a number.
So I thought I need to convert it to a number before multiplying it, but I nothing has worked for me for that. Right now I'm guessing it may be a matter of where they are contained on the page? I find that part of this confusing honestly. Any help is much appreciated, I would have thought this would be fairly simple!
Thank you!
HTML
<html>
<style>
body {background-color: Black;}
p {color: white;}
</style>
<div class="container">
<p> SAMS VALUE: <span id="output"> </span>
</p>
<p style="font-size:110px"> GOAL: <span id="output2"> </span>
</p>
<button style="background-color:white;width:20%;height:15%;font-size: 60px" type="button" onClick="onClick()">ACTUAL</button>
<p style="font-size:110px">Actual Count: <span id="clicks">0</span>
</p>
<div class="row">
<div class="col-sm-4"/>
<div class="col-sm-4">
<div id="timeContainer" class="well well-sm">
<time id="timerValue"/>
</div>
<div id="timerButtons">
<button id="start" class="btn btn-success" disabled="disabled">START</button>
<button id="stop" class="btn btn-danger">STOP</button>
<button id="reset" class="btn btn-default">RESET</button>
</div>
<div class="col-sm-4 col-sm-4 col-md-4"/>
</div>
</div>
</div>
</html>
Script
<script type="text/javascript">
document.addEventListener("keyup", function(event) {
if (event.keyCode === 109) {
event.preventDefault();
clicks += 1;
document.getElementById("clicks").innerHTML = clicks;
}
});
document.addEventListener("keyup", function(event) {
if (event.keyCode === 107) {
event.preventDefault();
document.getElementById("stop").click();
}
});
var clicks = 0;
function onClick() {
clicks += 1;
document.getElementById("clicks").innerHTML = clicks;
};
const input = parseInt(prompt("Enter a SAMS number: "));
var SAMSINPUT = input;
console.log(SAMSINPUT);
document.getElementById('output').innerHTML = SAMSINPUT;
var goal = 0;
var output2 = document.getElementById('output2');
//set interval for GOAL calculation
var samsInterval = setInterval(function doIncrement() {
if (clear == false) {
goal += 1;
output2.innerHTML = goal.toString();
}
}, SAMSINPUT * 1000);
var timerDiv = document.getElementById('timerValue'),
start = document.getElementById('start'),
stop = document.getElementById('stop'),
reset = document.getElementById('reset'),
clear = false,
t;
</script>
You have to do it in loop where goal is changing & you want this to change as well.otherwise it just stays on 0. i shortened the timer for demo purpose
document.addEventListener("keyup", function(event) {
if (event.keyCode === 109) {
event.preventDefault();
clicks += 1;
document.getElementById("clicks").innerHTML = clicks;
}
});
document.addEventListener("keyup", function(event) {
if (event.keyCode === 107) {
event.preventDefault();
document.getElementById("stop").click();
}
});
var clicks = 0;
function onClick() {
clicks += 1;
document.getElementById("clicks").innerHTML = clicks;
};
const input = parseInt(prompt("Enter a SAMS number: "));
var SAMSINPUT = input;
// console.log(SAMSINPUT);
document.getElementById('output').innerHTML = SAMSINPUT;
var goal = 0;
var output2 = document.getElementById('output2');
//set interval for GOAL calculation
var samsInterval = setInterval(function doIncrement() {
if (clear == false) {
goal += 1;
output2.innerHTML = goal.toString();
var lunchGoalNumber = goal * 0.69;
var output3 = document.getElementById("output3")
output3.innerHTML = lunchGoalNumber;
}
}, SAMSINPUT * 25);
var timerDiv = document.getElementById('timerValue'),
start = document.getElementById('start'),
stop = document.getElementById('stop'),
reset = document.getElementById('reset'),
clear = false;
<div class="container">
<p> SAMS VALUE: <span id="output"> </span></p>
<p style="font-size:50px"> GOAL: <span id="output2"> </span></p>
<p style="font-size:50px"> Lunch/GOAL: <span id="output3"> </span></p>
<button style="background-color:white;width:35%;height:15%;font-size: 60px" type="button" onClick="onClick()">ACTUAL</button>
<p style="font-size:50px">Actual Count: <span id="clicks">0</span></p>
<div class="row">
<div class="col-sm-4"></div>
<div class="col-sm-4">
<div id="timeContainer" class="well well-sm">
<time id="timerValue"></time>
</div>
<div id="timerButtons">
<button id="start" class="btn btn-success" disabled="disabled">START</button>
<button id="stop" class="btn btn-danger">STOP</button>
<button id="reset" class="btn btn-default">RESET</button>
</div>
<div class="col-sm-4 col-sm-4 col-md-4"></div>
</div>
</div>
</div>
</body>
I just want my item to be added to the list.
I have tried putting "constant value" instead of candidate.value; then the value is getting displayed.
<div class="card-body">
<ul id="dynamic-list"></ul>
<input type="text" id="candidate" />
<button onclick="addItem()">add item</button>
<button onclick="removeItem()">remove item</button>
<script type="text/javascript">
function addItem() {
var ul = document.getElementById("dynamic-list");
var candidate = document.getElementById("candidate");
var li = document.createElement("li");
li.setAttribute('id', candidate.value);
li.appendChild(document.createTextNode(candidate.value));
ul.appendChild(li);
}
function removeItem() {
var ul = document.getElementById("dynamic-list");
var candidate = document.getElementById("candidate");
var item = document.getElementById(candidate.value);
ul.removeChild(item);
}
</script>
</div>
The item should be added by clicking the “add item” button, but it is getting added as undefined.
Here’s a screenshot of the IDE: