Uncaught ReferenceError: currentPriorityB is not defined

Question

`<select name="builders" id="selectBuilders">
         <option value="1">Builder 1</option>
         <option value="2">Builder 2</option>
         <option value="3">Builder 3</option>
    </select>



   <div class="flexchild currentPriorityB**1**">1</div>
   <div class="flexchild currentPriorityB**2**">2</div>
   <div class="flexchild currentPriority**B3**">3</div>

const currentPriorityB1 = document.querySelector('.currentPriorityB1')
const currentPriorityB2 = document.querySelector('.currentPriorityB2')
const currentPriorityB3 = document.querySelector('.currentPriorityB3')


let num = 1
console.log(currentPriorityB+`${num})

I'm new in Javascript. I'm trying to select a div using template literals but it says Undefined.

Answer 1

Because currentPriorityB isn't one of your variable names. You can't dynamically retrieve a local variable in order to read it in that fashion.

The only way I believe is to use eval() like so:

eval(`currentPriorityB${num}`)

But would not suggest doing that.

In your case you could just use num to generate the css selector for the querySelector() call instead

let current = document.querySelector(`.currentPriorityB${num}`);