Java Script Array modification and output

Task: create a function of adding numbers into array, sort function and display result on the screen

Java Script code:

let arr = [];

function addInArr() {
  document.getElementById("show").innerHTML = "";
  let inputNum = document.getElementById("input").value;
  arr.push(inputNum);
  let b = document.createTextNode(arr);
  let c = document.getElementById("show");
  let a = document.createElement("p");
  a.appendChild(b);
  c.appendChild(a);
  console.log(arr);

}

function sort() {
  document.getElementById("show").innerHTML = "";
  for (let i = 0; i < arr.length; i++) {
    for (let i = 0; i < arr.length; i++) {

      if (arr[i] > arr[i + 1]) {
        let b;
        b = Number(arr[i]);
        arr[i] = Number(arr[i + 1]);
        arr[i + 1] = Number(b);
      };
    };
  };
  let a = document.createElement("p");
  let b = document.createTextNode(arr);
  let c = document.getElementById("show");
  a.appendChild(b);
  c.appendChild(a);
}

HTML code:

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./style.css">
</head>

<body class="body">
  <div class="main-div">
    <div class="show-arr" id="show">

    </div>
    <input type="number" class="input" placeholder="Some num" id="input">
    <div class="btn-div">
      <div class="change-div-arr" onclick="addInArr()">
        Add
      </div>
      <div class="sort-div-arr" onclick="sort()">
        Sort
      </div>
    </div>
  </div>
</body>
<script src="./script.js"></script>

</html>

Result

Post Views: 319

Leave a Reply Cancel reply