how to make less expensive javascript code

Question

function tapAddButton(){
var page1 = document.getElementById("page1");

var page2 = document.getElementById("page2");

Page1.style.display = "none"
Page2.style.display = "block"
}

//Everytime i tap the button. It going to execute var page1 and var page2, but its expensive if execute var everytime i tap the button.

//What is the solution??

Answer 1

var page1, page2;

window.onload = function () {
page1 = document.getElementByIf("page1");
page2 = document.getElementById("page2");
}

function tapAddButton() {
page1.style.display = "none";
page2.style.display = "block";
}

Answer 2

Save those two variables globally and initialize them on document ready.
And on the tap you only change the display value.

Answer 3

function tapAddButton(){
page1.style.display = "none"
page2.style.display = "block"
}

var page1 = document.getElementById("page1")
var page2 = document.getElementById("page2")

Answer 4

Dragonxiv can you show me an example please

Answer 5

Zeke Williams it works!, thank you so much for your help :)

Answer 6

But i think it will give an error. Because when i access DOM outside the function it always like that