如何通过 id 在另一个元素中获取元素 Javascript

Question

我的代码如下。但是当我给出上面的代码时，id 为 "demo" 的元素没有被选中。我怎样才能在 JS 中做到这一点？

document.getElementById("demo").onclick = function() {myFunction1()};

function myFunction1() {
    document.getElementById("demo").classList.remove("flame");
}

.flame {
  color: red;
}

<div  class="candle">
    <div id="demo" class="flame">Click me</div>
</div>

Answer 1

首先，当您可以直接在 html 元素中使用 onclick 时，为什么要使用方法调用另一个函数还要确保以正确的方式包含脚本，因为需要定义函数 function1在 Dom 元素中调用它之前。

因此您可以在 html 元素中使用它

<div  class="candle">
<div id="demo" class="flame" onclick="myFunction1()">Hello</div></div>

对于 Javascript：

 function myFunction1() {
document.getElementById("demo").classList.remove("flame");}

您可以查看 fiddle: https://jsfiddle.net/ytdmk6my/2/

Answer 2

如果我的理解是正确的，试试这个

document.getElementById('demo').onclick = function(event) {
  callback(event)
}

function callback (event){
  var classList = event.target.classList
  
  if (classList.contains('flame')) {
    console.log('contains')
    classList.remove('flame')
  } else {
    console.log('notfound')
    classList.add('flame')
  }
}

.flame {
  color: red;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div  class="candle">
    <div id="demo" class="flame">Click me</div>
</div>
</body>
</html>

如何通过 id 在另一个元素中获取元素 Javascript

How to get element by id inside another element Javascript

javascript

getelementbyid