How do you refresh inner HTML every second? - javascript

I have just started to learn how to code javascript from my college courses and I am having some trouble on this part that seems like it should work for me.
var cookieAmount = 0;
var cookiePerSecond = 0;
var cookiePerClick = 1;
function firstTimeLoad(){
refreshClickStats();
}
function cookieClick(){
cookieAmount += cookiePerClick;
refreshClickStats();
}
function refreshClickStats(){
var stats = "<p>You have " + cookieAmount + " cookies.<br>You have " + cookiePerSecond + " cookies per second.</p>";
document.getElementById('cookieStats').innerHTML = stats;
}
function cookiePerSecondFunction(){
cookieAmount =+ cookiePerSecond;
refreshClickStats();
}
window.setInterval(cookiePerSecondFunction(), 1000);
The problem is that the setInterval always works once and then gives me a "cannot set property 'innerHTML' of null". But if I comment the refresh function from the cookiesPerSecondFunction it doesn't give me an error. So what am I doing wrong the the 1 second timer is only working once and giving me an error the rest of the time?
Thanks,
Mark Mueller

Is this what you are looking for?
var cookieAmount = 0;
var cookiePerSecond = 0;
var cookiePerClick = 1;
function firstTimeLoad() {
refreshClickStats();
}
function cookieClick() {
cookieAmount += cookiePerClick;
refreshClickStats();
}
function refreshClickStats() {
var stats = "<p>You have " + cookieAmount + " cookies.<br>You have " + cookiePerSecond + " cookies per second.</p>";
document.getElementById('cookieStats').innerHTML = stats;
}
function cookiePerSecondFunction() {
cookieAmount = ++cookiePerSecond;
refreshClickStats();
}
window.setInterval(cookiePerSecondFunction, 1000);
<div id="cookieStats"></div>

Related

Website not responding - I think due to javascript code

I'm trying to make a game in javascript and display it on my website, but the website isn't responding anymore. The internet connection is just fine.
Here is the code where I think it went wrong:
$(function(){
init();
console.log("Main Init Called")
});
function InitFilesRanksBrd() {
var index = 0;
var file = FILES.FILE_A;
var rank = RANKS.RANK_1;
var sq = SQUARES.A1;
for(index = 0; index < BRD_SQ_NUM; ++index) {
FilesBrd[index] = SQUARES.OFFBOARD;
RanksBrd[index] = SQUARES.OFFBOARD;
}
for(rank = RANKS.RANK_1; rank <= RANKS.RANK_5; ++rank) {
for(file = FILES.FILE_1; rank <= FILES.FILE_E; ++file) {
sq = FR2SQ(file,rank);
FilesBrd[sq] = file;
RanksBrd[sq] = rank;
}
}
console.log("FilesBrd[0]:" + FilesBrd[0] + " RanksBrd[0]:" + RanksBrd[0]);
console.log("FilesBrd[SQUARES.A1]:" + FilesBrd[SQUARES.A1] + " RanksBrd[SQUARES.A1]:" + RanksBrd[SQUARES.A1]);
//console.log("FilesBrd[SQUARES.C5]:" + FilesBrd[SQUARES.C5] + " RanksBrd[SQUARES.C5]:" + RanksBrd[SQUARES.C5]);
console.log(FilesBrd);
console.log(RanksBrd);
}
function init(){
console.log("init() called");
InitFilesRanksBrd();
}
In the inner for, the variable that you are comparing is rank, not file. It should be:
for(file = FILES.FILE_1; file <= FILES.FILE_E; ++file)
Because the rank variable isn't incrementing until the loop content end, but the loop content doesn't end because of the inner loop.

Value is added by 1, but the function is still working with the old value. Why?

I try to code a TextAdeventure and I want that a value is added by one so the program can continue with the array of part2 , then part3 and so on.
The program is showing the first part (array1) correctly. Then the value is added by 1 and the program should show the second part (array2), but it is still showing part 1. The arrays are called "part1", "part2", and so on.
When I console.log the variable "partvalue", then it shows "part2", but nevertheless the function is working with "part1". Thanks for helping.
var iCounterText = 0;
var value = 1;
var partvalue = eval("part" + value);
var verzog = setInterval(function(){
if (iCounterText < partvalue.length-3) {
++iCounterText;
toggleText.insertAdjacentHTML('beforeBegin', '<br>--------------<br>' + partvalue[iCounterText]);
playaudio();
}
else {
buttonLinks.innerHTML = partvalue[partvalue.length-1];
++value;
iCounterText=0;
buttonLinks.style.visibility = "visible";
clearInterval(verzog);
}
},500);
If you move the var partvalue = eval("part" + value); inside your setInterval function, I'm sure it will work as expected.
Updated
I now changed these 3 lines (and removed var partvalue = eval("part" + value);)
if (iCounterText < value) {
toggleText.insertAdjacentHTML('beforeBegin', '<br>--------------<br>part' + value);
buttonLinks.innerHTML = "part" + value;
So now it looks like this
var iCounterText = 0;
var value = 1;
var verzog = setInterval(function(){
if (iCounterText < value) {
++iCounterText;
toggleText.insertAdjacentHTML('beforeBegin', '<br>--------------<br>part' + value);
playaudio();
}
else {
buttonLinks.innerHTML = "part" + value;
++value;
iCounterText=0;
buttonLinks.style.visibility = "visible";
clearInterval(verzog);
}
},500);

Javascript gallery with two items at a time

I have this gallery that shows two items at a time, but I was wondering if there's a more elegant way than repeating the same code all the time for the item B in the gallery.
Here's the main code:
var Gallery = new Object();
window.onload = function(){
Gallery.Images = ['red','blue','pink','green','yellow','purple','orange','navy'];
Gallery.CurrentIndexA = 0;
Gallery.CurrentIndexB = 1;
};
Gallery.Next = function(){
if (Gallery.CurrentIndexA < (Gallery.Images.length-1)){
Gallery.CurrentIndexA++;
Gallery.CurrentIndexB++;
console.log("A is:" + Gallery.CurrentIndexA);
console.log("B is:" + Gallery.CurrentIndexB);
}
else {
Gallery.CurrentIndexA = 0;
}
Gallery.Display();
};
Gallery.Prev = function(){
if (Gallery.CurrentIndexA > 0){
Gallery.CurrentIndexA--;
Gallery.CurrentIndexB--;
console.log("A is:" + Gallery.CurrentIndexA);
console.log("B is:" + Gallery.CurrentIndexB);
}
else {
Gallery.CurrentIndexA = (Gallery.Images.length-1);
}
Gallery.Display();
};
Gallery.Display = function(){
var photoA = document.getElementById('photoA');
var photoB = document.getElementById('photoB');
var currentImageA = Gallery.Images[Gallery.CurrentIndexA];
var currentImageB = Gallery.Images[Gallery.CurrentIndexB];
photoA.className = currentImageA;
photoB.className = currentImageB;
};
Here's a fiddle: http://jsfiddle.net/2AdA9/1/
Thanks very much!
If you want to make it look better one thing you could do is something like this.
Gallery.moveUp = function (){
Gallery.CurrentIndexA += 1;
Gallery.CurrentIndexB += 1;
};
Gallery.moveDown = function (){
Gallery.CurrentIndexA -= 1;
Gallery.CurrentIndexB -= 1;
};
Then just call those functions when you want to move up or move back.

ExternalInterface.addCallback doesnot runs well

I try make a login facebook mechanism in my flash apps.
But when I try to get the token access form callback page, the ExternalInterface.addCallback that will get and send to flash didn;t runs well.
How I can solve it?
This my code:
var accessToken:String ="";
tombol.addEventListener(MouseEvent.CLICK, onClick);
function onClick(e:MouseEvent):void{
attemptToAuthenticate();
tombol.removeEventListener(MouseEvent.CLICK, onClick);
}
function attemptToAuthenticate(...permissions):void{
var scope:String = "";
if (permissions.length > 0){
scope = "&scope=" + permissions.join(",");
}
ExternalInterface.call("window.open","https://graph.facebook.com/oauth/authorize?client_id=245127485627150&type=user_agent&redirect_uri=http://localhost/satu/callback.html"+scope,"facebookLoginWindow","height=370, width=600");
teks.text = "success get token from server fb";
ExternalInterface.addCallback("setAccessToken", setAccessToken);
ExternalInterface.call("function() {"
+ "window.setAccessToken = function(hashValue){"
+ "var satu1 = document.getElementById('satu');"
+ "satu1.setAccessToken(hashValue);"
+ "}"
+ "}");
ExternalInterface.call("window.alert", "hashValue");
teks.text += " get from flash";
}
function setAccessToken(a_hashValue:String):void{
teks.text += "setaccesstoken";
var hashParams:Array = a_hashValue.substr(1).split("&");
var hashKeyAndValue:Array;
for (var i:int = 0; i < hashParams.length; i++){
hashKeyAndValue = (hashParams[i] as String).split("=");
if (hashKeyAndValue[0] == "access_token"){
this.accessToken = hashKeyAndValue[1];
break;
}
}
this.request("me","");
}
// some code below.....

Issue while Accessing a Global variable in Javascript

I am unable to access NatArray[ ] in the second function, and u4count in the second function is coming as 0. What may be the reason?
<script type="text/javascript">
var NatArray = [];
var NatArrayloc = [];
var u4count = 0;
function Check1()
{
NatArray[0] = 202116108;
NatArrayloc[0] = 202116109;
NatArray[1] = 202116111;
NatArrayloc[1] = 202116112;
NatArray[2] = 202116113;
NatArrayloc[2] = 202116114;
u4count = 3;
}
function Check()
{
alert("coming here" + u4count + "natentry" + NatArray[0] );
}
</script>
Thanks in Advance
Works for me as excpected. The order you call your functions is important in this case:
var NatArray = [];
var NatArrayloc = [];
var u4count = 0;
function Check1() {
NatArray[0] = 202116108;
NatArrayloc[0] = 202116109;
NatArray[1] = 202116111;
NatArrayloc[1] = 202116112;
NatArray[2] = 202116113;
NatArrayloc[2] = 202116114;
u4count = 3;
}
function Check() {
alert("coming here " + u4count + " natentry " + NatArray[0]);
}
Check1();
Check();
As some answering users figured out is the unclosed inline comment bad but not the reason for your problem. Something about comments in inline-code
http://fiddle.jshell.net/r8sKf/
You can call this 2 functions in window.onload so it will call second function and also alert and NatArray[ ] value inside alert.
Try something like this:
var NatArray = [];
var NatArrayloc = [];
var u4count = 0;
function Check1() {
NatArray[0] = 202116108;
NatArrayloc[0] = 202116109;
NatArray[1] = 202116111;
NatArrayloc[1] = 202116112;
NatArray[2] = 202116113;
NatArrayloc[2] = 202116114;
u4count = 3;
}
function Check() {
alert("coming here " + u4count + " natentry " + NatArray[0]);
}
window.onload=function(){
Check1();
Check();
};
Here you go:
http://jsfiddle.net/R23eD/
You need to remove the <!-- from your script start. And you're also not calling the Check1() function to initialize the values

Categories