0

I wrote some functions involving prime factorization and I noticed that when I identified my test paragraph (for testing the results of functions and such) as document.getElementById("text"), it worked fine. However, when I declared a global variable text as var text = document.getElementById("text"), and then substituted in text for the longer version, it no longer worked. I did, however, notice that it worked when I locally declared text. Why is this and how can I fix it? My JSFiddle is here: https://jsfiddle.net/MCBlastoise/3ehcz214/

And this is my code:

var text = document.getElementById("text");

function isPrime(num) {
  var lastDigit = parseInt((num + "").split("").reverse()[0]);
  if (typeof num !== "number" || num <= 1 || num % 1 !== 0) {
   return undefined;
  }
 else if (num === 2) {
   return true;
  }
  else if (lastDigit === 0 || lastDigit === 2 || lastDigit === 4 || lastDigit === 5 || lastDigit === 6 || lastDigit === 8) {
   return false;
  }
  else {
    for (var i = 2; i < num; i++) {
     if (num % i === 0) {
        return false;
      }
    }
    return true;
  }
}

function factorSplit(dig) {
  if (typeof dig !== "number" || dig <= 1 || dig % 1 !== 0) {
    return undefined;
  }
  else if (dig === 2) {
   return undefined;
  }
  else {
   var factor;
   for (var i = 2; i < dig; i++) {
     if (dig % i === 0) {
      factor = i;
    break;
    }
   }
   if (factor === undefined) {
     return undefined;
   }
  else {
    return [factor, (dig / factor)];
  }
  }
}

function allPrimes(arr) {
 if (Array.isArray(arr) === false || arr.length < 1) {
  return undefined;
 }
 else {
    for (var i = 0; i < arr.length; i++) {
    if (isPrime(arr[i]) !== true) {
       return false;
     }
   }
  return true;
 }
}

function primeFactors(int) {
 if (typeof int !== "number" || int <= 1) {
   return undefined;
  }
  else if (isPrime(int) === true) {
   return false;
  }
  else {
   var initFactors = factorSplit(int);
   while (allPrimes(initFactors) !== true) {
    initFactors = initFactors.concat(factorSplit(initFactors[initFactors.length - 1]));
     initFactors.splice((initFactors.length - 3), 1);
   }
   return initFactors;
  }
}

function listPrimes() {
 repeat = setInterval(findPrime, 1);
}

var primeInts = [2];
var check;
function findPrime() {

  var i = primeInts[primeInts.length - 1] + 1;
 if (check === undefined) {
  check = true;
  text.innerHTML = primeInts[0];
 }
 else {
  while (isPrime(i) !== true) {
   i++;
  }
  primeInts.push(i);
  text.innerHTML += ", " + primeInts[primeInts.length - 1];
 }
}

//text.innerHTML = isPrime(6);
<div onclick="listPrimes()" style="cursor:pointer; background-color:black; width:30px; height:30px"></div>
<p id="text"></p>
MCBlastoise
  • 37
  • 7
  • not sure what your problem is; you want to use a global `text`? – Jonathan Portorreal Mar 07 '17 at 03:20
  • thats the confusing part, it doesn't change anything. The code still has the same functionality when I do comment it out so there appears to be no issue ? – Jonathan Portorreal Mar 07 '17 at 03:28
  • @JonathanPortorreal I want to globally define the element (the paragraph with id text) once and then be able to use it in all of my functions. However, I ended up having to locally define the element again in all my functions. This can be observed by commenting out the line underneath the comment in `findPrime()`. I don't see why it would be necessary to redefine the element locally. – MCBlastoise Mar 07 '17 at 03:28
  • @JonathanPortorreal After commenting out the line, the function ceases to work. https://jsfiddle.net/MCBlastoise/3ehcz214/ – MCBlastoise Mar 07 '17 at 03:47
  • its working in your code snippet just fine. From above the issue is something jsfiddle related – Jonathan Portorreal Mar 07 '17 at 03:50
  • I apologize. I see that you are right. I did not test it in the code snippet above, only JSFiddle. Do you by any chance know why it would not work in JSFiddle? – MCBlastoise Mar 07 '17 at 03:57
  • it's a simple fix just look at my answer and make sure your js is loaded after the html – Jonathan Portorreal Mar 07 '17 at 04:01

1 Answers1

0

The text is global, you just need to make sure the whole script file is included in the html. Here's an example of what I mean

Here in code snippets stackoverflow does this for us already.

var text = document.getElementById("text");

function isPrime(num) {

  var lastDigit = parseInt((num + "").split("").reverse()[0]);
  if (typeof num !== "number" || num <= 1 || num % 1 !== 0) {
    return undefined;
  } else if (num === 2) {
    return true;
  } else if (lastDigit === 0 || lastDigit === 2 || lastDigit === 4 || lastDigit === 5 || lastDigit === 6 || lastDigit === 8) {
    return false;
  } else {
    for (var i = 2; i < num; i++) {
      if (num % i === 0) {
        return false;
      }
    }
    return true;
  }
}

function factorSplit(dig) {

  if (typeof dig !== "number" || dig <= 1 || dig % 1 !== 0) {
    return undefined;
  } else if (dig === 2) {
    return undefined;
  } else {
    var factor;
    for (var i = 2; i < dig; i++) {
      if (dig % i === 0) {
        factor = i;
        break;
      }
    }
    if (factor === undefined) {
      return undefined;
    } else {
      return [factor, (dig / factor)];
    }
  }
}

function allPrimes(arr) {
  if (Array.isArray(arr) === false || arr.length < 1) {
    return undefined;
  } else {
    for (var i = 0; i < arr.length; i++) {
      if (isPrime(arr[i]) !== true) {
        return false;
      }
    }
    return true;
  }
}

function primeFactors(int) {
  if (typeof int !== "number" || int <= 1) {
    return undefined;
  } else if (isPrime(int) === true) {
    return false;
  } else {
    var initFactors = factorSplit(int);
    while (allPrimes(initFactors) !== true) {
      initFactors = initFactors.concat(factorSplit(initFactors[initFactors.length - 1]));
      initFactors.splice((initFactors.length - 3), 1);
    }
    return initFactors;
  }
}

function listPrimes() {
  repeat = setInterval(findPrime, 1);
}

var primeInts = [2];
var check;

function findPrime() {

  var i = primeInts[primeInts.length - 1] + 1;
  if (check === undefined) {
    check = true;
    text.innerHTML = primeInts[0];
  } else {
    while (isPrime(i) !== true) {
      i++;
    }
    primeInts.push(i);
    text.innerHTML += ", " + primeInts[primeInts.length - 1];
  }
}

function test() {
  console.log("inside test1")
  console.log(text);
  text.innerHTML = "testtt"
}

function test2() {
  console.log("inside test2")
  console.log(text);
  text.innerHTML = "testtt2"
}

text.innerHTML = isPrime(6);
<div onclick="test()" style="cursor:pointer; background-color:black; width:30px; height:30px"></div>


<p id="text"></p>

<div onclick="test2()" style="cursor:pointer; background-color:black; width:30px; height:30px"></div>

In the head the script runs/loads first and because you don't have the var's in a function they are never re-used they remain with the original value which is null since the document didn't exist at that time, then when the page loads all it has is access to the functions a call to the global var is null. This is why the code previously only worked when text = document.getElementById('text') was in a function.

Jonathan Portorreal
  • 2,730
  • 4
  • 21
  • 38