CODEWITHSUNDEEP
javascripthtml
Javad Farokhi
Javad Farokhi

Reputation: 117

Show javascript function output in html

My JavaScript contains two functions. One function gets a number from the user and returns a string that shows if the number is a prime or not and then store the number and the result in an array.

results = new Array();
i = 0;

function isPrime(num) {
    flag = false;

    if (num > 1) {
        for (i = 2; i < num; i++) {
            if (num % i == 0) {
                flag = true;
                break;
            }
        }
    }

    return !flag;
}

function getNumberPrime(number) {
    condition = (isPrime(number)) ? ('is') : ('is not');
    console.log('' + number + ' ' + condition + ' prime');

    dict = {}
    dict['number'] = number
    dict['isPrime'] = isPrime(number);
    results.push(dict);
}

function getAll() {
    for (i = 0; i < results.length; i++) {
        condition = (results[i]['isPrime']) ? ('is') : ('is not');
        number = results[i]['number']
        console.log('' + number + ' ' + condition + ' prime');
    }
}

My HTML has an input and two buttons. One button returns the output of the first function and the second should show the items of array.

<!DOCTYPE html>
<html lang="fa">

<head>
  <title>Prime Number</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <script src="prime.js"></script>
</head>

<body>
  <div class="container">
    <h2>Find Prime Numbers</h2>
    <form>
      <div class="form-group">
        <label class="control-label col-sm-2">Numbers:</label>
        <div class="col-sm-10">
          <input class="form-control" id="inp" name="nums" style="margin-left: -11%">
        </div>
      </div>
      <button type="submit" class="btn btn-default" style=" margin-top: 2%;" onclick="getNumberPrime()">Check</button>
      <button type="submit" class="btn btn-default" style="margin-top: 2%;" onclick="document.getElementById('showprime').innerHTML =getAll()">Show Result</button>
      <p id="showprime"></p>
    </form>
  </div>
</body>

</html>

But the first button doesn't work and I don't know how to implement the second button.

Prime numbers must be blue and none primes must be red.

Upvotes: 2

Views: 1057

Answers (1)

biberman
biberman

Reputation: 5767

First: Your buttons need to have type="button" to prevent a reload because of the submit.

Your function getNumberPrime() wants a parameter number which you aren't offering in your inline event handler. Therefor you should get the number in that function by selecting the input and getting its value:

let number = document.querySelector('#inp').value;

Your function getAll() doesn't return anything and therefor the result isn't inserted in #showprime. Instead of loging the values to the console you could add them to an output string and return that string after the for loop:

let output = '';
  
for (i = 0; i < results.length; i++) {
  ...
  output += number + ' ' + condition + ' prime<br>';
}
  
return output;

If you want the output to be colored you could wrap each result in a paragraph tag and give it a class dependent on the condition. In this case #showprime should be container element like a div. The class would be styled with CSS.

Inside the for loop:

check = (results[i]['isPrime']) ? true : false;
condition = check ? ('is') : ('is not');
...
output += '<p class=' + check + '>' + number + ' ' + condition + ' prime</p>';

In your CSS-file:

.true {
  color: blue;
}

.false {
  color: red;
}

Last: It's better to devide Javascript and HTML and not to use inline event handlers. Therefor you should change this:

<button ... onclick="getNumberPrime()">Check</button>
<button ... onclick="document.getElementById('showprime').innerHTML = getAll()">Show Result</button>

to this:

<button id="check" ...>Check</button>
<button id="show" ...>Show Result</button>

document.querySelector('#check').addEventListener('click', getNumberPrime);
document.querySelector('#show').addEventListener('click', function() {
  document.getElementById('showprime').innerHTML = getAll();
});

Working example:

results = new Array();
i = 0;

function isPrime(num) {
  flag = false;

  if (num > 1) {
    for (i = 2; i < num; i++) {
      if (num % i == 0) {
        flag = true;
        break;
      }
    }
  }

  return !flag;
}

function getNumberPrime() {
  let number = document.querySelector('#inp').value;
  
  condition = (isPrime(number)) ? ('is') : ('is not');
  console.log('' + number + ' ' + condition + ' prime');

  dict = {}
  dict['number'] = number
  dict['isPrime'] = isPrime(number);
  results.push(dict);
}

function getAll() {
  let output = '';
  
  for (i = 0; i < results.length; i++) {
    check = (results[i]['isPrime']) ? true : false;
    condition = check ? ('is') : ('is not');
    number = results[i]['number'];
    output += '<p class=' + check + '>' + number + ' ' + condition + ' prime</p>';
  }
  
  return output;
}

document.querySelector('#check').addEventListener('click', getNumberPrime);
document.querySelector('#show').addEventListener('click', function() {
  document.getElementById('showprime').innerHTML = getAll();
});
.true {
  color: blue;
}

.false {
  color: red;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<div class="container">
  <h2>Find Prime Numbers</h2>
  <form>
    <div class="form-group">
      <label class="control-label col-sm-2">Numbers:</label>
      <div class="col-sm-10">
        <input class="form-control" id="inp" name="nums" style="margin-left: -11%">
      </div>
    </div>
    <button id="check" type="button" class="btn btn-default" style=" margin-top: 2%;">Check</button>
    <button id="show" type="button" class="btn btn-default" style="margin-top: 2%;">Show Result</button>
    <div id="showprime"></div>
  </form>
</div>

Upvotes: 2

Related Questions