Как поймать с помощью JavaScript HTML-элемент (из DOM), возвращая это «это»?

Question

Я пытаюсь получить элемент HTML с querySelector, но он возвращает null.Как я могу получить это?

btn - это «это» кнопки:

<button class="Medium" onclick="restartGame(this, 1)">Medium</button>

Функция, которую я пытался:

function setCurrLevel(btn) {
    var elCurrBtn = document.querySelector(`${btn.class}`);

    if (elCurrBtn.innerText === 'Easy') {
        gCurrLevel = 0; 
    } else if (elCurrBtn.innerText === 'Medium') {
        gCurrLevel = 1; 
    } else if (elCurrBtn.innerText === 'Hard') {
        gCurrLevel = 2; 
    } 

    return gCurrLevel;
}

Answer 1

Если ваш элемент кнопки передан в setCurrLevel, вам больше не нужно его выбирать

  function setCurrLevel(btn) {
    var gCurrLevel = 0;
    if (btn.innerText === 'Easy') {
        gCurrLevel = 0; 
    } else if (btn.innerText === 'Medium') {
        gCurrLevel = 1; 
    } else if (btn.innerText === 'Hard') {
        gCurrLevel = 2; 
    } 

    return gCurrLevel;
 }

Answer 2

Если btn уже ссылается на кнопку, вам не нужно querySelector вообще.Просто используйте btn:

var gCurrLevel;
function setCurrLevel(btn) {
  if (btn.innerText === 'Easy') {
    gCurrLevel = 0;
  } else if (btn.innerText === 'Medium') {
    gCurrLevel = 1;
  } else if (btn.innerText === 'Hard') {
    gCurrLevel = 2;
  }

  console.log("gCurrLevel = " + gCurrLevel);
  // return gCurrLevel; // Don't do this in an event handler
}

<button class="Medium" onclick="setCurrLevel(this)">Medium</button>

Там я заменил resetGame(this, 1) на setCurrLevel(this), чтобы они совпали, но при необходимости отрегулируйте.