To effectively store the input values from eight labels into an array and subsequently identify the prime numbers within the array using JavaScript, follow these step-by-step instructions

Question

To effectively store the input values from eight labels into an array and subsequently identify the prime numbers within the array using JavaScript, follow these step-by-step instructions

As a newcomer to JavaScript, I am trying to extract the values of 8 labels (text) and store them in an array of 8 numbers. My goal is to then identify the prime numbers within this array. While I have been able to create the array and display the labels in the HTML, I am struggling with transferring the values to the array. Any assistance on this matter would be greatly appreciated. Thank you!

The code for my solver button:

$('#btn1').click(function () {
    var primes = [true, true, true, true, true, true, true, true];

    var limit = Math.sqrt(8);

    for (var i = 1; i < 8; i++) {
        if (primes[i] === true) {
            for (var j = i * i; j < 8; j += i) {
                primes[j] = false;
            }
        }
    }

    for (var i = 1; i < 8; i++) {
        if (primes[i] === true) {
            console.log(i + " " + primes[i]);
        }
    }

});

The code for the labels:

<label>1. </label> <input id="input1" type="text"><br>
<label>2. </label> <input id="input2" type="text"><br>
<label>3. </label> <input id="input3" type="text"><br>
<label>4. </label> <input id="input4" type="text"><br>
<label>5. </label> <input id="input5" type="text"><br>
<label>6. </label> <input id="input6" type="text"><br>
<label>7. </label> <input id="input7" type="text"><br>
<label>8. </label> <input id="input8" type="text"><br>

javascript arrays

Answer 1

Answer №1

Code snippet to determine if a number is prime (source: ):

function checkPrime(num) {

   // If num is less than 2 or not an integer, it cannot be prime.
   if (num < 2) {return false}
   if (num != Math.round(num)) {return false}

   var isPrime = true;

   for (var i = 2; i <= Math.sqrt(num); i++) {
      if (num % i == 0) {isPrime = false}
   }

   return isPrime;
}

Code for clicking the solver button:

$('#btn1').click(function () {
    var limit = 8;   
    var primesData = {}; 

    for (var i = 1; i < limit; i++) {
        var inputValue = $('#input'+i).val(); 
        inputValue = parseInt(inputValue); 

        primesData[i] = {};
        primesData[i].value = inputValue;
        primesData[i].isPrime = isNaN(inputValue) ? false : checkPrime(inputValue);

        $('#result'+i).text(primesData[i].isPrime ? 'Prime' : 'Not Prime');
    }

    console.dir(primesData); 
    $('#container2').html(JSON.stringify(primesData)); 
});

The code for the labels (updated):

<label>1. </label> <input id="input1" type="text"><span id="result1"></span><br>
<label>2. </label> <input id="input2" type="text"><span id="result2"></span><br>
<label>3. </label> <input id="input3" type="text"><span id="result3"></span><br>
<label>4. </label> <input id="input4" type="text"><span id="result4"></span><br>
<label>5. </label> <input id="input5" type="text"><span id="result5"></span><br>
<label>6. </label> <input id="input6" type="text"><span id="result6"></span><br>
<label>7. </label> <input id="input7" type="text"><span id="result7"></span><br>
<label>8. </label> <input id="input8" type="text"><span id="result8"></span><br>

To display the output neatly:

var outputString = '<pre>';
for (var index in primesData) {
    outputString += primesData[index].value + ': ' + primesData[index].isPrime + "\n";
}
outputString += '</pre>';
$('#container2').html(outputString);

Answer 2

Code snippet to determine if a number is prime (source: ):

function checkPrime(num) {

   // If num is less than 2 or not an integer, it cannot be prime.
   if (num < 2) {return false}
   if (num != Math.round(num)) {return false}

   var isPrime = true;

   for (var i = 2; i <= Math.sqrt(num); i++) {
      if (num % i == 0) {isPrime = false}
   }

   return isPrime;
}

Code for clicking the solver button:

$('#btn1').click(function () {
    var limit = 8;   
    var primesData = {}; 

    for (var i = 1; i < limit; i++) {
        var inputValue = $('#input'+i).val(); 
        inputValue = parseInt(inputValue); 

        primesData[i] = {};
        primesData[i].value = inputValue;
        primesData[i].isPrime = isNaN(inputValue) ? false : checkPrime(inputValue);

        $('#result'+i).text(primesData[i].isPrime ? 'Prime' : 'Not Prime');
    }

    console.dir(primesData); 
    $('#container2').html(JSON.stringify(primesData)); 
});

The code for the labels (updated):

<label>1. </label> <input id="input1" type="text"><span id="result1"></span><br>
<label>2. </label> <input id="input2" type="text"><span id="result2"></span><br>
<label>3. </label> <input id="input3" type="text"><span id="result3"></span><br>
<label>4. </label> <input id="input4" type="text"><span id="result4"></span><br>
<label>5. </label> <input id="input5" type="text"><span id="result5"></span><br>
<label>6. </label> <input id="input6" type="text"><span id="result6"></span><br>
<label>7. </label> <input id="input7" type="text"><span id="result7"></span><br>
<label>8. </label> <input id="input8" type="text"><span id="result8"></span><br>

To display the output neatly:

var outputString = '<pre>';
for (var index in primesData) {
    outputString += primesData[index].value + ': ' + primesData[index].isPrime + "\n";
}
outputString += '</pre>';
$('#container2').html(outputString);

Answer 3

Answer №2

Instead of creating an array and looping through each element, you can simplify the process by designing a function to determine if the given label is a prime number or not. If it turns out to be a prime number, update the HTML accordingly. The PHP code snippet provided below demonstrates this concept, but the same logic applies to Javascript as well.

function is_prime($number)
{
    if ($number==1)
        return false;
    if ($number==2)
        return true;
    $sqrt = sqrt($number);
    $floor = floor($sqrt);
    for ($i=2 ; $i <= $floor ; $i++)
    {
        if ($number % $i == 0)
        {
            return false;
        }
    }
    return true;
}
$start = 1;
$labels = 8;
for($i = 1; $i <= $labels; $i++)
{
    if(is_prime($i))
    {
        echo '<label>'.$i.'. </label>'.'<input id="input'. $i.'" type="text" value=" '. $i .'">'.'<br>';
    }
}

// output

2. 2
3. 3
5. 5
7. 7

Feel free to adapt this method to suit your needs!

Answer 4

Instead of creating an array and looping through each element, you can simplify the process by designing a function to determine if the given label is a prime number or not. If it turns out to be a prime number, update the HTML accordingly. The PHP code snippet provided below demonstrates this concept, but the same logic applies to Javascript as well.

function is_prime($number)
{
    if ($number==1)
        return false;
    if ($number==2)
        return true;
    $sqrt = sqrt($number);
    $floor = floor($sqrt);
    for ($i=2 ; $i <= $floor ; $i++)
    {
        if ($number % $i == 0)
        {
            return false;
        }
    }
    return true;
}
$start = 1;
$labels = 8;
for($i = 1; $i <= $labels; $i++)
{
    if(is_prime($i))
    {
        echo '<label>'.$i.'. </label>'.'<input id="input'. $i.'" type="text" value=" '. $i .'">'.'<br>';
    }
}

// output

2. 2
3. 3
5. 5
7. 7

Feel free to adapt this method to suit your needs!

Answer 5

Answer №3

Here is the HTML code I have:

  <script>
    $(document).ready(function(){

        $('#btn1').click(function () {
            var count = 8;   // may need adjusting later
            var primes = {}; // using object instead of array

            for (var i = 1; i < count; i++) {
                var value = $('#input'+i).val(); // get input value
                value = parseInt(value); // convert from string to integer

                primes.i.value = value;
                primes.i.isPrime = isNaN(value) ? false : isPrime(value);
                $('#result'+i).text(primes.i.isPrime ? 'Prime' : 'Not Prime');
                }
        $('#container2').html(primes); // display output in console
        });

        function isPrime(n) {

        if (n < 2) {return false} // prime numbers cannot be less than 2
        if (n != Math.round(n)) {return false} // must be an integer
        var isPrime = true;

        for (var i = 2; i <= Math.sqrt(n); i++) {
            if (n % i == 0) {isPrime = false}
        }

        return isPrime;
        }

    });
</script>      
</head>

<body>
    <center><h2>Prime Numbers Calculator.</h2><br></center>
    <div class="well">
        <div class="container" id="container1">
            <div class="col-md-4">
                <label>1. </label> <input id="input1" type="text"><span id="result1"></span><br>
                <label>2. </label> <input id="input2" type="text"><span id="result2"></span><br>
                <label>3. </label> <input id="input3" type="text"><span id="result3"></span><br>
                <label>4. </label> <input id="input4" type="text"><span id="result4"></span><br>
                <label>5. </label> <input id="input5" type="text"><span id="result5"></span><br>
		<label>6. </label> <input id="input6" type="text"><span id="result6"></span><br>
                <label>7. </label> <input id="input7" type="text"><span id="result7"></span><br>
                <label>8. </label> <input id="input8" type="text"><span id="result8"></span><br>
            </div>
        <div class="col-md-4">
            <div class="container" id="container2">

            </div>
        </div>
        <div class="col-md-4">
            <div class="container" id="container3">

            </div>
        </div>
        </div>
    </div>
        <center><button id="btn1" class="btn btn-primary"> Calculate</button>
        <button id="btn2" class="btn btn-primary"> Show Results</button>
        <button id="btn3" class="btn btn-primary"> Sort</button>
        <button id="btn4" class="btn btn-primary"> Clear Input</button></center>
</body>

Having trouble displaying results in a different container, need some help with that.

Answer 6

Here is the HTML code I have:

  <script>
    $(document).ready(function(){

        $('#btn1').click(function () {
            var count = 8;   // may need adjusting later
            var primes = {}; // using object instead of array

            for (var i = 1; i < count; i++) {
                var value = $('#input'+i).val(); // get input value
                value = parseInt(value); // convert from string to integer

                primes.i.value = value;
                primes.i.isPrime = isNaN(value) ? false : isPrime(value);
                $('#result'+i).text(primes.i.isPrime ? 'Prime' : 'Not Prime');
                }
        $('#container2').html(primes); // display output in console
        });

        function isPrime(n) {

        if (n < 2) {return false} // prime numbers cannot be less than 2
        if (n != Math.round(n)) {return false} // must be an integer
        var isPrime = true;

        for (var i = 2; i <= Math.sqrt(n); i++) {
            if (n % i == 0) {isPrime = false}
        }

        return isPrime;
        }

    });
</script>      
</head>

<body>
    <center><h2>Prime Numbers Calculator.</h2><br></center>
    <div class="well">
        <div class="container" id="container1">
            <div class="col-md-4">
                <label>1. </label> <input id="input1" type="text"><span id="result1"></span><br>
                <label>2. </label> <input id="input2" type="text"><span id="result2"></span><br>
                <label>3. </label> <input id="input3" type="text"><span id="result3"></span><br>
                <label>4. </label> <input id="input4" type="text"><span id="result4"></span><br>
                <label>5. </label> <input id="input5" type="text"><span id="result5"></span><br>
		<label>6. </label> <input id="input6" type="text"><span id="result6"></span><br>
                <label>7. </label> <input id="input7" type="text"><span id="result7"></span><br>
                <label>8. </label> <input id="input8" type="text"><span id="result8"></span><br>
            </div>
        <div class="col-md-4">
            <div class="container" id="container2">

            </div>
        </div>
        <div class="col-md-4">
            <div class="container" id="container3">

            </div>
        </div>
        </div>
    </div>
        <center><button id="btn1" class="btn btn-primary"> Calculate</button>
        <button id="btn2" class="btn btn-primary"> Show Results</button>
        <button id="btn3" class="btn btn-primary"> Sort</button>
        <button id="btn4" class="btn btn-primary"> Clear Input</button></center>
</body>

Having trouble displaying results in a different container, need some help with that.

To effectively store the input values from eight labels into an array and subsequently identify the prime numbers within the array using JavaScript, follow these step-by-step instructions

Answer №1

Answer №2

Answer №3

Similar questions

Are there any ways to pass an onClick function to a controller in React?

Displaying column values in Vuetify Table based on a condition

Tips for executing forEach on a promise?

Having trouble serving static files with express.Router?

Filter out elements with identical dates from a JSONArray

What is the best way to apply custom styles in reactJs to toggle the visibility of Google Maps?

Internet Explorer causing trouble with reliable Ajax dropdown selection

Managing user access and permissions using JavaScript on the front end

Leveraging the power of a JavaScript framework within the script tag

AngularUi Mobile Modal List Display

Avoid reloading the page when submitting a form using @using Html.BeginForm in ASP.NET MVC

The Socket IO Client is receiving a different object than the one that was sent by the Server

filling out a form with data retrieved through an ajax request

Upon clicking the 'Add Image' button, TINYMCE dynamically incorporates an input

Vue JS: dynamic reactive structure

Navigating to the present child state with modified parameters can be achieved using the following steps

Discover the method for invoking a Javascript function within a Leaflet popup using HTML

Setting up KCFinder integration in TinyMCE

Tips on sending a form to the server with ajax technology

Is there a way to apply -webkit-line-clamp to this JavaScript content using CSS?