Develop Reference

Global variable not updating outside function

Trying to make variable created inside function possible to access globally, so far
console.log(proper_head);
constantly displays "1" while I need it to be updated every time the function is executed, here is my function:
var i = 0;
function change_head() {
if (i < head_class.length) {
head.classList.add(head_class[i].name);
i++;
var h = i;
return h;
} else if (i = 3) {
head.className = "";
i -= 3;
var h = i;
return h;
}
}
var proper_head = change_head();
it is executed by pressing a button (not sure if it's important).
The only solution I came up with is to
setTimeout()
I'm sure there is a better way.

You could use a recursive implementation like this:
var i = 0;
function change_head() {
if (i < head_class.length) {
head.classList.add(head_class[i].name);
i++;
var h = i;
return h;
} else if (i = 3) {
head.className = "";
i -= 3;
var h = i;
return h;
}
change_head();
}
The problem is that your function is only being called once, you can call the function from within itself, however the above example will never stop, and will probably hit the max call stack size in your browser and then crash, i would recommend wrapping it in some sort of if statement so that it stops at some point, e.g i > 50.
Edit:
I see what your actual problem is, neither of your if blocks are firing, after the first press, head_class.length === 1 so "if (i < head_class.length)" wont fire, it's also not equal to 3 for the else block so nothing happens, the else block also has an error, try changing it to this:
if (i < 3) {
head.classList.add(head_class[i].name);
i++;
var h = i;
return h;
} else if (i == 3) {
head.className = "";
i -= 3;
var h = i;
return h;
}
i = 3 is for assignment, i == 3 is for comparison.
Hope this helps
Lloyd

Javascript + HTML: Button Not Calling on Function Onclick

I have made a button:
<input type="button" value="a" onclick="searchLetter(this)"></input>
When clicked, it is supposed to call on a function which checks if the letter is in the word and if it is, add it to the spaces array in the corresponding spot:
function searchLetter(obj)
{
var letter = obj.value;
obj.disable;
for (i = 0; i <= word.length; i++){
if (word[i] == letter) {
wordSpaces[i] = letter;
document.getElementById('spaces').innerHTML = wordSpaces.join('');
break;
}
}
}
However, the button is not calling on it and I am not sure why.
Here is the JSFiddle (Hangman)

function pickWord() {
var word = dictionary[Math.floor(Math.random() * dictionary.length)];
var wordSpaces = [];
for (var i = word.length - 1; i >= 0; i--)
wordSpaces.push("_ ");
document.getElementById('spaces').innerHTML = wordSpaces.join('');
}
In your code, word and wordSpaces are a local variable to that function.
But in
function searchLetter(obj) {
var letter = obj.value;
for (var i = 0; i <= word.length; i++) {
you're trying to refer the word variable. That's why it's not entering the loop
So it must be like:
var word, wordSpaces;
function pickWord() {
word = dictionary[Math.floor(Math.random() * dictionary.length)];
wordSpaces = [];
for (var i = word.length - 1; i >= 0; i--)
wordSpaces.push("_ ");
document.getElementById('spaces').innerHTML = wordSpaces.join('');
}
function searchLetter(obj) {
var letter = obj.value;
for (var i = 0; i <= word.length; i++) {
if (word[i] == letter) {
wordSpaces[i] = letter;
document.getElementById('spaces').innerHTML = wordSpaces.join('');
break;
}
}
}

It's a scope issue. The searchLetter function is trying to access your word variable, but can't find it because it's in the other function and not within this function's scope.
One way to correct this is by declaring word in the global scope.

There is several errors in your code. You can use the console of your browser to see them (f12 opens it on all browsers, I think).
You have to declare the variables word and wordSpaces outside the pickWord function.
https://jsfiddle.net/gael/3vdwLasc/3/
You should also verify that the word has been initialized when you click on a letter.

Javascript Learnstreet Email Interpreter Alternative Solution

So I was doing this assignment on Learnstreet and for those of you who want to read a little on the question here's the link:
http://www.learnstreet.com/cg/simple/project/email_interpret#check
Long story short - you're given a email string like "local#domain.com" and you're expected to return a 2 member array that would look like ["local","domain"]. So I wrote this and am wondering how this is not correct.
function extractLocalDomain(str)
{
var text = str.trim(); //eliminates leading and trailing spaces
for(var i = 0; i < text.length; i++) {
if(text[i] == "#") {
var local = text.slice(0, i-1);
var domain = text.slice(i+1)
return [local,domain];
}
i++
}
}

You are incrementing i twice:
function extractLocalDomain(str) {
var text = str.trim();
for (var i = 0; i < text.length; i++) { // <- increment here
if (text[i] == "#") {
var local = text.slice(0, i - 1);
var domain = text.slice(i + 1)
return [local, domain];
}
i++ // <- and here agin, remove this
}
}
Instead of using a loop, you can also just use .indexOf.

Adding a variable outside a function each time the function is called

I am trying to add up the result of a function, after each time the function is called, here is my code:
function computetime(result) {
var time=0;
var mytravelroute=result.routes[0];
for (i = 0; i < mytravelroute.legs.length; i++) {
time += mytravelroute.legs[i].duration.value;
}
var totalSec = time;
I want to add up the "time" variable, each time the function is called. Right now the "time" variable get over written each time, and I need to capture the value each time.
Any ideas? disclaimer: Prog lvl: peon.

var time=0;
function computetime(result) {
var mytravelroute=result.routes[0];
for (i = 0; i < mytravelroute.legs.length; i++) {
time += mytravelroute.legs[i].duration.value;
}
var totalSec = time;

Looks like you simply need a global variable.
var totalSec;
function computetime(result) {
var mytravelroute=result.routes[0];
for (i = 0; i < mytravelroute.legs.length; i++) {
totalSec += mytravelroute.legs[i].duration.value;
}

You can do this:
function computetime(result) {
computetime.time = computetime.time || 0;
var mytravelroute = result.routes[0];
for (i = 0; i < mytravelroute.legs.length; i++) {
computetime.time += mytravelroute.legs[i].duration.value;
}
}

There are lots of ways to do this. It involves closures. You should read about scoping and closures in javascript. Here is one way to do it.
var tracker = {
time: 0
computetime: function computetime(result) {
var mytravelroute=result.routes[0];
for (i = 0; i < mytravelroute.legs.length; i++) {
tracker.time += mytravelroute.legs[i].duration.value;
}
return tracker.time;
}
}
tracker.computetime(result)

I am trying to set bottom of element but its value is coming up NaN

function CheckavailOnload()
{
var elems = document.getElementsByClassName('box-collateral box-related');
var av = document.getElementsByClassName('availability in-stock');
var x;
for (var i = 0; i < elems.length; i++)
{
if (getComputedStyle(elems[i]).visibility == 'visible')
{
for (var j = 0; j < av.length; j++)
{
av[j].style.visibility = 'visible';
if(elems[i].offsetTop < 0)
{
var x = (elems[i].offsetHeight + (elems[i]).offsetTop).toString() + "px";
alert(x);
}
for(m = 0;m < av.length; m++)
{
av[m].style.Bottom = (-x);
return;
}
}
}
}
for (var k = 0; k < av.length; k++)
{
av[k].style.visibility = 'hidden';
}
var divs = document.getElementsByClassName('add-to-cart');
for(var l = 0; l < divs.length; l++)
{
divs[l].style.marginTop = (-500).toString() + "px";
divs[l].style.marginLeft = (-20).toString() + "px";
}
}
window.onload = CheckavailOnload;
here i am trying to move a paragraph tag have baground image depending upon the div offsetTop and Offset height div also have bacground image i am moving para tag just below the div but addition of offsetHeight and offsetTop is coming NAN please anyone can help me

You've declared var x; at the beginning of your script. Then later you're checking:
if(elems[i].offsetTop < 0) {
var x = (elems[i]...); // var is not recommended to be here, x has been already declared once
}
If elems[i].offsetTop happens to be >= 0, x will be undefined in this line:
av[m].style.Bottom = (-x); // Notice a typo here: should be av[m].style.bottom
This last expression gives you NaN. To avoid this, you need to either assign a default value to x in the beginning of the script, or add an else statement after the if wherein some numeric value is assigned to x.
Also return in the for...m-loop seems to break your code, the loop will never finish the job and the rest of the code will be never executed.
Using (-500).toString() + "px"; feels complex, why not just use "-500px";?