appendChild Possibly Deleting Element? - javascript

I am trying to create a simple to-do list application JavaScript. I have written up JavaScript to basically take the value from an input element and pass it into a few functions.
I created a live example on CodePen, which you may view here: http://cdpn.io/hnBmD
Edit: Code also located below?
It seems like appendChild could possibly be deleting the "li" node that the parent function is creating? May someone please give me a reasonable explanation to this?
Note: I do have the JavaScript in a separate file and it is being loaded right before the ending body tags.
HTML:
<form>
<p><input type="text" id="inItemText" autofocus><button type="submit" id="submitButton">+</button></p>
</form>
<ul id="toDoList">
</ul>
JavaScript:
// Defining nodes.
var inItemText = document.getElementById("inItemText");
var submitButton = document.getElementById("submitButton");
// Once "enter" is pressed or click event is triggered, execute the function.
// The function below is basically checking the value of the input, to make sure the value is empty. If it isn't, it passes the value and the "ul" element node into the addNewItem function.
submitButton.onclick = function(){
var itemText = inItemText.value;
if (itemText == "" || itemText == " ") {
return false;
} else {
addNewItem(document.getElementById("toDoList"), itemText);
}
}
// Once the parameters are passed. This basically creates a "li" element, applies the value of the input element into the innerText of the "li" element created and then appends the "ul" with the "li" we just created. Also, it resets the value of the input so we can enter another checklist item in.
function addNewItem(list, itemText) {
var listItem = document.createElement("li");
listItem.innerText = itemText;
list.appendChild(listItem);
itemText = inItemText.value = "";
}
Thank you!

You need to return false from the onclick function after it calls addNewItem. Otherwise it will submit the form, which reloads the page.
submitButton.onclick = function(){
var itemText = inItemText.value;
if (itemText == "" || itemText == " ") {
return false;
} else {
addNewItem(document.getElementById("toDoList"), itemText);
return false;
}
}
DEMO
Or more simply:
submitButton.onclick = function(){
var itemText = inItemText.value.trim();
if (itemText !== "" || itemText == " ") {
addNewItem(document.getElementById("toDoList"), itemText);
}
return false;
}
Or, as one of the comments suggested, get rid of the form, then there's nothing to submit.

Remove the form if not necessary or just prevent the default form submit action.
submitButton.onclick = function (e) {
e.preventDefault();
var itemText = inItemText.value;
if (itemText == "" || itemText == " ") {
return false;
} else {
addNewItem(document.getElementById("toDoList"), itemText);
}
}

The button element in your HTML has a type attribute of submit. When its click event is triggered, the default action is performed which is to submit the form. You need to prevent this default behaviour.
var inItemText = document.getElementById("inItemText");
var submitButton = document.getElementById("submitButton");
submitButton.onclick = function(e){
e.preventDefault(); //prevent it from submitting
var itemText = inItemText.value;
if (itemText == "" || itemText == " ") {
return false;
} else {
addNewItem(document.getElementById("toDoList"), itemText);
}
}
function addNewItem(list, itemText) {
var listItem = document.createElement("li");
listItem.innerText = itemText;
list.appendChild(listItem);
}

Related

How come multiple classes not targeting in textarea?

I want to use validate_empty_field function for both classes .log and .log2. For some reason only .log is targeted but .log2 textarea is not. When you click on text area, if empty, both should show validation error if the other one is empty or if both empty.
$(document).ready(function() {
$('#field-warning-message').hide();
$('#dob-warning-message').hide();
var empty_field_error = false;
var dob_error = false;
// $('input[type=text], textarea')
$('.log, .log2').focusout(function () {
validate_empty_field();
});
function validate_empty_field() {
var field = $('.log, .log2, textarea').val();
// var first_name_regex = /^[a-zA-Z ]{3,15}$/;
if (field.length == '') {
$('#field-warning-message').show();
$('#field-warning-message').html("Please fill out form!");
empty_field_error = true;
} else if (field.length < 1) {
$('#field-warning-message').show();
$('#field-warning-message').html("Please fill out form!");
empty_field_error = true;
} else {
$('#field-warning-message').hide();
}
}
$('.verify-form').submit(function () {
empty_field_error = false;
dob_error = false;
validate_empty_field();
if ((empty_field_error == false) && (dob_error == false)) {
return true;
} else {
return false;
}
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea class="log"></textarea>
<textarea class="log2"></textarea>
<div id="field-warning-message"></div>
You should pass the event to the handler so you have access to the target
Change your event listener line to this:
$('.log1, .log2').focusout(validate_empty_field);
and then accept an argument in validate_empty_field
function validate_empty_field(ev){
var field = $(ev.target).val();
if(!field.length){
//textarea is empty!
}else{
//textarea is not empty!
}
}
in fact, you could do all of this in an anonymous function you have already created, and use the on method to stick with JQuery best practices:
$('.log1, .log2').on('focusout', function(){
if(!$(this).val().length){
//this textarea is empty
}else{
//this textarea is not empty!
}
});
And yes, adding one class to all textareas and swapping out .log1, .log2 for that class would be a better option.
EDIT: Final option should cover all requirements.
$('.log').on('focusout', function(){
$('.log').each(function(){
if(!$(this).val().length){
//this textarea is empty
}else{
//this textarea is not empty!
}
}
});

While loop to hide div elements

I am trying to create searchable content with the help of some JS yet am having trouble hiding the content when there is no input in the search field.
Here is my script:
var $searchContainer = $("#search");
var $contentBoxes = $searchContainer.find(".content");
var $searchInput = $searchContainer.find("#search-input");
var $searchBtn = $searchContainer.find("#search-btn");
$searchBtn.on("click", searchContent);
$searchInput.on("input", searchContent);
while($searchInput == null) {
for($contentBoxes) {
hide();
}
}
function searchContent(){
var userInput;
//Check if call comes from button or input change
if($(this).is(":button")){
userInput = $(this).siblings("input").val();
} else {
userInput = $(this).val();
}
//make the input all lower case to make it compatible for searching
userInput = userInput.toLowerCase();
//Loop through all the content to find matches to the user input
$contentBoxes.each(function(){
var headerText = $(this).find(".title").text();
var contentText = $(this).find(".description").text();
//add the title and content of the contentbox to the searchable content, and make it lower case
var searchableContent = headerText + " " + contentText;
searchableContent = searchableContent.toLowerCase();
//hide content that doesn't match the user input
if(!searchableContent.includes(userInput)){
$(this).hide();
} else {
$(this).show();
}
});
};
I understand a while loop could have a condition where if userInput is equal to null it would loop through each content box and hide the element.
Something like this maybe?
while($searchInput == null) {
$contentBoxes.each(function(){
hide();
}
}
Any help would be greatly appreciated.
You would need to update your userInput variable every cycle of the loop because the userInput value never gets updated. Nonetheless this not a good way to do this because you will block your entire application.
There is no need for a loop, just use an if statement. Also, because this function gets executed when the value of the input is changed, there is no need to use this.
You could put this block of code beneath your $contentBoxes.each function:
$contentBoxes.each(function(){
var headerText = $(this).find(".title").text();
var contentText = $(this).find(".description").text();
//add the title and content of the contentbox to the searchable content, and make it lower case
var searchableContent = headerText + " " + contentText;
searchableContent = searchableContent.toLowerCase();
//hide content that doesn't match the user input
if(!searchableContent.includes(userInput)){
$(this).hide();
} else {
$(this).show();
}
});
if (userInput === null) {
$contentBoxes.each(function(){
$(this).hide();
});
}
I think it will be work like this. You just check if search input !== null and dont hide any content in this case
if($searchInput != null && !searchableContent.includes(userInput)){
$(this).hide();
} else {
$(this).show();
}

How do I make both a button-click and a Enter key cause the same event?

I'm a newbie with JavaScript, so please bear with me. I am doing a To-Do List app which requires the user to enter a text in the text box and the item would be added when a button is clicked or when you it the Enter Key. I was able to do it with the Button Click and when I added the functionality for the Enter key, the button stopped working. Could you tell me what I'm doing wrong? Below is the java script code I have. Thank You.
var itemTextBox, newButton;
function addNewItem(list, itemText)
{
var listItem;
listItem = document.createElement("li");
listItem.innerText = itemText;
list.appendChild(listItem);
}
itemTextBox = document.getElementById("inputText");
itemTextBox.focus();
newButton = document.getElementById("addButton");
newButton.onclick = userInput();
itemTextBox.onkeyup = function (event) {
if (event.which === 13)
{
userInput();
itemTextBox.value = '';
}
};
function userInput()
{
var itemText;
itemText = itemTextBox.value;
if (itemText || itemText !== "")
{
addNewItem(document.getElementById("listOfItems"), itemText);
}
}

Show div on button click javascript

I have a div which is invisible by default. I want, when button click it shows up.
I have tried, but the problem is it shows for just seconds and then again hide.
Here is my code:
function validate() {
var ta = document.getElementById("t").value;
var oa = document.getElementById("oa").value;
var ob = document.getElementById("ob").value;
var oc = document.getElementById("oc").value;
var od = document.getElementById("od").value;
if (ta == "") {
alert("Title can't be null");
document.getElementById("t").style.borderColor = "#E34234";
return false;
}
if (oa == "" && ob == "") {
alert("Atleast two options are compulsory");
document.getElementById("oa").style.borderColor = "#E34234";
document.getElementById("ob").style.borderColor = "#E34234";
return false;
}
document.getElementById("g").style.visibility="visible";
return true;
}
Div id is 'g' and on submit button function validate() is called which validates the form and also show the div.
I'm taking a guess here and assuming that the form is submitting and hence you see the div being visible for a fraction of a second. You should use this code instead:
function validate() {
var ta = document.getElementById("t").value;
var oa = document.getElementById("oa").value;
var ob = document.getElementById("ob").value;
var oc = document.getElementById("oc").value;
var od = document.getElementById("od").value;
var flag = false; // initially assume that all is well
if (ta == "") {
alert("Title can't be null");
document.getElementById("t").style.borderColor = "#E34234";
flag = true; // something wrong, flag it
}
if (oa == "" && ob == "") {
alert("Atleast two options are compulsory");
document.getElementById("oa").style.borderColor = "#E34234";
document.getElementById("ob").style.borderColor = "#E34234";
flag = true; // something wrong, flag it
}
if(flag) // if something wrong, show div and disable form submit
{
document.getElementById("g").style.visibility="visible";
return false;
}
return true;
}
What we are doing here is creating a flag to check its value at the end. If it's true, it means there are errors on form and hence form submit should be disabled. If not, then there are no errors and form submit can proceed as usual.
Just return false instead of true. It will stop page refresh and the div won't be hidden. Also, if you need the page refresh, just pass a GET parameter with the url and when the page is loaded, check the get parameter and if its set, make the div visible by default.
function validate() {
var ta = document.getElementById("t").value;
var oa = document.getElementById("oa").value;
var ob = document.getElementById("ob").value;
var oc = document.getElementById("oc").value;
var od = document.getElementById("od").value;
if (ta == "") {
alert("Title can't be null");
document.getElementById("t").style.borderColor = "#E34234";
document.getElementById("g").style.visibility="visible";
return false;
}
if (oa == "" && ob == "") {
alert("Atleast two options are compulsory");
document.getElementById("oa").style.borderColor = "#E34234";
document.getElementById("ob").style.borderColor = "#E34234";
document.getElementById("g").style.visibility="visible";
return false;
}
return true;
}
This way, the div will be shown only if the validation has failed. If you want to submit the form as well as keep the div visible, you need to use the approach with get Parameter, or you need to use ajax.

How do I call a sub-function from within a function object in javascript

I've checked the related questions on stack overflow, but can't seem to find an answer to my predicament. I'm trying to use a plugin for javascript (Tag it! - Tag Editor) and I need to find a way to call one of its functions "create_choice()" EDIT: at some point after it has been initiated. Is there a way after calling :
$tagit = $("#mytags").tagit();
that I can then call something like
$tagit.create_choice('test123');
Here is a link for the example :
http://levycarneiro.com/projects/tag-it/example.html
Below is the code from the plugin if it is any help
(function($) {
$.fn.tagit = function(options) {
var el = this;
const BACKSPACE = 8;
const ENTER = 13;
const SPACE = 32;
const COMMA = 44;
// add the tagit CSS class.
el.addClass("tagit");
// create the input field.
var html_input_field = "<li class=\"tagit-new\"><input class=\"tagit-input\" type=\"text\" /></li>\n";
el.html (html_input_field);
tag_input = el.children(".tagit-new").children(".tagit-input");
$(this).click(function(e){
if (e.target.tagName == 'A') {
// Removes a tag when the little 'x' is clicked.
// Event is binded to the UL, otherwise a new tag (LI > A) wouldn't have this event attached to it.
$(e.target).parent().remove();
}
else {
// Sets the focus() to the input field, if the user clicks anywhere inside the UL.
// This is needed because the input field needs to be of a small size.
tag_input.focus();
}
});
tag_input.keypress(function(event){
if (event.which == BACKSPACE) {
if (tag_input.val() == "") {
// When backspace is pressed, the last tag is deleted.
$(el).children(".tagit-choice:last").remove();
}
}
// Comma/Space/Enter are all valid delimiters for new tags.
else if (event.which == COMMA || event.which == SPACE || event.which == ENTER) {
event.preventDefault();
var typed = tag_input.val();
typed = typed.replace(/,+$/,"");
typed = typed.trim();
if (typed != "") {
if (is_new (typed)) {
create_choice (typed);
}
// Cleaning the input.
tag_input.val("");
}
}
});
tag_input.autocomplete({
source: options.availableTags,
select: function(event,ui){
if (is_new (ui.item.value)) {
create_choice (ui.item.value);
}
// Cleaning the input.
tag_input.val("");
// Preventing the tag input to be update with the chosen value.
return false;
}
});
function is_new (value){
var is_new = true;
this.tag_input.parents("ul").children(".tagit-choice").each(function(i){
n = $(this).children("input").val();
if (value == n) {
is_new = false;
}
})
return is_new;
}
function create_choice (value){
var el = "";
el = "<li class=\"tagit-choice\">\n";
el += value + "\n";
el += "<a class=\"close\">x</a>\n";
el += "<input type=\"hidden\" style=\"display:none;\" value=\""+value+"\" name=\"item[tags][]\">\n";
el += "</li>\n";
var li_search_tags = this.tag_input.parent();
$(el).insertBefore (li_search_tags);
this.tag_input.val("");
}
};
String.prototype.trim = function() {
return this.replace(/^\s+|\s+$/g,"");
};
})(jQuery);
I've created a working example at http://jsfiddle.net/nickywaites/DnkBt/ but it does require making changes to the plugin.
Change
$.fn.tagit = function(options) { ...
to
$.fn.tagit = function(options,callback) { ...
Add
if (callback && typeof callback == 'function') {
callback();
}
after
String.prototype.trim = function() {
return this.replace(/^\s+|\s+$/g,"");
};
Now you can call a function of your choice right after the tagit call:
$tagit = $("#mytags").tagit(yourOptions, function(){
alert('hi')!
});
You can try to add
return this;
right after the function create_choice block. tagit will return itself and you can call make_choice or any function contained in .fn.tagit

Categories

Resources