Updating array in Todo list in javascript - javascript

I have been trying every method to update an array in my todo list using Javascript. But I am stuck in update function. I have tried every method possible but nothing seems to work.
Can anyone please help?
I have been stuck in the Update function for days now.I have declared the ind as a global variable. Assigned value in Edit functiion and called it back in update function. But still not working. Not sure, what the exact way is to update my array todo list in JS.
Below is my code.
<!DOCTYPE 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.0">
<title>Arrays</title>
</head>
<script>
var arr = ["A", "B", "C"];
var ind;
function display() {
var dom = "<ul>";
for (i = 0; i < arr.length; i++) {
dom += "<li>" + arr[i] + "<input type='button' value='Edit' onclick='Edit(" + i + ")'></li>"
}
dom += "</ul>";
document.getElementById("do").innerHTML = dom;
}
function Selection(s) {
var ip = document.getElementById("input").value.trim();
var s;
switch (s) {
case 'op1':
arr.push(ip);
display();
break;
case 'op2':
arr.pop();
display();
break;
case 'op3':
arr.shift();
display();
break;
case 'op4':
arr.unshift(ip);
display();
break;
}
}
}
function Edit(ind) {
//alert(ind);
document.getElementById("editList").style.display = "Block";
document.getElementById("val").value = arr[ind];
ind = ind;
}
function update() {
Edit();
var updte = document.getElementById("val").value;
arr[ind] = updte;
}
</script>
<body onload="display()">
<h1>To Do List</h1>
<div id="do"></div>
Enter data : <input type="text" id="input"><br><br>
<input type="button" value="op1" onclick="Selection
('op1')">
<input type="button" value="op2" onclick="Selection('op2')">
<input type="button" value="op3" onclick="Selection('op3')">
<input type="button" value="op4" onclick="Selection('op4')">
<span id="select"></span>
<div id="editList" style="display:none">
<h2> Edit ToDo List</h2><br> To be updated: <input type="text" id="val"><br>
<input type="button" value="Update" onclick="update()">
</div>
</body>
</html>

Check at lines 46 and remove } symbol above edit function. You have 1 unnecessary symbol at this line

try to use let i in for (i = 0; i < arr.length; i++)
like this:
for (let i = 0; i < arr.length; i++) {

You need to have a way to know the actual ind when you click on the update button.
I have done it using dataset. Have a look at your edit and update functions below.
<!DOCTYPE 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.0">
<title>Arrays</title>
<script>
var arr = ["A", "B", "C"];
var ind;
function display() {
var dom = "<ul>";
for (i = 0; i < arr.length; i++) {
dom += "<li>" + arr[i] + "<input type='button' value='Edit' onclick='Edit(" + i + ")'></li>"
}
dom += "</ul>";
document.getElementById("do").innerHTML = dom;
}
function Selection(s) {
var ip = document.getElementById("input").value.trim();
var s;
switch (s) {
case 'op1':
arr.push(ip);
display();
break;
case 'op2':
arr.pop();
display();
break;
case 'op3':
arr.shift();
display();
break;
case 'op4':
arr.unshift(ip);
display();
break;
}
}
function Edit(ind) {
//alert(ind);
document.getElementById("editList").style.display = "Block";
document.getElementById("val").value = arr[ind];
document.getElementById("val").dataset.ind = ind
ind = ind;
}
function update() {
//Edit();
var updte = document.getElementById("val").value;
ind = document.getElementById("val").dataset.ind
arr[ind] = updte;
display()
}
</script>
</head>
<body onload="display()">
<h1>To Do List</h1>
<div id="do"></div>
Enter data : <input type="text" id="input"><br><br>
<input type="button" value="op1" onclick="Selection
('op1')">
<input type="button" value="op2" onclick="Selection('op2')">
<input type="button" value="op3" onclick="Selection('op3')">
<input type="button" value="op4" onclick="Selection('op4')">
<span id="select"></span>
<div id="editList" style="display:none">
<h2> Edit ToDo List</h2><br> To be updated: <input type="text" id="val"><br>
<input type="button" value="Update" onclick="update()">
</div>
</body>
</html>

Related

How to take user input as argument of function in JavaScript in order to implement Insertion Sort Algorithm?

Below is the function for insertion sort. I want that user should give the input from html form as an array elements instead of hard coding the elements of array. I have tried several techniques but in vain.
function insertionSort (inputArr) {
let length = inputArr.length;
for (let i = 1; i < length; i++) {
let key = inputArr[i];
let j = i - 1;
while (j >= 0 && inputArr[j] > key) {
inputArr[j + 1] = inputArr[j];
j = j - 1;
}
inputArr[j + 1] = key;
}
return inputArr;
};
let inputArr = [2,4,5,36,2,6,26,8,3,7]; // I want here user input which comes from html form instead of hard-coding elements of array like this
insertionSort(inputArr);
console.log(inputArr);
// Event listner
function getData() {
let userData = document.getElementById('data').value;
return userData;
}
<!DOCTYPE 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.0">
<title>Insertion Sort In JavaScript</title>
</head>
<body>
<h1>Insertion Sort in JavaScript</h1>
<form action="#">
<label for="data">Write Random Numbers</label>
<input type="text" name="data" id="data">
<button onclick="getData()">Submit</button>
</form>
<div id="printData"></div>
<script src="insertionsort.js"></script>

not able to display JAVASCRIPT RESULT on html

I am trying to make a function in JAVASCRIPT that calculates the HCF, in the VS CODE (MY CODE EDITOR) console it's showing the correct value, but I am trying to display the result on the page and it's not appearing and in the browser's console its showing maximum call stack exceeded.
The result of the if statement appears but when the if statement is false, the result of the else statement does not appear.
Here is my code:
function HCF(a, b) {
var answer = document.getElementById('answer');
let value1 = document.getElementById('value1').value;
let value2 = document.getElementById('value2').value;
a = value1;
b = value2;
var ans = 0;
if (a % b == 0) {
return answer.innerHTML = `HCF: ${b}`;
}
var remainder = a % b;
ans += HCF(b, remainder);
answer.innerHTML = `HCF: ${ans}`;
}
<!DOCTYPE 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.0">
<title>Maths Problem</title>
</head>
<body>
<h1>Value 1: </h1><input type="text" id="value1">
<h1>Value 2: </h1><input type="text" id="value2"><br><br>
<button type="submit" id="submit" onclick="HCF()">Get answer</button>
<h1 id="answer">HCF:</h1>
</body>
</html>
You need to separate out the code that calculates the HCF and which gets and displays values.
function HCF(a, b) {
if (a % b == 0) {
return b;
}
var remainder = a % b;
return HCF(b, remainder);
}
function getHCF() {
const a = document.getElementById('value1').value;
const b = document.getElementById('value2').value;
const answer = HCF(a, b);
document.getElementById('answer').innerHTML = `HCF: ${answer}`;
}
<h1>Value 1: </h1><input type="text" id="value1">
<h1>Value 2: </h1><input type="text" id="value2"><br><br>
<button type="submit" id="submit" onclick="getHCF()">Get answer</button>
<h1 id="answer">HCF:</h1>
</body>
I've separated your function into two functions. One function calls the other which is recursive and which returns the answer to the first function which then displays the results to the page.
function HCF() {
var answer = document.getElementById('answer');
let value1 = document.getElementById('value1').value;
let value2 = document.getElementById('value2').value;
answer.innerHTML = HCFHelper(value1, value2);
}
function HCFHelper(a, b) {
if (a % b == 0) {
return b;
}
return HCFHelper(b, a % b);
}
<!DOCTYPE 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.0">
<title>Maths Problem</title>
</head>
<body>
<h1>Value 1: </h1><input type="text" id="value1">
<h1>Value 2: </h1><input type="text" id="value2"><br><br>
<button type="submit" id="submit" onclick="HCF()">Get answer</button>
<h1 id="answer">HCF:</h1>
</body>
</html>

how to initialize a member of JS array?

I just wrote this in order to take n from user and also n names , and then print them on screen after clicking on button , but i cant initialize my array ...
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<script>
var n;
var i =0;
var names = [];
function mf1(){
n=parseInt(document.getElementById("n").value);
}
function mf2(){
if (i<n){
names[i]=document.getElementById("nam").value;
i++;
document.getElementById("rem").innerHTML=names[i];
}
}
</script>
inset n : <input type="text" id="n"> <button onClick="mf1()">take n</button>
insert name: <input type="text" id="nam"> <button onClick="mf2()"> take name</button>
<p id="rem"></p>
</body>
</html>
The problem is that in function mf2 you can't access names[i] because you increment i++ before.
var n;
var i = 0;
var names = [];
var input1 = document.getElementById("n");
var input2 = document.getElementById("nam");
function mf1(){
n = parseInt(input1.value);
console.log(n);
}
function mf2(){
if (i < n){
names[i] = input2.value;
console.log(names);
document.getElementById("rem").textContent = names[i];
i++;
}
}

Decrease input number in javascript

I just started learning javascript. I develop an input box that user enters a number in. so program decrease number to zero.
my problem is here; I enter a number and show same it in output, but show a decreasing number.
my JS code :
function test() {
var MyInput = parseInt(document.getElementById('HoursOfWork').value);
var Exp_MyInput = document.getElementById('output01').innerHTML = "Number: " + MyInput;
for (var i = 1; i < 4; i++) {
document.getElementById('output01').innerHTML = MyInput;
}
}
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="StyleSheet.css" />
<script src="Script.js"></script>
<title>EyeProctect Project</title>
</head>
<body>
<h1>Eye Protect</h1>
<h4>Keep Your Eyes safe</h4>
<input type="text" id="HoursOfWork" placeholder="Enter your hours of work ...." />
<button class="start" onclick=test()>Let's Go!</button>
<p id="output01"></p>
</body>
</html>
What am I do?
If you meant counting down from number provided in input field down to zero using for loop then you can work with this approach:
function test() {
var MyInput = parseInt(document.getElementById('HoursOfWork').value);
var output = document.getElementById('output01');
output.innerHTML = '';
for (var i = MyInput; i > 0; i--) {
output.innerHTML += "Number: " + i + "<br>";
}
}

Javascript ToDo list add item

New to coding having issues with my JS code. It was working for a the last few days and then im not sure what happened now its giving me an error on line (17) todos.push(task); Error says "todos.push() is not a funsction." Any help would be greatly appreciated.
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 = '<table>';
for(var i=0; i<todos.length; i++)
{
html += '<br><tr><strong>'+
'<input type="image" src="/Pictures/remove.png" class="remove" id="' + i +
'"></input>' + todos[i] + '</strong><input type="checkbox" name="cBox" store="checkbox1" id="isDone"><label for="cBox"</label></tr><br>';
};
html += '</table>';
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();
My HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
</head>
<body>
<img id="mainImg" src="\Pictures\mytodolist.jpg"
<form>
<div>
<img id="taskImg" src="\Pictures\tasks.jpg"
<br>
<br>
<input id="add" type="image" width='150' heigth='80' src="\Pictures\addButton.png" ></input>
<br>
<input id="task">
</div>
<div id="todos"></div>
<script src= "ToDo.js"></script>
<link rel= "stylesheet" type= "text/css" href="todoStyle.css"/>
</body>
</html>
Seems to be working fine here: http://codepen.io/ilanus/pen/xOXJXW you declare an Array in your get_todos() function return it, then add items to it todos.push(task);

Categories