javascript - 如何通过它的'this'返回来用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;
}

标签： javascripthtmldom

Answer 1

如果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)所以它们匹配，但根据需要进行调整。