We Keep Coding

hand over an Image Id

I am a Java Script beginner and would like to pass the id of an image to an HTML file. When I click on a link I want to get to a page (annotator) with the image.
This is the Js part:
link = changeIIIFInformation(iiif, 10, "default")
var figure = document.createElement('figure')
var figcaption = document.createElement('figcaption')
var linkToImage = document.createElement('a')
linkToImage.setAttribute('href', 'annotator')
linkToImage.innerHTML = label;
figcaption.appendChild(linkToImage);
var image = document.createElement('img');
image.setAttribute('src', link);
figure.appendChild(image)
figure.appendChild(figcaption)
div.appendChild(figure)
count += 1;
if (count >= max_num + offset) {
break;
}
And this is the HTML Code:
<div class="container-fluid">
<div class="row">
<div class="col-md-6" role="main">
Tablet:
<select id="images" onchange="loadVariants()"></select>
Side:
<select id="imageside" onchange="reinit(null)"></select>
<button id="saveAnnotations" onclick="saveTextAsFile(JSON.stringify(curanno),'json','anno')">Save Annotations</button>
<button id="saveInGit" onclick="commitData()">Save Annotation in Gitlab</button>
<button id="showTransliteration" onClick='document.getElementById("transliterationdialog").show();'>Show Transliteration</button>
<button id="showTranslation" onClick='document.getElementById("translationdialog").show();'>Show Translation</button>
<button id="showPaleoCode" onClick='document.getElementById("paleocodedialog").show();'>Show PaleoCodes</button>
<button id="showIndexedChars" onClick="highlightIndexedChars()">Highlight Indexed Chars</button>
<button onclick="showHideAnno()">Show/Hide Annotations</button>
<br/>
Tagsets: CharacterSet: <input type="radio" id="characterset">
LinguisticAnnotation: <input type="radio" id="linguisticset" />
</div>
</div>
</div>

Adding an edit button to an added task list item in JavaScript / JQuery?

I have tried numerous ways of editing a task added to the task list, but the code is not functioning. Any clue where the error is or if there is a simpler way to add an edit task button? I want to avoid simply making all the list items contenteditable=true, but rather want to be able to click an edit button to edit first. When I try to add an edit button to the '//call append method on $todoList' line, the button functions as a done/remove from list button, instead of working as an edit button to alter the list item.
var $addButton = $(".btn-primary");
var $removeButton = $(".btn-danger");
var $editButton = $(".btn-primary");
var $todoList = $(".uncomplete");
var $doneList = $(".completed");
//Take Text Input and Add <li> to To Do List
$addButton.on("click", function(){
//Creating object Variables
var $sort = $(".sort").val();
var $newTask = $(".newTask").val();
var $taskDescr = $(".taskDescr").val();
var $taskDate = $(".taskDate").val();
// var $category= $(".category").val();
var $category= $("input[type='radio'][name='category']:checked").val();
//var $importance = $("input[type='checkbox'][name='importance']:checked").val();
var $importance = $('<input type="checkbox" name="importance"/>').val();
var $newTaskString = $sort + ", " + $taskDescr + ", " + $newTask + ", " + $taskDate + ", " + $category + ", " + $importance + " ";
var $todoList = $(".uncompleted");
//call append method on $todoList
$todoList.append("<li>" + $newTaskString + "<button><span> Done</span></button><button><span> Remove</span></button></li>").addClass("todo");
//add styles to button added to DOM by append
var $span = $(".todo button span");
var $button = $(".todo button");
$button.addClass("btn btn-success");
$span.addClass("glyphicon glyphicon-ok");
$("input").val("");
})
//Edit existing task
//var id_counter
//var $task = $("<tr class='taskList' id='"+ id_counter +"'>")
//function myEdit(){
//}
$(function(){
$(document).on('click','.my-row .col-a3',function(){
let editable = $(this).prev('.col-a2').attr('contenteditable');
if(editable){
$(this).text('Edit');
$('.col-a2').css({'border': ''});
$(this).prev('.col-a2').removeAttr('contenteditable');
}
else{
$(this).text('Save');
$('.col-a2').css({'border': '1px solid'});
$(this).prev('.col-a2').attr('contenteditable','true');
}
})
});
<div class="list-wrap" contenteditable="false">
<div class="list-inner-wrap">
<h2 class="title">ToDo List</h2>
<h3 class="title">Add Task</h2>
<!--<h4>Task Name</h4>-->
<label for="sort">Sort Order:</label><input type="text" class="sort" name="sort" id="sort" value="" placeholder="A,B,C,etc.">
<br>
<label for="task-name">Task Name:</label><input type="text" class="newTask" name="task-name" id="task-name" value="" placeholder="My task...">
<br>
</form>
<br>
<button class="btn btn-primary">
<span class="glyphicon glyphicon-plus"> Add</span>
</button>
<!--Edit task button-->
<button class="edit" onclick="myEdit()">Edit Task</button>
<p id="demoedit"></p>
<br>
<div class="my-row">
<h3 class="title">To Do</h2>
<h6><i>Click task item to edit or modify</i></h6>
<!--Change color of editable task -->
<div id='div' contenteditable='false' oninput='change()'>
<ul class="uncompleted" contenteditable="false" id="id01">
<div class="col-a2">
<li>Need to be completed task
<button class="btn btn-success" a href="#" onclick="allUsersDiv()">
<span class="glyphicon glyphicon-ok"> Done</span>
</button>
<button class="btn btn-danger">
<span class="glyphicon glyphicon-remove"> Remove</span></button>
<!-- <div class="col-a3"><button>Edit</button>
</div>-->
<br>
</li></ul></div></div>
</div></div></div>
<br><br><br><br><br><br><br><br><br>
<h3 class="title">Completed Tasks</h2>
<ul class="completed" contenteditable="false">
<li>Completed Task<button class="btn btn-danger">
<span class="glyphicon glyphicon-remove"> Remove</span>
</button></li>
</ul>
</div>
<br>
<br>

How to save data after refreshing a page

Here is my script of to do list. I wanna add a new note to my ul list.
li > p > i, i, input :
var list = document.querySelector('.list');
document.querySelector('.add-btn').addEventListener('click', function(e){
e.preventDefault();
var input = document.querySelector('.add-input');
if(input.value !== '') {
var li = document.createElement('li');
firstP = document.createElement('p');
secondP = document.createElement('p');
firstIc = document.createElement('i');
secondIc = document.createElement('i');
input1 = document.createElement('input');
firstIc.className = 'fas fa-edit';
secondIc.className = 'fas fa-trash-alt';
input1.className = 'edit-note';
input1.setAttribute('type', 'text');
firstP.textContent = input.value;
secondP.appendChild(firstIc);
secondP.appendChild(secondIc);
li.appendChild(firstP);
li.appendChild(secondP);
li.appendChild(input1);
li.appendChild(li);
}
});
Here is HTML:
<div class='container'>
<h1>Note manager</h1>
<ul class="list">
<li>
<p>First note</p>
<p><i class="fas fa-edit"></i><i class="fas fa-trash-alt"></i></p>
<input type="text" name="" class="edit-note">
</li>
<li>
<p>Second note</p>
<p><i class="fas fa-edit"></i><i class="fas fa-trash-alt"></i></p>
<input type="text" name="" class="edit-note">
</li>
</ul>
<div class="add-notes">
<input type="text" name="" class="add-input" placeholder="Add a note..">
<button type="submit" class="add-btn"> Add</button>
</div>
</div>
And I wanna save added notes when I refresh the page. How can I do this ?
Should I use AJAX >?

Look at this line:
li.appendChild(li);
Here you add element as child of itself (of course it's not possible), looks like you want to do
list.appendChild(li);
instead.
EDIT:
Answer to your updated question: you should post your items to server and save them there or you can use localStorage to keep items in browser (link)

Dynamic add textbox input's will save to the database as one

So I have dynamic add textbox which is for COLOR, What I want is that if the user input a color then add 2 times for e.g. blue then red then yellow, so if the user submits it. It will go through the database as blue,red,yellow.
Here's the code with javascript function of adding textbox
function addElement() {
var ni = document.getElementById('myDiv');
var numi = document.getElementsByName('theValue');
var num = (numi.length + 1);
var newdiv = document.createElement('div');
var divIdName = 'my' + num + 'Div';
newdiv.setAttribute('id', divIdName);
newdiv.setAttribute('name', 'theValue');
newdiv.innerHTML = '<div class="form-group"><label for="color" class="control-label col-xs-4"><p class="left"></p></label> <div class="col-xs-7"> <input type=text id=' + num + 'value= ' + num + ' class= "req"><a class="btn btn-default bt" href="javascript:remove(' + divIdName + ')">Remove</a>';
ni.appendChild(newdiv);
}
function remove(dId) {
var ni = document.getElementById('myDiv');
ni.removeChild(dId);
}
<label for="color" class="control-label col-xs-4">
<p class="left">Color/s</p>
</label>
<div class="col-lg-1">
<input name="color[]" class="req" id="theValue[]" autocomplete = "off" required/>
<div id="myDiv"></div>
<p><a class="btn btn-default bt " role="button" href="javascript:addElement()" >Add Color</a></p>
<div style='clear: both;'></div>
</div>
</div>

I've tried to keep the code in the same vein as you already have, however, there are other things that you can do to improve this, but those will come in time, namely; using things such as knockout.js and html templates.
Also, I don't know how you are storing the data in the database, so matching the names/Ids of the form controls to what you will load and save from storage is another topic.
Note that when removing items, do not decrement the controlIndex - it is purely for unique identification. If you want finer control of the indexing, then arrays (and maybe knockout.js) may come into it.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
</head>
<body>
<p class="left">
<label for="color" class="control-label col-xs-4">Color/s</label>
</p>
<div class="col-lg-1">
<div id="myDiv">
<input name="color0" class="req" id="color0" autocomplete="off" required />
</div>
<p><a class="btn btn-default bt " role="button" href="javascript:addElement()">Add Color</a>
</p>
<div style='clear: both;'></div>
</div>
<script type="text/javascript">
// Create an index for the control Ids
// First one (and fixed on page) is 0 (color0).
var controlIndex = 0;
// Main Div for additional elements.
var myDiv = document.getElementById("myDiv");
function addElement() {
// Next index.
controlIndex++;
// Create new Div for new elements to be grouped in.
var newDiv = document.createElement("div");
newDiv.id = 'colorDiv' + controlIndex;
// Create new input element and set its properties.
var newElement = document.createElement("input");
newElement.id = newElement.name = 'color' + controlIndex;;
newElement.class = 'req';
newElement.setAttribute('required', 'required');
newElement.setAttribute('autocomplete', 'off');
// Create link to enable removal of new Div.
var newRemovalLink = document.createElement("a");
newRemovalLink.class = 'btn btn-default bt';
newRemovalLink.setAttribute('href', "javascript:remove('" + newDiv.id + "')");
newRemovalLink.innerHTML = ' X ';
// Add the elements to the new Div and add that to the main Div.
newDiv.appendChild(newElement);
newDiv.appendChild(newRemovalLink);
myDiv.appendChild(newDiv);
}
function remove(elementId) {
// Get the main Div.
var myDiv = document.getElementById('myDiv');
// Get the Div (or other element) to remove.
var element = document.getElementById(elementId);
// Remove it from the main Div.
myDiv.removeChild(element);
}
</script>
</body>
</html>

Appending input value to list using Javascript. To Do List

I am attempting to make a todo list.Not too sure why my code isn't working.Trying to get the value from the add item input to the To-Do ul.
HTML
<body>
<div class = 'container'>
<h3> Add Item </h3>
<input id='newTask' type='text'> <button id='addTaskButton'> Add </button>
<h3> To-Do </h3>
<ul id='toDo'>
<li> <input type='checkbox'<label> Learn Javascript </label> <button class='delete'> Delete </button> </li>
</ul>
<h3> Completed </h3>
<ul id='completedTasks'>
<li> <input type='checkbox' checked> <label> Buy Peanut Butter </label> <button class='delete'> Delete </button> </li>
</ul>
</div>
<script src = "todolist.js" type="text/javascript"></script>
</body>
Javascript
var taskInput = document.getElementById('newTask');
var addTaskButton = document.getElementById('addTaskButton');
var incompleteTasks = document.getElementById('toDo');
var completedTask = document.getElementById('completedTasks');
var addTask = function () {
var text = taskInput.value;
var li = '<li>' + text + '<li>';
incompleteTasks.appendChild(li);
}
addTaskButton.onclick = addTask;
Any help is greatly appreciated.
Thanks

appendChild accepts a DOMElement, not a string. You need to create an element first and then append it:
var addTask = function () {
var text = taskInput.value;
var li = document.createElement('li');
li.innerHTML = text;
incompleteTasks.appendChild(li);
}
Demo: http://jsfiddle.net/6wbsujL5/