display output in html page

Question

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 ?

js code is working fine, but output to be displayed in browser is not working out.. Like the output for the function needed to be displayed in browser where the id is "op" — rishabhJha
– rishabhJha, Commented Jan 24, 2022 at 18:27
a appears to be an array, while innerHTML is a string. Is there an error in your console? — mykaf
– mykaf, Commented Jan 24, 2022 at 18:32

muka.gergely · Accepted Answer · 2022-01-24 18:34:16Z

1

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>

answered Jan 24, 2022 at 18:34

muka.gergely

8,3593 gold badges20 silver badges35 bronze badges

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

1 Comment

rishabhJha Over a year ago

thanks @muka.gergely "The shuffled array has to be converted to a string (I did it with a .join(', '):" noted!

Collectives™ on Stack Overflow

display output in html page

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest