Question

我的代码如下。但是，当我给上面的代码时，id为＃34; demo＆＃34;没有被选中。我怎么能在JS中做到这一点？

＆＃13;

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

＆＃13;

.flame {
  color: red;
}

＆＃13;

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

＆＃13;

Answer 1

如果我的理解是正确的，请尝试使用此

＆＃13;

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')
  }
}

＆＃13;

.flame {
  color: red;
}

＆＃13;

<!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>

＆＃13;

Answer 2

首先为什么在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");}

您可以查看小提琴：https://jsfiddle.net/ytdmk6my/2/

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

2 个答案: