1
私はこのjavascriptコードを持っています。誰かがテキスト領域にテキストを入力してAまたはBの追加ボタンをクリックすると、ライフストーリーの始めまたは終わりにテキストを追加します。 。私はまた、削除ボタンをクリックすると、リストの最後の段落を削除したい。Javascript、jquery追加と削除
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>
\t <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>
\t
\t \t #page-wrap { width: 60%; margin: 80px auto; position: relative; }
\t
\t \t #logo { position: absolute; top: 0; left: 50%; margin-left: -125px; }
\t \t #l, #r { width: 49%; }
\t \t #l { float: left; }
\t \t #r { float: right; }
\t \t
\t \t #l:before, #r:before { content: ""; width: 125px; height: 250px; }
\t \t
\t \t #l:before { float: right; }
\t \t #r:before { float: left; }
\t
\t </style>
</head>
<body>
<header id="header">
<div>
<hgroup id="hgroup">
\t \t \t <h1><a id="h">LIFE STORE</a></h1>
\t \t </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>追加は、ボタンを削除し、テキストエリアはすべて隠れています。 Addをクリックすると下部に表示されますが、表示されます。
これは私が削除のために持っているものですが、それは私が追加のテキストのために何を持っていない
var dele = function() {
var par = $("story").getElementsByTagName("p");
var getStory = $("story");
var size = par.length;
if (size > 0) {
getStory.removeChild(par[size - 1]);
}
};
を働いていません。
変数 'par'は未定義です。あなたはどこかに価値を割り当てることを忘れましたか？ – jkris
いいえ、それが宣言する唯一の場所です – Jabateh
私はそれに値を割り当てますが、それでも動作しません。 var par = $（ "story"）。getElementsByTagName（ "p"）; – Jabateh