Question

所以我是一个javascript noob。我正在为网页设计课做作业，我们正在练习事件听众。因此，我必须将变量分配给3个单独的div，将它们放在一个数组中，创建一个函数使它们显示或隐藏，并使用一个按钮/单击事件监听器来调用该函数来分别调用或隐藏它们。这是我的代码：

import React, { Component } from "react";
import { Tree } from 'antd';
import "./CustomTree.css"
import 'antd/dist/antd.css'

const TreeNode = Tree.TreeNode;

class CustomTree extends Component {
  constructor(props) {
    super(props);
    this.state = {}
  }

  onExpand = (expandedKeys) => {
    console.log('onExpand', arguments);
    // console.log('expandedKeys', expandedKeys);
    // if not set autoExpandParent to false, if children expanded, parent can not collapse.
    // or, you can remove all expanded children keys.

    this.props.onExpandChange(expandedKeys)
  }
  onCheck = (checkedKeys) => {
    // console.log('onCheck', checkedKeys);
    this.props.onCheckChange(checkedKeys);
  }
  onSelect = (selectedKeys, info) => {
    // console.log('info', info);
    // console.log("selectedKeys", selectedKeys)
    this.props.onSelectChange(selectedKeys);
  }

  renderTreeNodes = (data) => {
    return data.map((item) => {
      if (item.children) {
        return (
          <TreeNode title={item.title} key={item.key} dataRef={item}>
            {this.renderTreeNodes(item.children)}
          </TreeNode>
        );
      }
      return <TreeNode {...item} />;
    });
  }

  render() {
    return (
      <Tree
        checkable
        onExpand={this.onExpand}
        onCheck={this.onCheck}
        onSelect={this.onSelect}
        checkedKeys={this.props.checkedKeys}
        expandedKeys={this.props.expandedKeys}
        autoExpandParent={this.props.autoExpandParent}
        selectedKeys={this.props.selectedKeys}
      >
        {this.renderTreeNodes(this.props.treeData)}
      </Tree>
    );
  }
}

export default CustomTree;

var greenBox = document.getElementById("greenBox");
var redBox = document.getElementById("redBox");
var blueBox = document.getElementById("blueBox");
var showALL = document.getElementById("showAll");
var hideALL = document.getElementById("hideAll");

var boxes = [greenBox, redBox, blueBox];

function showBoxes(boxes) {
  for (i = 0; i < boxes.length; i++) {
    boxes[i].style.display = "block";
  }
}

function hideBoxes(boxes) {
  for (i = 0; i < boxes.length; i++) {
    boxes[i].style.display = "none";
  }
}

showALL.addEventListener("click", function() {
  showBoxes(boxes);
})


// The "Hide All" button invokes the hideBoxes method
hideALL.addEventListener("click", function() {
  hideBoxes(boxes);
})

那么我做错了什么？我已经多次检查过拼写错误等等但是一切对我来说都没问题？它仍然没有工作。

Answer 1

document.getElementById区分大小写。

当您搜索id="showAll"时，您有document.getElementById("showALL");。

选择一致的案例，它应该有效。

var greenBox = document.getElementById("greenBox");
var redBox = document.getElementById("redBox");
var blueBox = document.getElementById("blueBox");
var showALL = document.getElementById("showAll");
var hideALL = document.getElementById("hideAll");


var boxes = [greenBox, redBox, blueBox];

function showBoxes(boxes) {
  for (i = 0; i < boxes.length; i++) {
    boxes[i].style.display = "block";
  }
}

function hideBoxes(boxes) {
  for (i = 0; i < boxes.length; i++) {
    boxes[i].style.display = "none";
  }
}

showALL.addEventListener("click", function() {
  showBoxes(boxes);
})


// The "Hide All" button invokes the hideBoxes method
hideALL.addEventListener("click", function() {
  hideBoxes(boxes);
})

.box {width: 200px; height: 36px;}

#redBox {background-color: #F00;}
#greenBox {background-color: #0F0;}
#blueBox {background-color: #00F;}

<form action="#">
  <input type="button" id="showAll" value="Show All"><br />
  <input type="button" id="hideAll" value="Hide All"><br />
</form>

<div class="box" id="greenBox" style="display:none"></div>
<div class="box" id="redBox" style="display:none"></div>
<div class="box" id="blueBox" style="display:none"></div>

Answer 2

除了您的div document.getElementById("showALL");的最初拼写错误document.getElementById("showAll");之外，如果没有大小或内容，div也不会出现。这样的事情应该做：

＆＃13;

var greenBox = document.getElementById("greenBox");
var redBox = document.getElementById("redBox");
var blueBox = document.getElementById("blueBox");
var showALL = document.getElementById("showAll");
var hideALL = document.getElementById("hideAll");

var boxes = [greenBox, redBox, blueBox];

function showBoxes(boxes) {
    for (i = 0; i < boxes.length; i++) {
        boxes[i].style.display = "block";
    }
}

function hideBoxes(boxes) {
    for (i = 0; i < boxes.length; i++) {
        boxes[i].style.display = "none";
    }
}

showALL.addEventListener("click", function() {
    showBoxes(boxes);
});

hideALL.addEventListener("click", function() {
    hideBoxes(boxes);
});

＆＃13;

<form action="#">
  <input type="button" id="showAll" value="Show All"><br />
  <input type="button" id="hideAll" value="Hide All"><br />
</form>

<div class="box" id="greenBox" style="display:none;background-color:green;height:20px;width:20px"></div>
<div class="box" id="redBox" style="display:none;background-color:red;height:20px;width:20px"></div>
<div class="box" id="blueBox" style="display:none;background-color:blue;height:20px;width:20px"></div>

＆＃13;

Answer 3

问题在于您的选择器

var showALL = document.getElementById("showALL");
var hideALL = document.getElementById("hideALL");

你的元素被命名为＃34; showAll＆＃34;你正在使用＆＃34; showALL＆＃34;。注意资本＆＃34; L＆＃34;。

Answer 4

正如其他人所说，你的外壳需要保持一致。在调试此类事情时可以帮助您的一件事是在浏览器中打开开发人员工具（在Chrome中为f12）并在javascript中放置断点，以便您可以单步执行并查看变量的值。

无法让事件监听器在javascript中正常工作

4 个答案: