Q:

javascript takes too long to perform, Makes viewers wait too long

function change(element) {
  document.getElementById('imageReplace').src = element;
}

function change_1() {
  document.getElementById('1').style.background = '#111';
  document.getElementById('1').style.color = '#FFF';
  document.getElementById('1').style.cursor = 'auto';
  document.getElementById('2').style.background = '#FFC300';
  document.getElementById('2').style.color = '#FFF';
  document.getElementById('2').style.cursor = 'pointer';
  document.getElementById('3').style.background = '#FFC300';
  document.getElementById('3').style.color = '#FFF';
  document.getElementById('3').style.cursor = 'pointer';
}

function change_2() {
  document.getElementById('2').style.background = '#111';
  document.getElementById('2').style.color = '#FFF';
  document.getElementById('2').style.cursor = 'auto';
  document.getElementById('1').style.background = '#FFC300';
  document.getElementById('1').style.color = '#FFF';
  document.getElementById('1').style.cursor = 'pointer';
  document.getElementById('3').style.background = '#FFC300';
  document.getElementById('3').style.color = '#FFF';
  document.getElementById('3').style.cursor = 'pointer';
}

function change_3() {
  document.getElementById('3').style.background = '#111';
  document.getElementById('3').style.color = '#FFF';
  document.getElementById('3').style.cursor = 'auto';
  document.getElementById('1').style.background = '#FFC300';
  document.getElementById('1').style.color = '#FFF';
  document.getElementById('1').style.cursor = 'pointer';
  document.getElementById('2').style.background = '#FFC300';
  document.getElementById('2').style.color = '#FFF';
  document.getElementById('2').style.cursor = 'pointer';
}
.row_1 {
  float: left;
}
<div class="row_1">
  <button id="1" onclick="change('somepic.jpg'); change_1()">1</button>
  <button id="2" onclick="change('somepic2.jpg'); change_2()">2</button>
  <button id="3" onclick="change('somepic3.jpg'); change_3()">3</button>
 </div>

I'm kinda new here...
Just started my website and tried some javascript coding.
The funny thing is it works very well in Adobe Dreamweaver CS6 when opened in Firefox.
However, when it's placed in my website manager (How my website gets put on the internet), it works super slowly...
Please help. I suspect the code must be too long, but I've tried a lot of methods and it doesn't show the way I want it to...
As you may have guessed, I'm trying to make a button that changes style when clicked and the other buttons will get back to default styling...
Thanks in advance!

A:

Don't repeatedly use document.getElementById(). It makes no sense. Every time you do this, you're searching the DOM for the node.
So instead of this:
function change_3() {
  document.getElementById('3').style.background = '#111',
  document.getElementById('3').style.color = '#FFF',
  document.getElementById('3').style.cursor = 'auto'
}

do this
var three = document.getElementById('3');

function change_3() {
  three.style.background = '#111',
  three.style.color = '#FFF',
  three.style.cursor = 'auto'
}

