Variable via string interpolation does not repeatedly apply when text content on the parent variable exists. Why? | Test your skills: Loops 3 | JavaScript

MDN Learn
,
#1

Variable via string interpolation does not repeatedly apply within text node when text content on the parent element exists. Why? | Test your skills: Loops 3 | JavaScript

Main Question

How come when textContent property is applied to an element, a template literal variable (i) within a text node cannot be repeatedly applied via a loop to that element?

:memo:Reference: Test your skills: Loops 3

Context

The challenge specifies the following:

In this final task, you are provided with the following:

  • i — starts off with a value of 500; intended to be used as an iterator.
  • para — contains a reference to a paragraph, which will be used to report the results.
  • isPrime() — a function that, when passed a number, returns true if the number is a prime number, and false if not.

You need to use a loop to go through the numbers 2 to 500 backwards (1 is not counted as a prime number), and run the provided isPrime() function on them. For each number that isn’t a prime number, continue on to the next loop iteration. For each one that is a prime number, add it to the paragraph’s textContent along with some kind of separator.

Output

The console does not give any messages in either case.

Expected (with problem line commented)

The expected output (and the current one) on the webpage with line 4 (line 47 on the full source) commented out is the following on the webpage:
499, 491, 487, 479, 467, 463, 461, 457, 449, 443, 439, 433, 431, 421, 419, 409, 401, 397, 389, 383, 379, 373, 367, 359, 353, 349, 347, 337, 331, 317, 313, 311, 307, 293, 283, 281, 277, 271, 269, 263, 257, 251, 241, 239, 233, 229, 227, 223, 211, 199, 197, 193, 191, 181, 179, 173, 167, 163, 157, 151, 149, 139, 137, 131, 127, 113, 109, 107, 103, 101, 97, 89, 83, 79, 73, 71, 67, 61, 59, 53, 47, 43, 41, 37, 31, 29, 23, 19, 17, 13, 11, 7, 5, 3, 2,

With problem line uncommented

The output with the line 4/47 uncommented on the webpage is:
2,

Source Code

Below is the source code I wrote. Between the comments // Add your code here and // Don't edit your code here, is my own source where I am suppose to write, and is not provided by the challenge itself. The problematic line (4/47) commented in my code section.

Mine:

 while (i > 1) {
                    if (isPrime(i) === true) {
                                const sectSelector = document.querySelector("section"); 
                                // para.textContent = ""; // if textContent is applied, loop breaks and only applies one instance: ("3,") without quotes/parenthesis as a created text node to the paragraph
                                sectSelector.appendChild(para); 
                                const text = document.createTextNode(`${i}, `);
                                const paraSelector = document.querySelector("p");
                                paraSelector.appendChild(text);
                            }
                    i--;
        }

Full:

<!DOCTYPE html>
<html lang="en-US">
    <head>
        <meta charset="utf-8"/>
        <title>Loops: Task 3</title>
        <style>
p {
    color: purple;
    margin: 0.5em 0;
}

* {
    box-sizing: border-box;
}
        </style>
        <link rel="stylesheet" href="../styles.css" />
    </head>

    <body>

        <section class="preview">



        </section>

    </body>
    <script>
        let i = 500;
        const para = document.createElement('p');

        function isPrime(num) {
                    for(let i = 2; i < num; i++) {
                                if(num % i === 0) {
                                            return false;
                                        }
                            }

                    return true;
                }


        // Add your code here
        while (i > 1) {
                    if (isPrime(i) === true) {
                                const sectSelector = document.querySelector("section"); 
                                // para.textContent = ""; // if textContent is applied, loop breaks and only applies one instance: ("3,") without quotes/parenthesis as a created text node to the paragraph
                                sectSelector.appendChild(para); 
                                const text = document.createTextNode(`${i}, `);
                                const paraSelector = document.querySelector("p");
                                paraSelector.appendChild(text);
                            }
                    i--;
        }
        // Don't edit the code below here!
        const section = document.querySelector('section');
        section.appendChild(para);
    </script>

</html>
1 Like