I am curious about how to change the class on multiple divs at once using JavaScript. In the example below, only the first use of the class is recognized, while all subsequent ones are ignored. querySelectorAll does not seem to work. Thank you in advance.
function setZoom(color) {
document.querySelector('.var').style.color = color;
}.var {
margin-top:20px;
color:black;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="input1" value="green" onclick="setZoom('blue')">
<button>green</button>
</label>
<label for="input2" value="red" onclick="setZoom('yellow')">
<button>btn-yellow,</button>
</label>
<label for="input3" value="pink" onclick="setZoom('pink')">
<button>btn-pink</button>
</label>
<div class="var">
content div 1
</div>
<div class="var">
content div 2
</div>
<div class="var">
content div 3
</div>