jQuery addClass example

Change class name on click in jQuery

by HSilvaDaytona

HTML

<div id="banner-message">
    <p>Complexity in Arrays</p>
    <p id="appText">Enter Array Size:</p>
    <input type="textbox" id="location" value="10" />
    <p></p>
    <button onclick="fillArray();">Create Array</button>

    <p></p>

    <h2 id="appText">Enter Location:</h2>
    <input type="number" id="index" value="5" />
    <p></p>
    <h2 id="appText"> Enter Value to Insert:</h2>
    <input type="number" id="valuesss" value="99" />

    <p></p>
    <button onclick="insertIntoArray();">Things</button>

    <p></p>
    <h3 id="appText"> Enter Value to Find:</h3>
    <input type="number" id="search" value="20" />
    <p></p>
    <button onclick="displaySearch();">WOW</button>
    
    <p></p>
    <div id="output">Output</div>
    <p></p>
    <div id="counter">Counter</div>
    <p></p>
  
</div>

CSS

body {
  background: 	#fff;
  padding: 20px;
  font-family: Helvetica;
}

#appText{
  
  color:		#53abb5;
  font-size: 15px;
  text-align: left;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
  
}

#banner-message {
  background: 	#4d3727;
  color: 	#fffff0;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 500px;
}

button {
  background: 		#53abb5;
  font-family: Arial; 
  border: none;
  border-radius: 5px;
  padding: 6px 8px;
  font-size: 12px;
  color: 		#fffff0;
}

JavaScript

// find elements
var array = []; //Global array
var d = ""; //String for easy access 
var count = 0; //counter
//For some console log showed that fillArray() was not working as //intended 
//running individually it works but it looks like there no value
//being passed
//the css and html does not seam to intrude as i tried this with
//pure javascript
//not really able to find a decent solution.
function fillArray() {
clearDisplay();
  var size = parseInt(document.getElementById("location").value);
  array = new Array(size);

  for (var i = 0; i <= size; i++) {
    array[i] = Math.floor(Math.random() * 100) + 1;
  }

  displayArray();
}
//----------------------------------

function clearDisplay() {
  d = "";//clear the display with empty string
  document.getElementById("output").innerHTML = "";
}
//-------------------------------------------------

function displayArray() {
  for (var i = 0; i < array.length - 1; i++) {
    d += i + ' : ' + array[i] + "<br/>";
  }
  document.getElementById("output").innerHTML = d;
}
 

//-----------------------------------------------------
function insertIntoArray(arr, index, num) {
  var whatis = parseInt(document.getElementById("index").value);
  var thisvalue = parseInt(document.getElementById("valuesss").value);

  d = thisvalue + " inserted at location " + n + ".<br/>" + count + " Operations performed" + "<br/>";

  for (i = length - 1; i < whatis; i--) {
    count++;
    array[i] = array[i - 1];
  }
  
  array[n] = thisvalue; {
    count++;
  } {
    displayArray();
  }
}
//-----------------------------------------------

function displaySearch(arr, value) {
  clearDisplay();
  
  var s = parseInt(document.getElementById("search").value);
  var v = parseInt(document.getElementById("valuesss").value);
  for (var i = 0; i < array.length; i++) {
    count++;
    if (array[i] == s) {
      d = "In" + count + " operations" + s + "was not found";
    } else {
      d = s + "is at " + n + ". There were " + count + " operations...