Unable to recreate elements by sessionStorage keys - javascript

My JS uses a sessionStorage to set keys and attempts to use these keys to recreate some accordions. I have no problem creating the elements via mouseclick, and I can store the keys and value in sessionStorage.
However, when I try to use a loop to find these keys, it doesn't appear to ever initialize. The remaining elements can be created via click, but the elements created before the refresh never load.
Project4values.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Project4</title>
<style type="text/css"></style>
<link href="Project4Values.css" rel="stylesheet" type="text/css">
<script type = "text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type = "text/javascript" src = "Project4Values.js"></script>
</head>
<body id = "sixTypes">
<script>
jQuery(function($){
$(document).ready(function(e) {
$('#MenuBar').load('ProjectMenuBar.html');
});
});
</script>
<div id = "MenuBar"> </div>
<h1 class="h1center"> Values </h1>
<input type="button" id = "ClickCount" onClick="numberSection()" value="Click Here">
<p/>
</body>
</html>
Project4Values.css
#charset "utf-8";
/* CSS Document */
.h1center{
text-align:center;
}
input.accordian{
background-color: #501214;
padding: 18px;
width: 100%;
text-align: left;
color: white;
transition: 0.4s;
}
div.panel{
display: none;
}
div.panel.show{
display: block;
}
Prject4Values.js
function numberSection() {
"use strict";
var paraStr = ["Numbers", "Strings", "Booleans", "Functions", "Objects", "Undefined Values"];
var buttonClass = "accordian";
var divClass = "panel";
var button = document.createElement("input");
if (typeof (Storage) !== "undefined") {
if (sessionStorage.clickcount) {
sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
} else {
sessionStorage.clickcount = 1;
}
}
//check for the first key made, then loop through and recreate the elements when the page loads
if (sessionStorage.getItem("containerNumber") !== null) {
window.onload = function () {
var x;
for (x = 0; x < sessionStorage.clickcount || x < 6; x++) {
button.className = buttonClass;
button.type = "button";
button.value = paraStr[x];
alert(button.value);
document.getElementById("sixTypes").appendChild(button);
createAccordian(document.getElementById("sixTypes"), divClass, button.value);
toggleText(buttonClass);
}
};
}
//while there are strings in the array, assign that string to button value
if (sessionStorage.clickcount - 1 < paraStr.length) {
button.className = buttonClass;
button.type = "button";
button.value = paraStr[sessionStorage.clickcount - 1];
document.getElementById("sixTypes").appendChild(button);
createAccordian(document.getElementById("sixTypes"), divClass, button.value);
toggleText(buttonClass);
}
}
function createAccordian(parentElement, strName, strStore) {
"use strict";
var accordian = document.createElement("div");
accordian.className = strName;
buildCellContent(accordian);
parentElement.appendChild(accordian);
sessionStorage.setItem("container" + strStore, strStore); //sets the Item in storage that I want to call later.
return parentElement;
}
function buildCellContent(parentElement) {
"use strict";
var x = sessionStorage.clickcount - 1;
var numText = "This text will go in the numbers section";
var strText = "This text will go in the strings section";
var boolText = "This text will go in the boolean section";
var funText = "This text will go in the function section";
var objText = "This text will go in the objects section";
var undefText = "This text will go in the undefinded section";
var textBlock = [numText, strText, boolText, funText, objText, undefText];
var textNode = document.createTextNode(textBlock[x]);
var pText = document.createElement("P");
pText.appendChild(textNode);
parentElement.appendChild(pText);
return parentElement;
}
function toggleText(cName) {
"use strict";
var acc = document.getElementsByClassName(cName);
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function () {
this.nextElementSibling.classList.toggle("show");
};
}
}

Related

How to delete the text and print new text letter by letter by clicking once after printing a text letter by letter

I'm quite a newcomer to HTML Front End, and now working on the school project to make a simple text interactive game, but I'm now stuck by this problem when I'm trying to make the interface better.
I can now implement this function by clicking the text button once to clearout the former text and clicking twice to print new text, but I want to realize these two effects at the same time by only clicking once.
I want to fix this problem by optimizing the function replace(),but it doesn't seem to work ,since the new text I want to print simply appear for about 50ms and disappear but I don't really know why.It seems to be something wrong with the function setInterval(),
Is there any possible ways to optimize it?
(the following is the code)
<html>
<head>
<meta charset="utf-8">
<title>Part1-intro2</title>
<link href="../css/main.css" rel="stylesheet" type="text/css"/>
<script src="../js/jquery-1.11.1.min.js"></script>
<script src="../js/Main.js"></script>
<script>
window.onload=function()
{
var temp = document.getElementsByClassName('dialog')[0];
var text = 'test text1';/*这里改对话内容*/
var len = text.length;
var timer = null;
var index = 0;
timer = setInterval(function(){
if(index == len){
clearInterval(timer);
}
temp.innerHTML+=text.charAt(index++);
},125);
}
function goForward()
{
window.location.assign("Sc2.html");
}
var t=0;
function replace()
{ if(t==0)
{
var temp = document.getElementsByClassName('dialog')[0];
var text = '';/*这里改对话内容*/
var len = text.length;
var timer = null;
var index = 0;
timer = setInterval(function(){
if(index == len){
clearInterval(timer);
}
temp.innerHTML=text.charAt(index);
},10);
t++;
}
else if(t==1)
{
temp = document.getElementsByClassName('dialog')[0];
text1 = 'test text1';
len = text1.length;
timer = null;
index = 0;
timer = setInterval(function(){
if(index == len){
clearInterval(timer);
}
temp.innerHTML+=text1.charAt(index++);
},50);
t++;
}
else if(t==2)
{
var temp = document.getElementsByClassName('dialog')[0];
var text = '';/*这里改对话内容*/
var len = text.length;
var timer = null;
var index = 0;
timer = setInterval(function(){
if(index == len){
clearInterval(timer);
}
temp.innerHTML=text.charAt(index);
},10);
t++;
}
else if(t==3)
{
var temp = document.getElementsByClassName('dialog')[0];
var text1 = 'test text2';/*这里改对话内容*/
var len = text1.length;
var timer = null;
var index = 0;
timer = setInterval(function(){
if(index == len){
clearInterval(timer);
}
temp.innerHTML=text1.charAt(index++);
},50);
t++;
}
else if(t==4)
{
goForward();
}
}
</script>
<style>
body {
background: url(../images/bg_通学路2.png) no-repeat;
background-size:100% 100%;;
}
</style>
</head>
<body background="../images/bg_通学路2.png">
<div>
<button class="basbt" id="ico-home" onclick="toHome()"></button>
<button class="basbt" id="ico-back" onclick="Back()"></button>
<button class="basbt" id="ico-save" onclick="Savegame()"></button>
</div>
<div class="Text" onclick="replace()">
<span class="cover1"></span>
<div class="dialog"></div>
<div class="Guide">>></div>
</div>
</body>
</html>

Alert message not being displayed by duplicate function when user enters duplicated values

I've been racking my brains trying to understand why my duplicate function isn't working. If everything worked as it should be the user should get an alert message each time s/he inputs a value twice. I tried to use the forEach method but the console kept throwing errors. So I'm now using good old for loop. No alert message being displayed either but at least the console isn't throwing any error, which I think is a step in the right direction.
var elUlList = document.getElementById("uList");
var btn = document.getElementById("btn");
const elInput = document.getElementById("input");
const footer = document.querySelector("footer");
const message = document.getElementById("message");
const elements = document.getElementsByTagName("li");
const elCounter = document.getElementById("counter");
function createListItems() {
var inputValue = elInput.value;
var newLi = document.createElement("li");
var newText = document.createTextNode(inputValue);
newLi.appendChild(newText);
elUlList.appendChild(newLi);
var array = Array.from(elements);
function findDuplicates() {
var compare = [];
for (var i = 0; i < array.length; i++) {
if(!compare.includes(array[i].textContent)){
compare.push(array[i].textContent)
} else {
alert("Value already entered")
}
}
}
if(inputValue === "") {
message.innerHTML = "field can't be left empty"
}
inputValue = ""
elCounter.innerHTML =+ elements.length;
}
btn.addEventListener("click", createListItems, false);
elInput.addEventListener("keyup", function(e) {
if(e.keyCode === 13) {
e.preventDefault();
btn.click()
}
})
elInput.addEventListener("mouseover", emptyField, false)
function emptyField() {
this.value = "";
}
elUlList.addEventListener("dblclick", function(e){
var target = e.target;
var parent = target.parentNode;
alert("are you sure you want to remove this item from the list")
parent.removeChild(target)
elCounter.innerHTML =+ elements.length;
});
elUlList.addEventListener("click", function(e){
var elements = document.getElementsByTagName("li");
var child = e.target;
if(elements.length >= 1){
var elCounter = document.getElementById("counter");
for(var i = 0; i < elements.length; i++) {
elements[i] === child ? elements[i].classList.toggle("lineThrough"):null;
}
}
})
var date = new Date().toLocaleDateString("en-US")
footer.innerHTML = date
console.log(date)
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Practise App</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div id="message"class=""></div>
<ul id="uList"></ul>
<button id="btn" type="button" name="button">click here to add items</button><br>
<input id="input" type="text" name="" value="">
<div id="counter" class=""></div>
<footer></footer>
<script src="index.js" type="text/javascript"></script>
</body>
</html>
I don't see findDuplicates being called anywhere.
Also you should prolly call document.getElementsByTagName("li") every time you enter createListItems or findDuplicates to reflect changes you made in html (added li tags).

Anjularjss ng-options not working select

I am trying to populate a select with some numbers using ng-options.This is my code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<style>
p{
margin-top: 50px;
height:700px;
width: 1400px;
font-size:17px;
}
</style>
<script src="jscolor.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="editor">
<label for="kys_font_size"> font size:</label>
<select ng-model="kys_selected_font" id="fontsize" name="kys_font_size" ng-options="page for page in FontSize(1, 150)" ng-change="changeFont()">
Color: <input type="color" ng-model="ColorPicked">
</select>
<p contenteditable="true" id="content" >
</p>
</div>
<script>
var app = angular.module('myApp',[]);
app.controller('editor',function($scope){
$scope.color = "black";
$scope.selectedText = "";
$scope.FontSize = function(start, end) {
var size = [];
for (var i = start; i <= end; i++) {
size.push(i);
}
return size;
};
$scope.changeFont = function(){
var newSpan = "<span id='one' style='font-size:'"+$scope.kys_selected_font+"'> </span>"
$("#one").focus();
$("#content").append();
var spans = document.getElementsByTagName('span');
if($scope.selectedText!=""){
for( i=0;i < spans.length;i++){
for( j=0;j < selectedText.length;j++){
var id = spans[i].id;
var selectedId = $scope.selectedText[j].id;
var text = $("#"+id).clone().children().remove().end().text();
var fontSize = $("#"+id).css("font-size");
var selectedinnerText = $("#"+selectedId).clone().children().remove().end().text();;
if(fontSize == $scope.)
if(id === selectedId){
if(text === selectedinnerText){
if(fontSize == $scope.kys_selected_font){
}
else{
$("#"+id).css("font-size",10+"px");
}
}
else{
var replacer = document.getElementById(id);
var newElement = "<span style='font-size:10px;' id='one4'>"+selectedinnerText+"</span>";
replacer.innerHTML = replacer.innerHTML.replace(selectedinnerText,newElement);
}
}
}
}
}
};
$("span").mouseup(function(){
var range = window.getSelection().getRangeAt(0);
content = range.cloneContents();
var select = content.querySelectorAll('span');
$scope.selectedText = select;
});
});
</script>
</body>
</html>
Select is always empty.
You haven't closed your controller. Add }); after your $scope.changeFont function.
Also, please format your code before posting a question. It's a nightmare to read for people trying to help you and it can help find issues like this.
EDIT
In your $scope.changeFont function you have this line if(fontSize == $scope.). I presume you want it to be if(fontSize == $scope.FontSize). I have changed it in the snippet below and the <select> is populated. Whether or not $scope.changeFont works as you intend, I don't know and it is outside of the scope of this question.
Additionally, in your HTML you have a <input> within a <select> which you need to move.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<style>
p {
margin-top: 50px;
height: 700px;
width: 1400px;
font-size: 17px;
}
</style>
<!--<script src="jscolor.js"></script>-->
</head>
<body>
<div ng-app="myApp" ng-controller="editor">
<label for="kys_font_size">font size:</label>
<select ng-model="kys_selected_font" id="fontsize" name="kys_font_size" ng-options="page for page in FontSize(1, 150)" ng-change="changeFont()">
</select>
Color: <input type="color" ng-model="ColorPicked">
</div>
<script>
var app = angular.module('myApp', []);
app.controller('editor', function($scope) {
$scope.color = "black";
$scope.selectedText = "";
$scope.FontSize = function(start, end) {
var size = [];
for (var i = start; i <= end; i++) {
size.push(i);
}
return size;
};
$scope.changeFont = function() {
var newSpan = "<span id='one' style='font-size:'" + $scope.kys_selected_font + "'> </span>"
$("#one").focus();
$("#content").append();
var spans = document.getElementsByTagName('span');
if ($scope.selectedText != "") {
for (i = 0; i < spans.length; i++) {
for (j = 0; j < selectedText.length; j++) {
var id = spans[i].id;
var selectedId = $scope.selectedText[j].id;
var text = $("#" + id).clone().children().remove().end().text();
var fontSize = $("#" + id).css("font-size");
var selectedinnerText = $("#" + selectedId).clone().children().remove().end().text();;
if (fontSize == $scope.FontSize)
if (id === selectedId) {
if (text === selectedinnerText) {
if (fontSize == $scope.kys_selected_font) {
} else {
$("#" + id).css("font-size", 10 + "px");
}
} else {
var replacer = document.getElementById(id);
var newElement = "<span style='font-size:10px;' id='one4'>" + selectedinnerText + "</span>";
replacer.innerHTML = replacer.innerHTML.replace(selectedinnerText, newElement);
}
}
}
}
}
};
$("span").mouseup(function() {
var range = window.getSelection().getRangeAt(0);
content = range.cloneContents();
var select = content.querySelectorAll('span');
$scope.selectedText = select;
});
});
</script>
</body>
</html>

how to remove an object by button?

i built two buttons with this values("+" and "-")
when i click on "+" it creates a text and combo box,
i wanna know how to remove them with "-" button?(by only JavaScript)
here's the code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>create and delete</title>
<script type="text/javascript">
/*this function creates text box and combo box*/
function cre()
{var t=document.createElement('select');
var form=document.getElementById('theForm');
var label = document.createElement('label');
var textbox = document.createElement('input');
form.appendChild(t);
form.appendChild(textbox);}
function del()
/*{delete t,form,label,textbox;}*/
</script>
</head>
<body>
<form id='theForm'>
<input type="button" value="+" onclick="cre()" />
<input type="button" value="-" onclick="del()" />
</form>
</body>
</html>
function del()
{
var form=document.getElementById('theForm');
var t = form.getElementsByTagName('select');
var textbox = form.getElementsByTagName('input');
if(t != 'undefined' && textbox != 'undefined')
{
form.removeChild(t[t.length-1]);
form.removeChild(textbox[textbox.length-1]);
}
}
Fiddle for your reference
My solution :
cre = function() {
var form = document.getElementById('theForm'),
div = document.createElement('div'),
t = document.createElement('select'),
label = document.createElement('label'),
textbox = document.createElement('input');
div.className = 'divContainer';
div.appendChild(t);
div.appendChild(label);
div.appendChild(textbox);
form.appendChild(div);
}
/*{delete t,form,label,textbox;}*/
delForm = function() {
var form = document.getElementById('theForm');
form.parentNode.removeChild(form);
}
del = function() {
var containers = document.getElementsByClassName('divContainer');
for(var i = 0; i < containers.length; i++) {
if(typeof(containers[i]) === 'object') {
containers[i].parentNode.removeChild(containers[i]);
}
}
}
JSFiddle : http://jsfiddle.net/j6Fxc/27/

How do I delete a record in my javascript to do list?

I'm working on a to do list and I'm trying to create a delete button that will prompt an id number to delete a record. You pick which record you want to delete. Not sure how to go about doing it. This code has the html in it as well.
<!DOCTYPE html>
<html>
<head>
<title>To Do List</title>
<style>
body{margin:20px;}
</style>
<script type="text/javascript">
var list;
var addBtn;
document.addEventListener("DOMContentLoaded",load);
function load(){
list = get("list");
checkboxes = getTag("input");
addBtn = get("addBtn");
addBtn.addEventListener("click",addItem);
for(var i = 0, l = checkboxes.length; i < l ; i++){
if(checkboxes[i].type == "checkbox")
checkboxes[i].addEventListener("click",updatePercent);
}
if(localStorage.listFile)
//list.innerHTML = localStorage.listFile;
updatePercent();
}
function updatePercent(){
var checkboxes = getTag("input");
var total = checkboxes.length/2;
var done = 0;
for(var i = 0, l = checkboxes.length; i < l ; i++){
if(checkboxes[i].checked)
done++;
}
get("percentage").innerHTML = "Done: " + Math.round((done/total)*100) + "%";
}
function addItem(){
var item = document.createElement('li');
var chk = document.createElement("input");
var txt = document.createElement("input");
chk.type = "checkbox";
txt.type = "text";
chk.addEventListener("click",updatePercent);
item.appendChild(chk);
item.appendChild(txt);
list.appendChild(item);
updatePercent();
}
function get(id){
return document.getElementById(id);
}
function getTag(tag){
return document.getElementsByTagName(tag);
}
function save(){
localStorage.listFile = list.innerHTML;
}
function deleteTsk(){
var i = prompt("Enter number you want to delete") - 1;
//checkboxes[i].splice(i,1);
checkboxes[i].innerHTML = "";
}
</script>
</head>
<body>
<h1>Kung Fu To Do List 1.0</h1>
<ol id="list">
<li><input type="checkbox"><input type="text"></li>
</ol>
<p id="percentage"></p>
<button id="addBtn">Add Item</button><button onclick="save()">Save</button><button onclick="deleteTsk()">Delete</button>
</body>
I figured out how to delete it with this method.
function deleteTsk(){
var i = prompt("Enter number you want to delete") - 1;
var item = getTag("li");
list.removeChild(item[i]);
}
I figured out how to delete it with this method.
function deleteTsk(){
var i = prompt("Enter number you want to delete") - 1;
var item = getTag("li");
list.removeChild(item[i]);
}

Categories