Counter Using Javascript, HTML & CSS Not Working - javascript

Can anyone help me to get this (https://jsfiddle.net/hmatrix/v3jncqac/) code to work?
Inentention: I want to create a counter that increases in increments.
My HTML:
<body onload="incrementCount(10)">
<div class="main_container" id="id_main_container">
<div class="container_inner" id="display_div_id">
</div>
</div>
</body>
My JS:
var counter_list = [10,10000,10000];
var str_counter_0 = counter_list[0];
var str_counter_1 = counter_list[1];
var str_counter_2 = counter_list[2];
var display_str = "";
var display_div = document.getElementById("display_div_id");
function incrementCount(current_count){
setInterval(function(){
// clear count
while (display_div.hasChildNodes()) {
display_div.removeChild(display_div.lastChild);
}
str_counter_0++;
if (str_counter_0 > 99) {
str_counter_0 = 0; // reset count
str_counter_1++; // increase next count
}
if(str_counter_1>99999){
str_counter_2++;
}
display_str = str_counter_2.toString() + str_counter_1.toString() + str_counter_0.toString();
for (var i = 0; i < display_str.length; i++) {
var new_span = document.createElement('span');
new_span.className = 'num_tiles';
new_span.innerText = display_str[i];
display_div.appendChild(new_span);
}
},1000);
}

<body onload="incrementCount(10)">
<div class="main_container" id="id_main_container">
<div class="container_inner" id="display_div_id">
</div>
</div>
</body>
<script>
var counter_list = [10,10000,10000];
var str_counter_0 = counter_list[0];
var str_counter_1 = counter_list[1];
var str_counter_2 = counter_list[2];
var display_str = "";
var display_div = document.getElementById("display_div_id");
function incrementCount(current_count){
setInterval(function(){
// clear count
while (display_div.hasChildNodes()) {
display_div.removeChild(display_div.lastChild);
}
str_counter_0++;
if (str_counter_0 > 99) {
str_counter_0 = 0; // reset count
str_counter_1++; // increase next count
}
if(str_counter_1>99999){
str_counter_2++;
}
display_str = str_counter_2.toString() + str_counter_1.toString() +
str_counter_0.toString();
for (var i = 0; i < display_str.length; i++) {
var new_span = document.createElement('span');
new_span.className = 'num_tiles';
new_span.innerText = display_str[i];
display_div.appendChild(new_span);
}
},1000);
}
</script>
JSFIDDLE: https://jsfiddle.net/v3jncqac/32/
Your onload function cannot find the function because your js is in a different file. you need to add script src on top of html or do it as shown above.

Related

Slow down image cycle rotation to eventual random stop

I have a list of images that the code cycles through and displays indefinitely.
I want it to slow down and stop on a random image in the list.
Can anyone help me with this?
This is what I have so far:
<div id="imgSelect" class="imgSelect">
<div id="img" class="img">
<img id="imgDisplay" class="imgInside" imgalt="rArrowback">
</div>
<div id="select" class="select">
<button id="selectBtn" type="button" class="btnSelect">GO!</button>
</div>
</div>
The funtion:
var imgArray = new Array();
for (var i = 0; i < 60; i++) {
imgArray[i] = './imgs/' + i + '.png';
}
document.getElementById("imgDisplay").style.backgroundImage = "url('qm.png')"
function selectImg() {
document.getElementById("imgDisplay").style.backgroundImage = 'none'
var rotator = document.getElementById("imgDisplay");
var delayInSeconds = 1;
var num = 0;
var changeImage = function () {
var len = imgArray.length;
rotator.src = imgArray[num++];
if (num == len) {
num = 0;
}
};
setInterval(changeImage, delayInSeconds * 100);
// for (var i = 0; i < 60; i++) {
// document.getElementById("imgDisplay").style.backgroundImage = "url('" + imgArray[i] + "')"
// }
}
This is the result:
Use the random function offered by Javascript.
Right after the timer put rotator.src = imgArray[Math.floor(Math.random() * imgArray.length)];

Count amount of times a value is represented

i have some code that takes input numbers and put them into a new array. How can i make it so my alert tells the user how many times the number is represented in the input? Exampel 0,4,4,2,3,4,1 would show "0 appears 1 time, 4 appears 3 times" and so on...I think im close but cant get the final part right...
<!DOCTYPE html>
<html>
<head>
<title>Oppgave 5</title>
<script type="text/javascript">
window.onload = btn;
function btn() {
document.getElementById("btn").onclick = showTxt;
}
function showTxt() {
var text = "";
var input = document.getElementById("input").value;
var split = input.split(",");
var newArray = split;
var count = 0;
for (var i = 0; i < newArray.length; i++) {
if (newArray[i] === parseInt(input)) {
count++;
}
alert("Number " + newArray[i] + " appears " + count + " times");
}
text += newArray;
document.getElementById("print").innerHTML = text;
}
</script>
</head>
<body>
<input id="input" type="text">
<button id="btn" type="button">Show</button>
<p id="print"></p>
</body>
</html>
I have changed your showTxt function
function showTxt() {
var text = "";
var input = document.getElementById("input").value;
var split = input.split(",");
var newArray = split;
var count;
for (var i = 0; i < newArray.length; i++) {
count = 0;
for (var j = 0; j < newArray.length; j++) {
if (newArray[i] === newArray[j]) {
count++;
}
}
alert("Number " + newArray[i] + " appears " + count + " times");
}
text += newArray;
document.getElementById("print").innerHTML = text;
}
You could use the method from this gist like so:
window.onload = btn;
function btn() {
document.getElementById("btn").onclick = showTxt;
}
function showTxt() {
var text = "";
var input = document.getElementById("input").value;
var split = input.replace(/ /g, '').split(",").sort();
compressArray(split);
}
function compressArray(original) {
var compressed = [];
// make a copy of the input array
var copy = original.slice(0);
// first loop goes over every element
for (var i = 0; i < original.length; i++) {
var myCount = 0;
// loop over every element in the copy and see if it's the same
for (var w = 0; w < copy.length; w++) {
if (original[i] == copy[w]) {
// increase amount of times duplicate is found
myCount++;
// sets item to undefined
delete copy[w];
}
}
if (myCount > 0) {
var a = new Object();
a.value = original[i];
a.count = myCount;
compressed.push(a);
}
}
for (var i = 0; i < compressed.length; i++) {
var message = compressed[i].value + ' appears ' + compressed[i].count + ' times.';
alert(message);
document.getElementById("print").innerHTML += message + '</br>';
}
};
<input id="input" type="text">
<button id="btn" type="button">Show</button>
<p id="print"></p>
Check this out, may be it'll helpful .
<!DOCTYPE html>
<html>
<head>
<title>Oppgave 5</title>
<script type="text/javascript">
window.onload = btn;
function btn() {
document.getElementById("btn").onclick = showTxt;
}
function showTxt() {
var text = "";
var input = document.getElementById("input").value;
var split = input.split(",");
var newArray = split;
let countedValues = newArray.reduce(function(obj,val){
if(obj[val])
obj[val] += 1;
else
obj[val] = 1;
return obj
}, {})
for (let value in countedValues ) {
alert("Number " + value + " appears " + countedValues[value] + " times");
}
text = newArray;
document.getElementById("print").innerHTML = text;
}
</script>
</head>
<body>
<input id="input" type="text">
<button id="btn" type="button">Show</button>
<p id="print"></p>
</body>
</html>

Why is my html/js code getting an error on my function?

Here is the error I get:
Here is the code:
<html>
<head>
</head>
<body>
<p> Please enter a series of numbers, each separated by a new line.<br><p>
<textarea id="myTextArea" rows = "7" cols = "50"></textarea><br>
<button onclick="processData()">Done</button>
<p id = "mean"></p>
<p id = "median"></p>
<p id = "count"></p>
<p id = "summation"></p>
<p id = "mode"></p>
<p id = "variance"></p>
<p id = "sd"></p>
<script type = "text/javascript">
function processData()
{
var arrayOfLines = document.getElementById('myTextArea').value.split('\n');
var length = arrayOfLines.length;
var modeArr = {};
var sum = 0;
var mean = 0;
var median = 0;
var count = length;
var mode = 0;
var variance = 0;
var standard deviation = 0;
var modeCounter = {};
var meanOutput = document.getElementById('mean');
var medianOutput = document.getElementById('median');
var modeOutput = document.getElementById('mode');
var countOutput = document.getElementById('count');
var summationOutput = document.getElementById('summation');
var varianceOutput = document.getElementById('variance');
var sdOutput = document.getElementById('sd');
alert("hi");
alert(arrayOfLines[0]);
sum(arrayOfLines);
mean(arrayOfLines);
median(arrayOfLines);
mode(arrayOfLines);
variance(arrayOfLines);
standardDeviation(arrayOfLines);
variance(arrayOfLines);
}
function sum(array)
{
for (var a = 0; a < length; a++)
{
sum += arrayOfLines[a];
}
alert(sum);
summationOutput.innerHTML = sum;
}
function mode (array)
{
for (var a = 0; a < length; a++)
{
for (var b = 0; b < modeArr.length; b++)
{
if (arr[a] == arr[b])
{
modeCounter[a]++;
}
}
arr[a] = arrayOfLines[a];
}
moedOutput.innerHTML = mode;
}
function mean (array)
{
mean = sum/length;
meanOutput.innerHTML = mean;
}
function median (array)
{
if (length % 2 == 1)
{
median = sortedArrayOfLines[((length - 1)/2)+1]
}
else
{
median = (sortedArrayOfLines[length/2] + sortedArrayOfLines[(length/2)+1])/2
}
medianOutput.innerHTML = median;
}
function variance (array)
{
var mean = mean(array);
return mean(array.map(function(num)
{
varianceOutput.innerHTML = Math.pow(num - mean, 2);
}));
}
function standardDeviation (array)
{
medianOutput.innerHTML = Math.sqrt(variance(array));
}
</script>
</body>
</html>
problem is here
var standard deviation = 0;
^^
replace it with
var standard_deviation = 0;

How to fix these from moving

I recently asked how to use a progress bar, no one answered so I made up a custom progress bar, Its perfect but the [ ] expand out every new increment, is this due to the font width? or is it fixable? I used because it would have expanded in the first place.
<script type="text/javascript">
var imgsb = new Array("[/ ]","[// ]","[/// ]","[//// ]","[///// ]","[///// ]","[////// ]","[/////// ]","[//////// ]","[///////// ]","[///////// ]","[////////// ]","[/////////// ]","[//////////// ]","[///////////// ]","[////////////// ]","[/////////////// ]","[//////////////// ]","[///////////////// ]","[////////////////// ]","[/////////////////// ]","[//////////////////// ]","[///////////////////// ]","[////////////////////// ]","[///////////////////////]");
altb = new Array();
var currentAdb = 0;
var imgCtb = 25;
function cycleb() {
if (currentAdb == imgCtb) {
currentAdb = 0;
}
document.getElementById('adLinkb').innerHTML = imgsb[currentAdb];
currentAdb++;
}
window.setInterval("cycleb()",500);
</script>
<div style="font-size:12px;color:#fff;font-family:monospace;" id="adLinkb">[/ ]</div>
See how much cleaner this looks:
var currentAdb = 0;
var imgCtb = 25;
function cycleb() {
var output = '[';
for (var i = 0; i < imgCtb; i++) {
output += i > currentAdb ? ' ' : '/';
}
output += ']';
document.getElementById('adLinkb').innerHTML = output;
++currentAdb;
if(currentAdb == imgCtb) {
window.clearInterval(myInterval);
}
}
var myInterval = window.setInterval(cycleb, 500);
#adLinkb {
font-size: 12px;
color: #000;
font-family: monospace;
}
<div id="adLinkb"></div>
#Dave Goten answered this
Thank you all for helping me.
<script type="text/javascript">
var imgsb = new Array("[/ ]","[// ]","[/// ]","[//// ]","[///// ]","[///// ]","[////// ]","[/////// ]","[//////// ]","[///////// ]","[///////// ]","[////////// ]","[/////////// ]","[//////////// ]","[///////////// ]","[////////////// ]","[/////////////// ]","[//////////////// ]","[///////////////// ]","[////////////////// ]","[/////////////////// ]","[//////////////////// ]","[///////////////////// ]","[////////////////////// ]","[///////////////////////]");
altb = new Array();
var currentAdb = 0;
var imgCtb = 25;
function cycleb() {
if (currentAdb == imgCtb) {
currentAdb = 0;
}
document.getElementById('adLinkb').innerHTML = imgsb[currentAdb];
currentAdb++;
}
window.setInterval("cycleb()",500);
</script>
<div style="font-size:12px;color:#fff;font-family:monospace;" id="adLinkb">[/ ]</div>

How can I remove unwanted piece of HTML markup on the page?

I have trouble with this piece of code. When I click it once, all is good and the behavior is as designed , but when I click it more than once, then there is all bunch of HTML that appears in the div (text area). How should I revise my JS to make it not happen?
HTML :
<div id="transcriptText">Lorem ipsum dolor sit amet </div>
<br>
<div id="divideTranscript" class="button"> Transform the Transcript! </div>
JS :
window.onload = function() {
var transcriptText = document.getElementById("transcriptText");
var newTranscript = document.createElement("div");
var divideTranscript = document.getElementById("divideTranscript");
divideTranscript.onclick = EventHandler;
function EventHandler() {
changeText();
}
function changeText() {
var sArr = transcriptText.innerHTML.split(" ");
transcriptText.innerHTML = "";
console.log(sArr);
var count = 0;
for (var i = 0; i < sArr.length; i++) {
var item = sArr[i];
var newSpan = document.createElement("span");
var newText = document.createTextNode(item);
var dotNode = document.createTextNode(" ");
newSpan.id = "word" + i;
var mouseOverFunction = function () {
this.style.backgroundColor = 'yellow';
};
newSpan.onmouseover = mouseOverFunction;
var mouseOutFunction = function () {
this.style.backgroundColor = '';
};
newSpan.onmouseout = mouseOutFunction;
newSpan.appendChild(newText);
newSpan.appendChild(dotNode);
transcriptText.appendChild(newSpan);
count++;
};
}
};
Here is it live http://jsfiddle.net/b94DG/1/
The main problem is that you use the innerHTML property instead of the .textContent property each time.
Here is an improved version of changeText() that doesn't matter how many times you run it:
function changeText() {
var sArr = transcriptText.textContent.split(/\s+/g); // changed
transcriptText.innerHTML = "";
var count = 0;
for (var i = 0; i < sArr.length; i++) {
var item = sArr[i];
if (!item) continue; // changed: don't add spans for empty strings
var newSpan = document.createElement("span");
var newText = document.createTextNode(item);
var dotNode = document.createTextNode(" ");
newSpan.id = "word" + i;
var mouseOverFunction = function () {
this.style.backgroundColor = 'yellow';
};
newSpan.onmouseover = mouseOverFunction;
var mouseOutFunction = function () {
this.style.backgroundColor = '';
};
newSpan.onmouseout = mouseOutFunction;
newSpan.appendChild(newText);
newSpan.appendChild(dotNode);
transcriptText.appendChild(newSpan);
count++;
};
}

Categories

Resources