How to debug non-working javascript code in a browser

Question

This js program should display the first 100 prime numbers, but instead it crashes each and every time and I can't find the error! Could someone point me towards the best way to debug js code?! Thank you!

// initialisation of the array p holding the first 100 prime numbers
var p = [];

// set the first prime number to 2
p.push(2);

// find the first 100 prime numbers and place them in the array p
var i = 3;
while (p.length < 100) {
    var prime = true;
    loop:
    for (var item in p){
        if (i%item === 0){
            prime = false;
            break loop;
        }
    }
    if (prime)
        p.push(i);
    i = i + 2;
}

// display the first 100 prime numbers found
var i=1;
for (var item in p){
    document.writeln(i,item);
    i++;
}

Use your browser's debugger? Put in some console.log() statements to double-check your expectations? Use paper and pen(cil) to step through the code? — Dave Newton
– Dave Newton, Commented Jun 27, 2013 at 12:35
Avoid use label statements developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… You can just use break; — Givi
– Givi, Commented Jun 27, 2013 at 12:38

Barmar · Accepted Answer · 2013-06-27 12:42:59Z

2

Change:

for (var item in p) {

to:

for (var i = 0; i < p.length; i++) {
    item = p[i];

for-in iterates over the keys of an object or array, not the values.

answered Jun 27, 2013 at 12:42

Barmar

789k57 gold badges554 silver badges669 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Olivier Over a year ago

"for-in iterates over the keys of an object or array, not the values" was indeed the problem! Thank you, Barmar.

Sawyer · Accepted Answer · 2013-06-27 12:46:42Z

First, put your algorithm in to a funciton and put this function into a page html. like:

<html>
<head>
<script>

function test(){
// initialisation of the array p holding the first 100 prime numbers
var p = [];

// set the first prime number to 2
p.push(2);

// find the first 100 prime numbers and place them in the array p
var i = 3;
while (p.length < 100) {
    var prime = true;
    loop:
    for (var item in p){
        if (i%item === 0){
            prime = false;
            break loop;
        }
    }
    if (prime)
        p.push(i);
    i = i + 2;
}

// display the first 100 prime numbers found
var i=1;
for (var item in p){
    document.writeln(i,item);
    i++;
}
}

</script>
</head>
    <body>
    <a onmouseclick="test()">test</a>
    </body>
</html>

then open this page in Chrome or firefox.

press F12 to open the debug panel. then go to Sources tag dans choose your page (for exemple: test.html) in the left view and make a stop point debug on the line var p =[];then click the link test on the page to begin your debug. F10 to go to another line and F11 to enter method, F8 to go to next stop point.

Hope that helps.

Stano · Accepted Answer · 2013-06-27 13:34:47Z

1

Just change

if (i%item === 0){

to

if (i % p[item] == 0){

then it will work.

jsfiddle

answered Jun 27, 2013 at 13:34

Stano

8,9796 gold badges33 silver badges46 bronze badges

Comments

Olivier · Accepted Answer · 2013-06-27 16:18:37Z

0

This is what the final working code looks like:

// initialisation of the array p holding the first 100 prime numbers
var p = [];

// set the first prime number to 2
p.push(2);

// find the first 100 prime numbers and place them in the array p
var i = 3;
var item;
var prime;
while (p.length < 100) {
    prime = true;
    for (item in p){
        if (i%p[item] === 0){
            prime = false;
            break;
        }
    }
    if (prime)
        p.push(i);
    i = i + 2;
}

// display the first 100 prime numbers found
var s = "";
for (item in p){
    if (item != p.length - 1){
        s = s + p[item] + ",";
    }
    else{
        s = s + p[item];
    }
}
alert(s);

answered Jun 27, 2013 at 16:18

Olivier

6651 gold badge6 silver badges22 bronze badges

Collectives™ on Stack Overflow

How to debug non-working javascript code in a browser

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related