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?