Actually i am beginner in javascript and i am making a todo list with only javascript and given is my code..
function updateItemStage() {
var cbId = this.id.replace("cb_", "");
var itemText = document.getElementById("Item_" + cbId);
if (this.checked) {
itemText.className = "checked";
} else {
itemText.className = "";
}
}
function addNewItem(list, itemText) {
totalItems++;
var listItem = document.createElement("li");
var checkBox = document.createElement("input");
checkBox.type = "checkbox";
checkBox.onclick = updateItemStage;
checkBox.id = "cb_" + totalItems;
var span = document.createElement("span");
span.innerHTML = itemText;
span.id = "Item_" + totalItems;
listItem.appendChild(checkBox);
listItem.appendChild(span);
list.appendChild(listItem);
}
var totalItems = 0;
var btnNew = document.getElementById("btnAdd");
btnNew.onclick = function() {
var todoInput = document.getElementById("todoInput")
var itemText = todoInput.value;
if(!itemText || itemText == "") {
return false;
}
addNewItem(document.getElementById("todolist"), itemText);
};
Using this code i successfully create a todo list but in this code i didn't get what is the main role and work of this keyword..
can anyone help me please to understand this problem ???????????
The this keyword is the element where your event happens
var checkBox = document.createElement("input");
checkBox.type = "checkbox";
checkBox.onclick = updateItemStage;
In your case, this is the checkBox which you clicked.
Related
this is the function I have written which will be executed when you click the button('create'). but somehow it is not creating the element.
It gets the value of the text written in the input tag using value attribute.
function create() {
let text1 = document.getElementById('input').value;
if (text1.trim() == "" || text1.trim() == null){
return false;
}
else{
document.getElementById("input").value = "";
}
let li = document.createElement('li');
li.setAttribute('class', 'todo');
document.getElementById('list').appendChild(li);
let p1 = document.createElement('p');
p1.setAttribute('class', 'text');
let teks = document.createTextNode(text1);
p1.appendChild(teks);
li.appendChild(p1);
let btn1 = document.createElement('button');
btn1.innerHTML = 'Edit';
btn1.setAttribute('class', 'buttons1');
btn1.setAttribute('onclick', 'edit()')
let btn2 = document.createElement('button');
btn2.innerHTML = 'Delete';
btn2.setAttribute('class', 'buttons2');
btn1.setAttribute('onclick', 'delete()')
li.appendChild(btn1);
li.appendChild(btn2);
}
I Have created a modal inside the listview having input fields and select element. This list is shown up in webview of android. When I am clicking the input field, I am able to change the value inside it but when I am clicking the select field nothing happens even though I have the data inside that select list and even it is focussed by click listener. Can anyone please help me with it?
I am sharing the sample code:-
var modalInList = function(){
var originalList = document.getElementsByClassName("tt-menu");
var divElement = document.createElement("div")
divElement.id = "divToAdd";
var listElement = document.createElement("li");
listElement.id = "listToAdd";
var inputFieldForDose = document.createElement("input");
var inputFieldForFrequency = document.createElement("select");
var inputFieldForDays = document.createElement("input");
var take = document.createElement("span");
var tablet = document.createElement("span");
var forData = document.createElement("span");
var days = document.createElement("span");
take.innerHTML = "Take"
tablet.innerHTML = "Tablet"
forData.innerHTML = "for"
days.innerHTML = "Days"
divElement.appendChild(take);
inputFieldForDose.id = "doseList";
inputFieldForFrequency.id = "frequencyList";
inputFieldForDays.id = "daysList";
inputFieldForDose.contentEditable = 'true'
inputFieldForFrequency.contentEditable = 'true'
inputFieldForDays.contentEditable = 'true'
inputFieldForDose.style.color = "black";
inputFieldForDose.style.width = "45px";
inputFieldForDose.style.marginLeft = "1px";
inputFieldForDose.style.marginRight = "1px";
inputFieldForDose.style.textAlign = "center";
inputFieldForDose.style.padding = "1px";
inputFieldForDose.style.border = "solid 1px #c9c9c9";
inputFieldForFrequency.style.color = "black";
inputFieldForFrequency.style.width = "auto";
inputFieldForFrequency.style.marginLeft = "1px";
inputFieldForFrequency.style.marginRight = "1px";
inputFieldForFrequency.style.padding = "1px";
inputFieldForFrequency.style.border = "solid 1px #c9c9c9";
inputFieldForDays.style.color = "black";
inputFieldForDays.style.width = "45px";
inputFieldForDays.style.marginLeft = "1px";
inputFieldForDays.style.marginRight = "1px";
inputFieldForDays.style.marginTop = "2px";
inputFieldForDays.style.textAlign = "center";
inputFieldForDays.style.padding = "1px";
inputFieldForDays.style.border = "solid 1px #c9c9c9";
inputFieldForDose.setAttribute('type', 'number');
inputFieldForDays.setAttribute('type', 'number');
if (inputFieldForFrequency.selectedIndex == -1) {
var start = '';
var len = prescriptionFrequenciesData.length;
for (var i = 0; i < len; i++) {
start += '<option value="' + prescriptionFrequenciesData[i].value + '">' + prescriptionFrequenciesData[i].title;
}
inputFieldForFrequency.innerHTML = start;
}
inputFieldForFrequency.required = true;
divElement.appendChild(inputFieldForDose);
divElement.appendChild(tablet);
divElement.appendChild(inputFieldForFrequency);
divElement.appendChild(forData);
divElement.appendChild(inputFieldForDays);
divElement.appendChild(days);
listElement.appendChild(divElement);
originalList[0].prepend(listElement);
inputFieldForDose.addEventListener('click', function(){
editFieldCheck = true;
console.log("clicked");
inputFieldForDose.focus();
$(".tt-menu").show();
inputFieldForDose.focus();
})
inputFieldForFrequency.addEventListener('click', function(){
editFieldCheck = true;
console.log("clicked");
inputFieldForFrequency.focus();
$(".tt-menu").show();
inputFieldForFrequency.focus();
})
inputFieldForDays.addEventListener('click', function(){
editFieldCheck = true;
console.log("clicked");
inputFieldForDays.focus();
$(".tt-menu").show();
inputFieldForDays.focus();
})
}
Here inputFieldForDays is the element for element. and $(".tt-menu") is used for bloodhound.js list
Here's the code for the dynamically created checkboxes. How do I add line breaks to the code so that I have one checkbox per line? I tried to do document.createElement("br") and appending it after get.appendChild(label) but it didn't work.
function setCheckboxes(browser) {
var get = document.getElementById("get");
if (browser == "courses") {
for (var i = 1; i < coursesGetKeys.length; i++) {
var checkBox = document.createElement("input");
var label = document.createElement("label");
checkBox.type = "checkbox";
checkBox.value = coursesGetKeys[i];
checkBox.name = "r";
label.textContent = setOpt(coursesGetKeys[i], browser);
get.appendChild(checkBox);
get.appendChild(label);
//label.appendChild(document.createTextNode(setOpt(validCoursesKeys[i], dataset)));
}
}
if (browser == "rooms") {
for (var i = 1; i < validRoomsKeys.length; i++) {
var checkBox = document.createElement("input");
var label = document.createElement("label");
checkBox.type = "checkbox";
checkBox.value = validRoomsKeys[i];
checkBox.name = "r";
label.textContent = setOpt(validRoomsKeys[i], browser);
get.appendChild(checkBox);
get.appendChild(label);
//label.appendChild(document.createTextNode(setOpt(validCoursesKeys[i], dataset)));
}
}
};
You already know how to create an input:
var checkBox = document.createElement("input");
and how to append it:
get.appendChild(checkBox); // get is the parent element you selected at the top of your code
So your first hunch was correct, you can also do this:
var br = document.createElement("br");
get.appendChild(br);
which creates a br element, and then also appends it to the "get" parent.
I just went over my code with an experienced developer and he made a lot of very helpful changes, but, unfortunately, the code did not save properly and I lost all the edits!!!
The main thing he helped with was eliminating some of my code repetition. I have two functions that share a lot of code: //Add item to To-Do List with "Add" Button AND //Add item to list with ENTER KEY.
What he did for this was to add the bulk of these functions to the //Add new item to To-Do List function, so the other functions were simpler. I forgot how he did this, though! If anyone can help I would really appreciate it!
//Add new item to To-Do List
function addNewItem(list, itemText) {
totalItems++;
var listItem = document.createElement("li");
var checkbox = document.createElement("input");
checkbox.type = "checkbox";
checkbox.id = "cb_" + totalItems;
checkbox.onclick = updateStatus;
var span = document.createElement("span");
span.id = "item_" + totalItems;
span.textContent = itemText;
var spanDelete = document.createElement("span2");
spanDelete.id= "spanDelete_" + totalItems;
spanDelete.textContent = "DELETE";
spanDelete.onclick = deleteItem;
var spanEdit = document.createElement("span3")
spanEdit.id = "editId_" + totalItems;
spanEdit.textContent = "EDIT";
spanEdit.onclick = editItem;
listItem.appendChild(checkbox);
listItem.appendChild(span);
listItem.appendChild(spanDelete);
listItem.appendChild(spanEdit);
list.appendChild(listItem);
}
//Add item to list with ENTER KEY
var totalItems = 0;
var inItemText = document.getElementById("inItemText");
inItemText.focus();
inItemText.onkeyup = function(event) {
if (event.which === 13) {
var itemText = inItemText.value;
if (!itemText || itemText === "") {
return false;
}
addNewItem(document.getElementById("todoList"), itemText);
inItemText.focus();
inItemText.select();
}
}
//Add item to To-Do List with "Add" Button
var btnNew = document.getElementById("btnAdd");
btnNew.onclick = function() {
var itemText = inItemText.value;
if (!itemText || itemText === "") {
return false;
}
addNewItem(document.getElementById("todoList"), itemText);
inItemText.focus();
inItemText.select();
}
Here is the Fiddle: https://jsfiddle.net/Rassisland/7bkcLfhu/
To avoid code duplication, save your function to a variable, and then reference it using as many event handlers are applicable. The important lesson here is you don't always need to use anonymous functions.
;(function(){
"use strict";
var button = document.getElementById('button');
var doStuff = function(event){
// do some stuff
alert('i did some stuff');
};
document.addEventListener('keypress',doStuff);
button.addEventListener('click',doStuff);
})();
<button id="button" name="button">i am a button</button>
<textarea id="textarea" name="textarea">press a key</textarea>
I have developed a mobile webpage using HTML5+JS. I added a button dynamically to webpage. But when i added onclick functionality to that button, it's not working.
My Html code is;
<head><script>
var myarray = ['a','b','c','d','e','f'];
var arr = document.getElementById('content');
for(i=0;i<myarray.length;i++)
{
var table = document.createElement('table');
table.className = 'table';
var tr = document.createElement('tr');
var td = document.createElement('td');
var Btn = document.createElement('input');
Btn.type = 'button';
Btn.className = 'Btn';
Btn.value = 'VOTE';
Btn.id = myarray[i];
Btn.onclick = function(){
alert("You have Selected" + " " + this.id);
};
td.appendChild(Btn);
tr.appendChild(td);
table.appendChild(tr);
arr.appendChild(table);
}
</script>
<style>
.table { width:100%;height:70px;}
.Btn { margin-top:3px;border-radius:0;font-size:15px;height:30px;width:100px; color:#FFFFFF; margin-left:auto;margin-right:auto;display:block; }
</style></head>
<body><section id='content'></section></body>
It's not the onclick that's the problem. The problem is you are trying to get the #content element before it is loaded/rendered.
The solution is to wrap the code in window.onload which ensures the code will only execute when the elements in the page are loaded and ready for use:
window.onload = function () {
var myarray = ['a', 'b', 'c', 'd', 'e', 'f'];
var arr = document.getElementById('content');
for (i = 0; i < myarray.length; i++) {
var table = document.createElement('table');
table.className = 'table';
var tr = document.createElement('tr');
var td = document.createElement('td');
var Btn = document.createElement('input');
Btn.type = 'button';
Btn.className = 'Btn';
Btn.value = 'VOTE';
Btn.id = myarray[i];
Btn.onclick = function () {
alert("You have Selected" + " " + this.id);
};
td.appendChild(Btn);
tr.appendChild(td);
table.appendChild(tr);
arr.appendChild(table);
}
};
The problem is your code is not running on dom ready
window.onload = function (){
var myarray = ['a','b','c','d','e','f'];
var arr = document.getElementById('content');
for(i=0;i<myarray.length;i++)
{
var table = document.createElement('table');
table.className = 'table';
var tr = document.createElement('tr');
var td = document.createElement('td');
var Btn = document.createElement('input');
Btn.type = 'button';
Btn.className = 'Btn';
Btn.value = 'VOTE';
Btn.id = myarray[i];
Btn.onclick = function(){
alert("You have Selected" + " " + this.id);
};
td.appendChild(Btn);
tr.appendChild(td);
table.appendChild(tr);
arr.appendChild(table);
}
}
Demo: Plunker