Changing style through JavaScript doesn't work with variables

Question

I want to do is change the left margin of a DOM element based on a variable in JavaScript. This function works :

function updateTabs(i) {
    console.log('Switching to tab ' + i)
    switch(i) {
        case 0:
            document.querySelector('#About-content1').style.marginLeft = "0";
            break;
        case 1:
            document.querySelector('#About-content1').style.marginLeft = "-100%";
            break;
        case 2:
            document.querySelector('#About-content1').style.marginLeft = "-199%";
            break;
        default:
            break;
    }
}

This successfully sets the margin-left property like I want it to. However, I don't want to call document.querySelector every time I call the updateTabs function. I tried this:

var contentDiv1 = document.querySelector('#About-content1');

function updateTabs(i) {
    console.log('Switching to tab ' + i)
    switch(i) {
        case 0:
            contentDiv1.style.marginLeft = "0";
            break;
        case 1:
            contentDiv1.style.marginLeft = "-100%";
            break;
        case 2:
            contentDiv1.style.marginLeft = "-199%";
            break;
        default:
            break;
    }
}

However, this only works the first time I call the function. After that, it prints "Switching to tab" but doesn't actually modify the style. Is there any way I could change the style without having to call document.querySelector every time?

Answer 1

I think the reason is that the second time around it doesn't know what contentDiv1 is how about you put that inside the function like this:

function updateTabs(i) {
var contentDiv1 = document.querySelector('#About-content1');
    console.log('Switching to tab ' + i)
    switch(i) {
        case 0:
            contentDiv1.style.marginLeft = "0";
            break;
        case 1:
            contentDiv1.style.marginLeft = "-100%";
            break;
        case 2:
            contentDiv1.style.marginLeft = "-199%";
            break;
        default:
            break;
    }
}

So now everytime the function runs it knows what contentDiv1 is. So now you still call document.querySelector only once but the function know what you want.

Answer 2

The question is missing some context, but if Hadi Pawar's answer isn't correct, my guess is that the element is being destroyed and recreated. This should validate that:

var contentDiv1 = document.querySelector('#About-content1');

contentDiv1.myResize = function(i) {
    console.log('Switching to tab ' + i)
    var offsets = [0, -100, -199];
    if( i > offsets.length ) return;
    this.style.marginLeft = offsets[i] + '%';
}

[...]

contentDiv1.myResize( n );

Now, when you call resize, you will get a hard error if 'contentDiv1' loses scope. Otherwise, the logic is contained within the element itself.

Answer 3

Turns out that the problem was that I had a Vue.js element connected to the same element, so the element was changed. I moved the Vue.js declaration to before the const contentDiv1 = document.querySelector('#About-content1') , and it fixed the problem.