IE appendChild from array not working - javascript

I have an history feature for a particular,div on my website. Everything worked fine up to now, I was inserting HTML as strings from javascript and re-display them with .innerHTML. Now I try to clean up the javascript from all HTML strings and I have this problem: history browsing of the div works in FF, Chrome and some other, but not IE (8 to 11), can't understand why. Is it a cloneNode() or a reference issue I don't see ?
Below is a small script to reproduce the behaviour, you can play with here: http://jsfiddle.net/yvecai/7e8tksm3/
My code works as follow: each time I display something in Mydiv, I clone it and append it in an array.
The function prev() or next() append the corresponding nodes from the array for display.
The script first create 5 contents '1' ... '5' that the user can display with the functions prev() and next(). In IE, when you go prev(), then next(), only the first and last records are shown. In other browsers, no problem.
var cache = [];
var i = 0;
function next() {
var hist = document.getElementById('history');
i += 1;
if (i > 4) {
i = 4
};
hist.innerHTML = '';
hist.appendChild(cache[i]);
}
function prev() {
var hist = document.getElementById('history');
i -= 1;
if (i < 0) {
i = 0
};
hist.innerHTML = '';
hist.appendChild(cache[i]);
}
function cacheInHistory(div) {
cache.push(div.cloneNode(true));
}
function populate() {
for (i = 0; i < 5; i++) {
var hist = document.getElementById('history');
hist.innerHTML = '';
var Mydiv = document.createElement('div');
Mydiv.innerHTML = i;
hist.appendChild(Mydiv);
cacheInHistory(Mydiv);
}
i = 4
}

I tried to simplify your code:
In the function populate (onload) create and populate the array cache. As last operation append your child.
In your next or previous function use replaceChild instead of append and remove innerHTML.
var cache=[];
var i = 0;
function next(){
var hist = document.getElementById('history');
i = (++i > 4) ? 4 : i;
hist.replaceChild(cache[i], hist.children[0]);
}
function prev(){
var hist = document.getElementById('history');
i = (--i < 0) ? 0 : i;
hist.replaceChild(cache[i], hist.children[0]);
}
function cacheInHistory(div){
cache.push(div.cloneNode(true));
}
function populate(){
var hist = document.getElementById('history');
for (i=0 ; i<5 ; i++){
hist.innerHTML='';
var Mydiv = document.createElement('div');
Mydiv.innerHTML = i;
cacheInHistory(Mydiv);
}
i = 4
hist.appendChild(cache[i]);
}
<body onload="populate();">
<div id="prev" onclick="prev()">
prev
</div>
<div id="next" onclick="next()">
next
</div>
<hr/>
<div id="history">
</div>
</body>

Related

Hide/Show div p5.js

I am using the p5.js library, and I am working on a speech recognition - text to speech project. Kind of a chatbot.
Input is voice input which becomes a string.
I am outputting the result from a txt file, using a markov chain. Output is a string contained in a div.
My question is:
Is there a way to hide/show the div containing my input/output (.myMessage and .robotMessage) in intervals?
I want the whole screen first showing only the input when I am talking, then input disappears and only output showing, then when the computer voice finishes speaking my input is shown in the screen and so on...
Here some parts of the code, let me know if it is clear enough.
//bot
function setup() {
noCanvas();
//reads and checks into the text file
for (var j = 0; j < names.length; j++) {
var txt = names[j];
for (var i = 0; i <= txt.length - order; i++) {
var gram = txt.substring(i, i + order);
if (i == 0) {
beginnings.push(gram);
}
if (!ngrams[gram]) {
ngrams[gram] = [];
}
ngrams[gram].push(txt.charAt(i + order));
}
}
//voice recognition
let lang = 'en-US';
let speechRec = new p5.SpeechRec(lang, gotSpeech);
let continuous = true;
let interim = false;
speechRec.start(continuous, interim);
//text-to-speach
speech = new p5.Speech();
speech.onLoad = voiceReady;
function voiceReady() {
console.log('voice ready');
}
//input-ouput
function gotSpeech() {
if (speechRec.resultValue) {
var p = createP(speechRec.resultString);
p.class('myMessage');
}
markovIt();
chooseVoice();
speech.speak(answer);
}
}
and
function markovIt() {
var currentGram = random(beginnings);
var result = currentGram;
for (var i = 0; i < 100; i++) {
var possibilities = ngrams[currentGram];
if (!possibilities) {
break;
}
var next = random(possibilities);
result += next;
var len = result.length;
currentGram = result.substring(len - order, len);
}
var answer = result;
window.answer = answer;
var p2 = createP(answer);
p2.class('robotMessage');
}
how the HTML looks
<div class="container">
<div class="myMessage"></div>
<div class="robotMessage"></div>
</div>
Use select() to get a document element by its id, class, or tag name. e.g:
let my_div = select("myMessage");
Change the style of an element by style().
e.g hide:
my_div.style("display", "none");
e.g. show:
my_div.style("display", "block");
See also Toggle Hide and Show

Javascript Pagination Issue

I'm trying to make a simple Javascript pagination function, but I'm having this issue where instead of iterating through the array, it keeps adding new list items to the innerhtml.
I have tried creating an element and appending it to the DOM.
I have tried using if/else statements to display the list items I
want.
<body>
<div class='result'></div>
<button class="add">+</button>
<script src='pretty.js'></script>
</body>
let dogs = [
'goldendoodle',
'poodle',
'afghan hound',
'golden retriever',
'labrador',
'chihuahua',
'pitbull',
'german shepherd',
'greyhound',
'bull terrier'
]
let high = 1;
let low = 0;
let result = document.querySelector('.result');
let add = document.querySelector('.add');
function Pagination(low,high) {
for(var i = 0 ; i < dogs.length;i++) {
let answer = document.createElement('div');
answer.classList.add('dogs-dom');
answer.innerHTML = dogs[i];
result.appendChild(answer);
if(i >= low && i < high) {
answer.style.display ='block';
}
if(i < low || i > high) {
answer.style.display ='none';
}
}
}
Pagination(low,high);
add.addEventListener('click', () => {
low += 2;
high += 2;
Pagination(low,high);
});
When I click the button, I want the next two array items to appear and replace the last two shown.
To use the approach you've outlined above you'll need to clear the innerHtml of the result element before appending new children. At the top of your Pagination function try result.innerHtml = '';.
That said if you are using a hide/show approach to paginate the list it would be more efficient to create the dom elements only once and modify the style.display property of each instead of clearing out the result and re-creating all of the answer divs on every click.
Your Pagination function only adds elements to the dom each time it is called.
You can either remove the existing elements every time Pagination is called, and render only those that should be displayed, e.g.:
function Pagination(low,high) {
result.innerHTML = ''; // remove all children of result
// only render the children which should be visible
for(var i = low ; i < high;i++) {
let answer = document.createElement('div');
answer.classList.add('dogs-dom');
answer.innerHTML = dogs[i];
result.appendChild(answer);
}
}
Or you can use display: block; / display: none. (Will not scale very well with large lists)
function Pagination(low,high) {
// only append all dogs once
if(result.childElementCount === 0) {
for(var i = 0; i < dogs.length;i++) {
let answer = document.createElement('div');
answer.classList.add('dogs-dom');
answer.style.display ='none';
answer.innerHTML = dogs[i];
result.appendChild(answer);
}
}
// toggle display: none / block for each element
for(var i = 0; i < dogs.length;i++) {
if(i >= low && i < high)
answer.style.display ='block';
else
answer.style.display ='none';
}
}
As a bonus, heres a reusable pagination class example:
function Pagination(container, items) {
this.container = container;
this.result = container.querySelector('.result');
this.prevBtn = container.querySelector('.prev');
this.nextBtn = container.querySelector('.next');
this.items = items;
this.offset = 0;
this.limit = 5;
this.updateDom();
this.prevBtn.onclick = this.prevPage.bind(this);
this.nextBtn.onclick = this.nextPage.bind(this);
}
Pagination.prototype.nextPage = function() {
if((this.offset + this.limit) < this.items.length)
this.offset += this.limit;
this.updateDom();
};
Pagination.prototype.prevPage = function() {
if(this.offset >= this.limit)
this.offset -= this.limit;
this.updateDom();
};
Pagination.prototype.updateDom = function() {
this.result.innerHTML = '';
let stop = Math.min(this.offset + this.limit, this.items.length);
for(let i = this.offset; i < stop; i++) {
let el = document.createElement("div");
el.appendChild(document.createTextNode(this.items[i]));
this.result.appendChild(el);
}
let hasPrev = this.offset > 0;
if(hasPrev)
this.prevBtn.classList.remove('hide');
else
this.prevBtn.classList.add('hide');
let hasNext = (this.offset + this.limit) < this.items.length;
if(hasNext)
this.nextBtn.classList.remove('hide');
else
this.nextBtn.classList.add('hide');
};
let items = [];
for (let i = 1; i <= 50; i++)
items.push(`Item ${i}`);
let pagination = new Pagination(document.querySelector(".paginate"), items);
// You can also programatically switch to the next / prev page:
// pagination.nextPage();
// pagination.prevPage();
.hide { visibility: hidden; }
<div class="paginate">
<div class="result"></div>
<button class="prev">PREV</button>
<button class="next">NEXT</button>
</div>
Maybe this is along the lines of what you want to do?
It tracks only a globalIndex (which would be like like your 'low' variable).
The showNextTwoItems function:
- Notes the indexes where we should start and end
- Clears the container div
- Enters a while loop that appends items and increments the current index
- Updates the globalIndex when enough items have been added
let dogs = [ 'goldendoodle', 'poodle', 'afghan hound', 'golden retriever', 'labrador', 'chihuahua', 'pitbull', 'german shepherd', 'greyhound', 'bull terrier' ],
containerDiv = document.querySelector('.result'),
addBtn = document.querySelector('.add'),
globalIndex = 0; // Tracks where we left off (starts at zero)
const NUMBER_TO_SHOW = 2;
addBtn.addEventListener("click", showNextTwoItems); // Calls function on click
function showNextTwoItems(){
let numberToShow = NUMBER_TO_SHOW, // In case we ever want to change numberToShow
currentIndex = globalIndex, // Gets local copy of globalIndex (always < dogs.length)
// Lets us stop looping when we've shown enough or reach the end of the array
stopBeforeIndex = Math.min(currentIndex + numberToShow, dogs.length);
containerDiv.innerHTML = ""; // Clears div
while(currentIndex < stopBeforeIndex){
// Creates and appends a text node with the next dog
const newItem = document.createTextNode(dogs[currentIndex]);
containerDiv.appendChild(newItem);
// Creates and appends a line break
const lineBreak = document.createElement("BR");
containerDiv.appendChild(lineBreak);
// Moves on to the next index
currentIndex++;
}
// Updates global index (making sure it is not too big for the array)
globalIndex = currentIndex < dogs.length ? currentIndex : 0;
}
<button class="add">+</button>
<div class='result'></div>

Looping through a set of <p>'s one at a time

I'm trying to figure out how to count the number of p's so every time the button is pressed, it outputs to 0 to 1 until the maximum number of p's is counted.
var big_number = 999999;
var i;
var a = document.getElementsByTagName("p");
function function0() {
for (i=0; i < big_number; i++) {
document.getElementsByTagName("p")[i].innerHTML="text";
}
}
I want it to write to another p every time the button is pressed.
document.getElementsByTagName("p").length // number of p elements on the page
Is that what you were asking?
Make a generic tag adder function then call it:
function addTags(tagName,start, max, container) {
var i = start;
for (i; i < max; i++) {
var newp = document.createElement(tagName);
newp.innerHTML = "paragraph" + i;
container.appendChild(newp);
}
}
var tag = 'p';
var big_number = 30;
var i;
var a = document.getElementsByTagName(tag );
// **THIS is your specific question answer**:
var pCount = a.length;
var parent = document.getElementById('mydiv');
addTags(tag,pCount , big_number, parent);
// add 10 more
a = document.getElementsByTagName(tag );
pCount = a.length;
big_number = big_number+10;
addTags(tag,pCount , big_number, parent);
EDIT:
NOTE: THIS might be better, only hitting the DOM once, up to you to determine need:
function addTagGroup(tagName, start, max, container) {
var tempContainer = document.createDocumentFragment();
var i = start;
for (i; i < max; i++) {
var el = document.createElement(tagName);
el.textContent = "Paragraph" + i;
tempContainer.appendChild(el);
}
container.appendChild(tempContainer);
}
To find out how many <p> elements there are in the document you should use DOM's length property as below :-
var numP = document.getElementsByTagName("P").length;
or
var div = document.getElementById("myDIV");
var numP = div.getElementsByTagName("P").length;
To get number of element inside a tag.

If data attribute above X number add class to element

I need to add Class highpc to each element with the data attribute of procent, which is bigger than 51. I've got a jQuery solution, but I need it in pure JavaScript. Can anyone help me? This is what I got so far:
HTML
<span data-procent="4" class="procent">4%</span>
<span data-procent="59" class="procent">59%</span>
JS
function highpc(){
var procent = this.elem.getAttribute("data-procent");
if (parseInt(procent) > 51) {
procent.className=procent.className+" highpc";
}
}
window.onload = highpc();
http://jsfiddle.net/Zc8vY/1/
You haven't specified what is this.elem, and you haven't loop in your script.
You are also using variable procent for getting the data-attribute from your element. Later, you are trying to use it for linking the element. Try updated code:
function highpc(){
var elements = document.getElementsByClassName('procent');
for(i=0;i<elements.length;i++) {
var procent = elements[i].getAttribute("data-procent");
if (parseInt(procent) > 51) {
elements[i].className=elements[i].className+" highpc";
}
}
}
Updated fiddle http://jsfiddle.net/Zc8vY/4/
This is your fixed function:
function highpc() {
var elements = document.querySelectorAll('.procent');
for (var i = 0; i < elements.length; i++) {
var procent = elements[i].getAttribute("data-procent");
if (parseInt(procent) > 51) {
elements[i].className += " highpc";
}
}
}
window.onload = highpc;
Note the last line: you don't need () after highpc because you want window.onload to be a reference to a function, not a result of execution.
References: querySelectorAll to select elements.
Demo: http://jsfiddle.net/Zc8vY/3/
Using pure javascript and implementing own getElementsByClassName.
function getElementsByClass(className){
var celems = new Array();
var elems = document.getElementsByTagName("*");
for(var i = 0; i < elems.length;i++){
if(elems[i].className.indexOf(className) != -1){
celems.push(elems[i]);
}
}
return celems;
}
function highpc(){
var elems = getElementsByClass("procent");
console.log(elems);
for(var i = 0; i < elems.length; i++){
highpc_ex(elems[i]);
}
}
function highpc_ex(elem){
var procent = elem.getAttribute("data-procent");
if (parseInt(procent) > 51) {
elem.className=elem.className+" highpc";
}
}
window.onload = highpc();
WORKING FIDDLE HERE
function highpc() {
var aSpans = document.getElementsByTagName("span");
for(var i = 0; i < aSpans.length; i++) {
var eSpan = aSpans[i];
var procent = eSpan.getAttribute("data-procent");
if (procent != null && parseInt(procent) > 51) {
eSpan.className += " highpc";
}
}
}
This is a similar variant to what others have already posted. You might find this one to be more performant for larger sets of html.
Ref: Why .getElementsByTagName() is faster than .querySelectorAll()

Continuously loop through JavaScript text array onclick

I have a text array. I want to display the first entry on page load. And then replace the text with the next entry when I click a button. If I keep clicking the button I want the text to continuously be replaced by waht is next in the array, and when it gets to the end start back at the first entry. Can someone please show me an example code for that. I am new to this.
Here's what I have
$(document).ready(function(){
var arr = new Array("One","Two","Three");
var len=arr.length;
$('#next').click(function(){
for(var i=0; i<len; i++) {
$('#quote').html(arr[i]);
}
});
});
Something like the following should do the trick:
<script type="text/javascript">
var nextWord = (function() {
var wordArray = ['fe','fi','fo','fum'];
var count = -1;
return function() {
return wordArray[++count % wordArray.length];
}
}());
</script>
<p id="foo"> </p>
<button onclick="
document.getElementById('foo').innerHTML = nextWord();
">Update</button>
Edit
Radomised version:
var nextWord = (function() {
var wordArray = ['fe','fi','fo','fum'];
var copy;
return function() {
if (!copy || !copy.length) copy = wordArray.slice();
return copy.splice(Math.random() * copy.length | 0, 1);
}
}());
The following should do it http://jsfiddle.net/mendesjuan/9jERn/1
$(document).ready(function(){
var arr = ["One","Two","Three"];
var index = 0;
$('#next').click(function(){
$('#quote').html(arr[index]);
index = (index + 1) % arr.length ;
});
});
Your code was writing all three values each time you clicked it (but only displaying that last value)
I think something like this would work
The javascript would look like:
// assuming maxTextArrayIndex & textArray are defined & populated
var textDisplayIndex = -1;
document.getElementById('textDisplay').innerHTML = textArray[textDisplayIndex];
function nextElement()
{
textDisplayIndex += 1;
if (textDisplayIndex > maxTextArrayIndex)
{
textDisplayIndex = 0;
}
document.getElementById('textDisplay').innerHTML = textArray[textDisplayIndex];
}
The html would look like:
<body onLoad=nextElement()>
...
<elementToDisplayText id=textDisplay></elementToDisplayText>
<button onClick=nextElement()>Next</button>

Categories

Resources