Question

我搜索了大约1个小时但没有发现任何东西。我尝试过修复＆＃39;我遇到过他们不能处理我的代码。虽然提供的代码可以在自己的文件中运行，但它在我的内部不起作用。

HTML：

<div class="result">Pizza</div>
    <div class="choices">
        <button id="rock">Rock</button>
        <button id="paper">Paper</button>
        <button id="scissors">Scissors</button>
   </div>
</body>
</html>

JS：

    let buttons = document.getElementById("#rock").addEventListener("click");
    let rock = document.querySelector('#rock');

//check if id exists
    let str,
    element = document.getElementById('.choices #rock');
    if(element != null){
        str = elemen.value;
        console.log(str);
    }else{
        str = null;
        console.log(str);
    }

如果需要，我会发布我的整个代码。希望这足以复制你的错误。

提前致谢！

Answer 1

getElementById只将id作为参数，而不是查询。

使用

element = document.querySelector('.choices #rock');

或

element = document.getElementById('rock');

第二种形式更清晰，因为只有一个元素可以具有给定的id。保持复合查询由id完成，以便将非常罕见的情况应用于元素可能是或不在另一个元素内的情况。

Answer 2

你有一些拼写错误，但你也错过了load或DOMContentLoaded听众。您可能在页面上存在之前查询该元素：

document.addEventListener('DOMContentLoaded', function() {
  var rock = document.querySelector('#rock');

  var str;

  if (rock) {
    str = rock.value;
    console.log(str);
  } else {
    str = null;
    console.log(str);
  }
});

<div class="choices">
  <button id="rock" value="rock">Rock</button>
  <button id="paper" value="paper">Paper</button>
  <button id="scissors" value="scissors">Scissors</button>
</div>

Answer 3

我不了解您的代码的逻辑，但您需要改变获取元素的方式。

您正在尝试按ID获取元素，但是，您真正想要的是使用querySelector获取元素。

检查我对您的代码所做的更改。

let buttons = document.getElementById("rock").addEventListener("click", function() {});
let rock = document.querySelector('#rock');

//check if id exists
let str;
let element = document.querySelector('.choices #rock');

if (element != null) {
  str = element.value;
  console.log(str);
} else {
  str = null;
  console.log(str);
}

<div class="choices">
  <button id="rock" value="rock">Rock</button>
  <button id="paper" value="paper">Paper</button>
  <button id="scissors" value="scissors">Scissors</button>
</div>

JS - QuerySelector null对于存在的元素

3 个答案: