Question

请问有谁可以告诉我这段代码有什么问题？当我点击它时，我只是试图让绿色div消失，将其ID作为参数传递给“消失”。功能。但是，当html在浏览器中加载时，div已经消失了。

谢谢!!!

<!doctype html>

<html>

<head>

<title>Javascript challenge</title>

<meta charset="utf-8" />

<meta http-equiv="Content-type" content="text/html; charset=utf-8" />

<meta name="viewport" content="width=device-width, initial-scale=1" />

<style type="text/css">

    #cuadrado {

        width:200px;

        height:200px;

        background-color:green;

        display:block;

        }

</style>

</head>


<body>

    <div id="cuadrado">

    </div>


    <!-------------------- SCRIPT -------------------------------->

    <script type="text/javascript">

        function disappear(x)

            {

            document.getElementById(x).style.display = "none";

            }

        document.getElementById("cuadrado").onclick = disappear("cuadrado");

    </script>

</body>

</html>

Answer 1

问题是SELECT * FROM user_detail WHERE first_name LIKE '%Natalie%' OR first_name LIKE '%Fern%' OR last_name LIKE '%Natalie%' OR last_name LIKE '%Fern%' LIMIT 0, 30实际上正在调用该函数并将其返回的值（disappear("cuadrado")）作为onclick处理程序传递。

您需要设置onclick的函数引用

undefined

function disappear(x) {
    document.getElementById(x).style.display = "none";
}

document.getElementById("cuadrado").onclick = function () {
    disappear("cuadrado")
};

function disappear(x) {
  document.getElementById(x).style.display = "none";
}

document.getElementById("cuadrado").onclick = function() {
  disappear("cuadrado")
};

#cuadrado {
  width: 200px;
  height: 200px;
  background-color: green;
  display: block;
}

另一种解决方案是使用Function.bind()之类的

<div id="cuadrado">

</div>

document.getElementById("cuadrado").onclick = disappear.bind(window, "cuadrado")

function disappear(x) {
  document.getElementById(x).style.display = "none";
}

document.getElementById("cuadrado").onclick = disappear.bind(window, "cuadrado")

#cuadrado {
  width: 200px;
  height: 200px;
  background-color: green;
  display: block;
}

或者在您的情况下，因为您想要隐藏点击的元素本身

<div id="cuadrado"></div>

function disappear() {
    this.style.display = "none";
}

document.getElementById("cuadrado").onclick = disappear;

function disappear() {
  this.style.display = "none";
}

document.getElementById("cuadrado").onclick = disappear;

#cuadrado {
  width: 200px;
  height: 200px;
  background-color: green;
  display: block;
}

Answer 2

以防万一，您可以尝试将click添加为eventlistner，如下所示：

<强> DEMO

document.getElementById("cuadrado").addEventListener("click", function(){
     disappear(this.id)
});

Answer 3

试试这个

参考链接http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onclick_addeventlistener

  document.getElementById("cuadrado").addEventListener("click", disappear);
        function disappear()

            {

            document.getElementById("cuadrado").style.display = "none";

            }

   #cuadrado {

        width:200px;

        height:200px;

        background-color:green;

        display:block;

        }

<div id="cuadrado">

    </div>

也试试这个

<script type="text/javascript">
 var div =   document.getElementById("cuadrado");
 div.addEventListener('click', function (event) {    
     disappear("cuadrado")
 });
    function disappear(x)

        {

        document.getElementById(x).style.display = "none";

        }



</script>

div没有等待onclick事件就消失了 - HTML Javascript

3 个答案: