I have this javascript code and I want to append a text at the beginning or at the end of the life story when someone enter a text in the text area and click one the Append A or B button. I also want to delete the last paragraph in the list when the click on the delete button.
var par;
$(document).ready(function () {
$(document).on('click', 'a', function(e){
e.preventDefault;
if($(this).text() === "Add Though") {
$(this).text("Hide");
$(document).find($(this).attr('data-target')).fadeIn(2000).show();
}
else if ($(this).text() === "Show full story") {
$(this).text("Hide some");
$(document).find($(this).attr('data-target')).fadeIn(1800).show();
}
else if ($(this).text() === "Hide some") {
$(this).text("Show full story");
$(document).find($(this).attr('data-target')).slideDown().hide();
}
else {
$(this).text("Add Though");
$(document).find($(this).attr('data-target')).slideUp().hide();
}
});
document.getElementById("delete").onclick = dele ;
});
var dele = function () {
var par = $("story").getElementsByTagName("p");
var getStory = $("story");
var size = par.length;
if (size > 0) {
getStory.removeChild(par[size - 1]);
}
};body {
width: 80%;
align-content: center;
margin: auto;
border: solid gray;
}
#nlist {
text-align: center;
font-family: inherit;
background-color: gray;
text-transform: uppercase;
font-size: 23px;
align-content: center;
}
#nlist a:hover {
color: white;
}
#header {
text-align: center;
font-family: fantasy;
font-size: 100%;
height: 10%;
}
article {
text-align: center;
text-align: left;
}
article img {
float: right;
margin: 3em 0 1em 1em;
width: 20%;
border: 1px solid black;
}
section{
text-align: center;
padding: 10px;
}
div.hide {
display: none;
}
#newText {
width: 100%;
height: 50px;
}
div.newStory {
display: none;
width: 60%;
padding:10px;
border: 1px solid gray;
}
div.buttions, div.add {
padding: 5px 2px 1px 2px;
}
div.style {
padding: 2px 0px 4px 0px;
}
#page {
display: none;
}<!DOCTYPE html>
<meta charset="UTF-8">
<title>Life Story</title>
<link rel="stylesheet" href="style/Style.css">
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="jScript/javaScript.js"></script>
<style>
#page-wrap { width: 60%; margin: 80px auto; position: relative; }
#logo { position: absolute; top: 0; left: 50%; margin-left: -125px; }
#l, #r { width: 49%; }
#l { float: left; }
#r { float: right; }
#l:before, #r:before { content: ""; width: 125px; height: 250px; }
#l:before { float: right; }
#r:before { float: left; }
</style>
</head>
<body>
<header id="header">
<div>
<hgroup id="hgroup">
<h1><a id="h">LIFE STORE</a></h1>
</hgroup>
</div>
</header>
<div id="ndiv">
<nav id="nlist">
<a href="#store" style="text-decoration: none">Story</a>
<a href="#carrer" style="text-decoration: none">Career</a>
<a href="#deu" style="text-decoration: none">Education</a>
<a href="#contact" style="text-decoration: none">Contact</a>
</nav>
</div>
<section>
<h1> <a id="store">Coming To United State</a></h1>
<article>
<div id = "story">
<p>Gates’s father could have spoken out, when Mr. Wilson did not addressed him properly at the Cut-Rate Drug Store by called he George. Addressed someone in-properly is an insult in today world, but we all know the old history, back in the day, people dealt with racial differences by drawing a strict line between white people and black people.</p>
<p>Wilson started addressed he George because of the incident that happen between them. I remember When I first came to the United sated, and I was playing for my high school, Ganger. I was a running back, one day, we were practicing and one of my teammate call me black monkey.
</p>
<p>Sometime letting things go can solve the problem and something it does not. But if something like that happen to me today, I will definitely respond, but in a good way by telling the person not to call me that again. <a id ="full" href="#" data-target ="#fullStory"
style="text-decoration: none">Show full story</a>
</p>
</div>
<div class = "hide" id = "fullStory">
<p>I lived in Africa for sixteen years, but the four years I have spent in United States
have taught me more the previous sixteen years I did in Africa, so much more.
Someone once told me that love is spending time with people and doesn’t care about
being annoyed. Ms. Fosdal took me out of darkness and brought me to light by teaching
me how to read, communicate, and write the English language. I think she is the
perfect example that fits the definition. I believe that majority of people around
the globe have encounter difficulties in life, in order for them to achieve the goals
they set for themselves. Nevertheless, I thought that my problem was the most
difficult one.</p>
<p>So now you know how my new life in the United States has taught me to overcome problems
and taught me to help others. I have seen myself in a better position through what I
have learned in this great country. I have learned how to build computers and navigate
the Internet which I never knew before. Moreover, I believe that the longer I stay in
the United States, the better I will become.</p></div>
<div class = "newStory" id = "addNote">
<div class= "style">
<select id="family" name="fonts">
<option value="1">Arial</option>
<option value="2">Times New Roman</option>
<option value="3">Helvetica</option>
<option value="4">Calibri</option>
<option value="5">Apple Chancery</option>
<option value="6">MingLiU_HKSCS</option>
</select>
<select id="size" name="fonts">
<option value="1">11</option>
<option value="2">12</option>
<option value="3">14</option>
<option value="4">16</option>
<option value="5">18</option>
<option value="6">20</option>
</select>
<input type= "button" id = "bold" value = "Bold Text">
<input type= "button" id = "itali" value = "Italics">
</div>
<textarea id= "newText">Enter some text</textarea>
<div class= "buttions">
<input type= "button" id = "bButton" value = "Append At B">
<input type= "button" id = "aButton" value = "Append At A">
<input type= "button" id = "delete" value = "Delete Last Paragraph">
</div>
</div>
<div class ="add">
<nav id="thing">
<a href="#comment" data-target ="#addNote" style="text-decoration: none">Add Though</a>
</nav>
</div>
</article>
</section>
</body>
</html>The Append, Delete button, and textarea are all hiding. When you click on Add Though at the bottom they will be visible.
This is what I have for delete, but it's not working
var dele = function () {
var par = $("story").getElementsByTagName("p");
var getStory = $("story");
var size = par.length;
if (size > 0) {
getStory.removeChild(par[size - 1]);
}
};
I don't have anything for the Append text.
paris undefined. did u forget to assign a value to it somewhere?