We Keep Coding

How to get this random

var mess = [];
mess.push('test1');
mess.push('test2');
mess.push('test3');
var num = Math.floor((Math.random() * mess.length));
document.writeln(mess[num]);
This code here generates a random output when refreshing the page. What I want to know how to do is get it to change automatically like dynamically on the page it will change every 5 seconds or so.
How would I go about doing this?
Any help is appreciated Thank you!

Specify a container in your HTML, instead of using document.writeln:
<span id="target">This will be filled by Javascript</span>
Now wrap your code in a function, store its result in the span, and use setTimeout to make it periodical.
var mess = [];
mess.push('test1');
mess.push('test2');
mess.push('test3');
function randomize() {
document.getElementById('target').innerHTML =
mess[Math.floor((Math.random() * mess.length))];
setTimeout(randomize, 5000);
}
randomize(); // initial call to get it going
Put the Javascript in your code after the declaration of the span, or you'll get an error stating that you Cannot set property innerHTML on NULL.

You can use recursive function.
Sorry if I missunderstood your question, but you want something like this right?
window.onload = function(){
var mess = [];
mess.push('test1');
mess.push('test2');
mess.push('test3');
(function r() {
var num = Math.floor((Math.random() * mess.length));
document.body.innerHTML = mess[num];
setTimeout(r, 5000);
})();
};

You can make use of setInterval to generate a new random index at interval of every 5 seconds and then print random value from array.
var mess = [];
mess.push('test1');
mess.push('test2');
mess.push('test3');
setInterval(
function() {
var num = Math.floor((Math.random() * mess.length))
document.write(mess[num]);
}, 5000);
Refer this fiddle
http://jsfiddle.net/3wpcp35L/

Javascript, counting in seconds - adding a point each time

So I am working on a project of mine and I'd like some help.
I'd like javascript to be able to count in seconds, each second it'd add a preset amount of points.
var total_points = 0
var points_per_click = 1
var points_per_second = 0
function points_per_second() {
docuement.getElementById("current_points").innerHTML("Current Points: " + total_points);
//insert here?
}
I would also like the points_per_second to be able to add into the total_points var. Thanks!

docuement is spelt "document", .innerHTML is not a function call (set it like a variable) & variables and functions share the same namespace, i.e. don't set a variable points_per_second and then declare a function of the same name.
Once you have your syntax errors sorted, you were probably looking for setInterval.
var total_points = 0;
var points_per_click = 1;
var points_per_second = 2;
function update_display(){
var el = document.getElementById("current_points");
el.innerHTML = "Current Points: " + total_points;
//insert here? ... No
}
var ticker = setInterval(function(){
total_points += points_per_second;
// ... or whatever your intended logic
update_display();
}, 1000);
jsFiddle

How to get the next element of an array with Jquery onclick

Hi all i am trying to change the html of an object from an array of htmls. But i am having problem iterating properly. I managed to make it work once
EDIT
After a few complains about the clarity of my question I will rephrase it. I have a div panel called .trpanel and a button called #trigger2 (it is a next button). Then I have a series of divs with texts that contain translations. I want when I press the button (called next) to cycle through the translations one by one on the trpanel.
var ltranslation = [];
ltranslation[0] = $("#translation-en-1").html();
ltranslation[1] = $("#translation-ur-en").html();
ltranslation[2] = $("#translation-fr-en").html();
ltranslation[3] = $("#translation-it-en").html();
ltranslation[4] = $("#translation-sp-en").html();
ltranslation[5] = $("#translation-po-en").html();
ltranslation[6] = $("#translation-fr-en").html();
ltranslation[7] = $("#translation-de-en").html();
var l= ltranslation;
$("#trigger2").off('click').on('click',function(){
for (var i = 0; i <= ltranslation.length; i++){
if (i==7){i=0;}
$(".trpanel").html.ltranslation[i]; or ???//replace().ltranslation[]+i??? the code throws errors
}
});
I am quite new to Javascript and i am getting a bit confused with the types of objects and arrays and loops. I managed once to add the htmls but without replacing them ... so they all came one after the other. The i tried to change the code and it hasn't worked since. Any help will be greatly appreciated.

A lot of guessing, but seems like you are trying to do this :
var trans = $('[id^="translation-"]'),
idx = 0;
$("#trigger2").on('click',function(){
$(".trpanel").html( trans.eq(idx).html() );
idx = idx > 6 ? 0 : idx+1;
});
FIDDLE

I think you are trying to do this:
if (i == 7) {
i = 0; // I don't really know why you are doing this, but it will reset the loop
}
$(".trpanel").html(ltranslation[i]); //I'm passing ltranslation[i] to the html method. Instead of .html.ltranslation[i].
}
Also, without seeing any html, I'm not sure but I think you may want to iterate over .trpanel ?
Something like:
$(".trpanel").eq(i).html(ltranslation[i]);
Another thing (so you can make your code clearer I think). You can abstract the array population in a function, like this:
var ltranslation = [];
var languages = ["en-1", "ur-en", "fr-en", "it-en", "sp-en", "po-en", "fr-en", "de-en"];
$.each(languages, function(index) {
ltranslation[index] = $("#translation-" + this).html();
});
// Then you can use ltranslation

If you want to flip through several translations I would implement it that way:
var translations=["hej","hello", "hallo","hoy"];
var showTranslation=function(){
var current=0;
var len=translations.length;
return function(){
var direction=1;
if (current>=len) current=0;
$("#text").text(translations[current]);
current+=direction;
}
}();
$("#butt").on("click", showTranslation);
Fiddle: http://jsfiddle.net/Xr9fz/
Further: You should give your translations a class, so you could easily grab all of them with a single line:
$(".translation).each(function(index,value){ ltranslation.push(value); })

From the question : I managed once to add the htmls but without replacing them -
I think you want to add all of these items into $(".trpanel"). First, dont take the HTML of each element, clone the element itself :
//method ripped from Nico's answer.
var ltranslation = [];
var languages = ["en-1", "ur-en", "fr-en", "it-en", "sp-en", "po-en", "fr-en", "de-en"];
$.each(languages, function(index) {
ltranslation[index] = $("#translation-" + this).clone();
});
Then you could append everything into the container, so add the htmls but without replacing them. append takes in an array without replacing the previous html.
$("#trigger2").off('click').on('click',function() {
$(".trpanel").append(ltranslation);
});

I don't know what exactly you're tring to do, but I've put comments in your code to help you better understand what your code is doing. The net effect of your code is this (which I doubt you want) :
$("#trigger2").off('click').on('click',function(){
$(".trpanel").html(ltranslation[7]);
});
This is your code with some comments and minor changes
var ltranslation = [];
ltranslation[0] = $("#translation-en-1").html();
ltranslation[1] = $("#translation-ur-en").html();
ltranslation[2] = $("#translation-fr-en").html();
ltranslation[3] = $("#translation-it-en").html();
ltranslation[4] = $("#translation-sp-en").html();
ltranslation[5] = $("#translation-po-en").html();
ltranslation[6] = $("#translation-fr-en").html();
ltranslation[7] = $("#translation-de-en").html();
var l= ltranslation;
$("#trigger2").off('click').on('click',function(){
for (var i = 0; i < ltranslation.length; i++){
//if (i==7){i=0;} <-- This will cause an infinite loop won't it? are you trying to reset i? i will reset next time loop is called,
$(".trpanel").html(ltranslation[i]); //<-- this will overwrite elements with class .trpanel ltranslation.length times...
///you'll see only the value of translation[7] in the end
}
});
EDIT
To do what you want to do based on your comments, try this:
var ltranslation = [];
ltranslation[0] = $("#translation-en-1").html();
ltranslation[1] = $("#translation-ur-en").html();
ltranslation[2] = $("#translation-fr-en").html();
ltranslation[3] = $("#translation-it-en").html();
ltranslation[4] = $("#translation-sp-en").html();
ltranslation[5] = $("#translation-po-en").html();
ltranslation[6] = $("#translation-fr-en").html();
ltranslation[7] = $("#translation-de-en").html();
var counter = 0;//a global counter variable
$("#trigger2").click(function(){ //eeverytime button is clicked do this
$(".trpanel").html(ltranslation[counter]); //set the html to an element of array
counter++; //increment counter
if(counter==ltranslation.length) //reset the counter if its bigger than array len
counter=0;
});

Javascript using different configurations for different outputs

Hi being a complete and utter idiot at the moment, where I have staring at this stuff for hours and now have no clue what I am doing.
Basically in one which I will name here as product.js I have Global Variables fixed
var AREA_MAX_MAXX = 1000;
var AREA_MAX_MINX = 60;
these are being then being used within another js which I will call library.js with the following:
this.area_max_maxx = AREA_MAX_MAXX;
this.area_max_miny = AREA_MAX_MINX;
this.calcPos = function() {
var areaMaxWidth = this.area_max_maxx - this.area_max_minx;
What I want to do is remove the Global Variables and instead have it set up with arrays, so that whatever the array is the values will be set forarea_max_maxx
Can anyone help me out there??? Am I making sense?

You mean like this?
this.minAndMax = [60, 1000];
this.calcPos = function() {
var areaMaxWidth = this.minAndMax[1] - this.minAndMax[0];
}
I would recommend instead using an object:
this.areaParameters = {min: 60, max: 1000}
this.calcPos = function() {
var areaMaxWidth = this.areaParameters.max - this.areaParameters.min;
}
Later, you can just say this.areaParameters.max = 3000 and next time calcPos gets called it will use the new value.

This is not possible. You are passing a value not a reference here:
this.area_max_maxx = AREA_MAX_MAXX;

Loops in GreaseMonkey

I'm developing my first greasemonkey script (trying to edit and add page content to a particular website) and for some reason, it refuses to work beyond one while loop.. Eg :
var anchorTag = window.document.getElementsByTagName('a');
var anchorTagNumber = window.document.getElementsByTagName('a').length;
..
..
i = 0
j = 0;
function collectId(i,link) {
linkArray[j] = new Array(2);
linkArray[j][0] = i;
linkArray[j][1] = link;
j++;
}
while(i <= anchorTagNumber)
{
testHref = anchorTag[i].href;
testHTML = anchorTag[i].innerHTML;
patHref = /some regex/;
patCaptureId = /some regex/;
testId = patCaptureId.exec(testHref);
patHTML = /some regex/;
patHTML2 = /some regex/;
patHTML3 = /some regex/;
if(patHref.test(testHref) && !patHTML.test(testHTML) && !patHTML2.test(testHTML))
{
linkId = testId[1];
collectId(i,linkId);
}
i++;
}
Anything after this while loop ends, refuses to work. Even a simple alert doesn't seem to execute. I have another while loop with a similar structure, and if I put that one first, it executes and this one doesn't. Any Ideas ? Thanks in advance !

The most obvious problem is that the array is being overrun, which will cause the script to error-out.
This: while(i <= anchorTagNumber)
Should be: while(i < anchorTagNumber).
If an array has length 5, for example, its last element will have an index of 4.
Also, this:
var anchorTag = window.document.getElementsByTagName('a');
var anchorTagNumber = window.document.getElementsByTagName('a').length;
Can be simplified to:
var anchorTag = window.document.getElementsByTagName('a');
var anchorTagNumber = anchorTag.length;
That will speed the code slightly but also makes future code maintenance, or reuse, easier.

Instead of using a while, you could try a setInterval to call you function every 100 miliseconds.
interval = setInterval(function(){
iDidIt = doSomethin()
if(iDidIt){
clear interval;
}
},100)