使用JavaScript，onmouseover和onmouseout更改Div内容？

Question

I have the following code:

window.onload = function createDivs() { 
    for(var i = 1;i<29;i++) {
        var div = document.createElement("div"); 
        var body = document.getElementsByTagName("body")[0];
        var n1 = document.createTextNode("Cell " + i);
        var n2 = document.createTextNode(i + " Cell");
        div.style.width = "100px";
        div.style.height  = "100px";
        div.style.border = "1px solid red";
        div.style.cssFloat = "left";
        div.style.margin = "1px"
        div.className = i;
        body.appendChild(div);
    }
    div.onmouseover = function() {
        this.appendChild(n1);
    },
    div.onmouseout = function() {
        this.appendChild(n2);
    } 
}

what I want to acheive

1. on mouseover of each div, the div should have a text of cell 1, cell 2, ..... upto cel 28. But I am just getting Cell 28 on hover for each cell.

2. I also want to achieve that onmouseout, the cell should have " 1 cell " as text, but its not working.

Any help is appreciated.

http://jsbin.com/iXuLEDE/7/edit?html,output

Answer 1

Your problem is coming from your closure over n1 and n2 . The simplest solution to that is the following.

From this:

div.onmouseover = function() {
    this.appendChild(n1);
}

To this:

div.onmouseover = (function(text) {
      return function () {
          this.innerHTML = text;
      }
}(n1.textContent));

This way you are using a copy of the text node (by using it as a parameter to a function) rather than as a closure later on.

UPDATE

Just read the second part of your question, this should work:

div.onmouseover = (function(text) {
    return function() {
        this.innerHTML = text;
    };
}("Cell " + i));
div.onmouseout = (function(text) {
    return function() {
        this.innerHTML = text;
    };
}(i + " Cell"));

USING TEXT NODES

function createDivs() { 
    for(var i = 1;i<29;i++) {
        var div = document.createElement("div"); 
        var body = document.getElementsByTagName("body")[0];
        div.style.width = "100px";
        div.style.height  = "100px";
        div.style.border = "1px solid red";
        div.style.cssFloat = "left";
        div.style.margin = "1px"
        div.className = i;
        var n1 = document.createTextNode("Cell " + i);
        var n2 = document.createTextNode(i + " Cell");
        body.appendChild(div);
        div.onmouseover = (function(n_text1, n_text2) {
          return function() {
              if (n_text2.parentNode == this) {
                  this.removeChild(n_text2);
              }
              this.appendChild(n_text1);
          };
        }(n1, n2));
        div.onmouseout = (function(n_text1, n_text2) {
          return function() {
              if (n_text1.parentNode == this) {
                  this.removeChild(n_text1);
              }
              this.appendChild(n_text2);
          };
        }(n1, n2));
    }
}

Fiddle here: http://jsfiddle.net/Mk5e5/

Answer 2

Please change the code like this

    window.onload = function createDivs() { 
    for(var i = 1;i<29;i++) {
        var div = document.createElement("div"); 
        div.setAttribute("index", i);
        var body = document.getElementsByTagName("body")[0];
        div.style.width = "100px";
        div.style.height  = "100px";
        div.style.border = "1px solid red";
        div.style.cssFloat = "left";
        div.style.margin = "1px"
        div.className = i;
        body.appendChild(div);
        div.onmouseover = function() {
          var n1 = document.createTextNode("Cell " + this.getAttribute("index"));
          this.appendChild(n1);

        } ,
        div.onmouseout = function() {
        var n2 = document.createTextNode(this.getAttribute("index") + " Cell");
          this.appendChild(n2);

        } 

    }
}

You should add event for each div in loop

Answer 3

Try to understand javascript closures, specially inside for loops. Check this excellent explanation in this blog post: http://www.mennovanslooten.nl/blog/post/62

Change your createDivs function to:

function createDivs() { 

for(var i = 1;i<29;i++) {
    var div = document.createElement("div"); 
    var body = document.getElementsByTagName("body")[0];
    div.style.width = "100px";
    div.style.height  = "100px";
    div.style.border = "1px solid red";
    div.style.cssFloat = "left";
    div.style.margin = "1px"
    div.className = i;
    body.appendChild(div);
    div.onmouseover = (function(value) { 
        return function() {
            var n1 = document.createTextNode("Cell " + value);
            this.appendChild(n1);
        }
    })(i);
    div.onmouseout = (function(value) { 
        return function() {
            var n2 = document.createTextNode(value + " Cell");
            this.appendChild(n2);
        }
    })(i);

};

};

Answer 4

Your code doesn't work because when your onmouseover and onmouseout functions are executed, the value of your text variables is "cell 28." Also, your child removal was a little off, if I interpret your intentions correctly.

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <script type="text/javascript">
    function createDivs(n) { 
      for(var i = 1; i <= n; i++) {
        var div = document.createElement("div"); 
        var body = document.getElementsByTagName("body")[0];

        div.style.width = "100px";
        div.style.height  = "100px";
        div.style.border = "1px solid red";
        div.style.cssFloat = "left";
        div.style.margin = "1px"
        div.className = i;
        body.appendChild(div);

        div.onmouseover = function() {
          if (this.childNodes.length > 0) this.removeChild(this.childNodes[0]);
          var n_text = document.createTextNode("Cell " + this.className);
          this.appendChild(n_text);
        },
        div.onmouseout = function() {
          if (this.childNodes.length > 0) this.removeChild(this.childNodes[0]);
          var n_text = document.createTextNode(this.className + " Cell");
          this.appendChild(n_text);
        }  
      }   
    }

    createDivs(28)

  </script>

</body>
</html>

I also changed your if statement so you pass the number of cells you want instead of the number of cells +1.