display output in html page

January 24, 2022

function shuffleArray(a, n) {
  let i=0,q=1,k=n
  while(i<n){
    for (let j = k; j > i + q; j--) {
      let temp = a[j - 1];
      a[j - 1] = a[j];
      a[j] = temp;
    }
    i++; 
    k++; 
    q++;
}
 return a;
}

a = [2,1,5,3,11,7]
shuffleArray(a, a.length / 2);
document.getElementById("op").innerHTML = a;

  <!DOCTYPE html>
    <html>
      <head>
        <title>Shuffle</title>
      </head>
      <body>
        <h1 class="a">Shuffle Array Program</h1>
        <h2>Input array : [2, 1, 5, 3, 11, 7] </h2>
        <button onClick=shuffleArray([2, 1, 5, 3, 11, 7],a.length/2)>shuffleArray</button>
        <h2>Output Array : </h2>  <span id="op">Answer : </span>
    
      </body>
    </html>

I was trying out .innerHtml method , when i click on the button the answer gets displayed in the broser, the JS code is working fine , but little confused on how to use it with HTML file, can anyone help me with this resolution ?

>Solution :

The shuffled array has to be converted to a string (I did it with a .join(', '):

let a = [2, 1, 5, 3, 11, 7];

const updateOutput = (arr) => {
  const op = document.getElementById('op')
  op.innerHTML = arr.join(', ')
}

const btnShuffle = document.getElementById('shuffle')
btnShuffle.addEventListener('click', function() {
  const shuffled = shuffleArray(a, a.length / 2)
  updateOutput(shuffled)
})

function shuffleArray(a, n) {
  let i = 0,
    q = 1,
    k = n;
  while (i < n) {
    for (let j = k; j > i + q; j--) {
      let temp = a[j - 1];
      a[j - 1] = a[j];
      a[j] = temp;
    }
    i++;
    k++;
    q++;
  }
  return a;
}

<h1>Shuffle Array Program</h1>
<h2>Input array: [2, 1, 5, 3, 11, 7] </h2>
<button id="shuffle">shuffleArray</button>
<h2>Output Array: </h2>Answer: <span id="op"></span>