通过从JavaScript中的函数返回函数来修改div

所以，我的任务是将一个div传递给一个函数，然后返回一个函数，该函数将创建一个新的div，分配一个类（在CSS中定义）并添加到div最初传入该函数。通过从JavaScript中的函数返回函数来修改div

更具体地说，addDivTo()函数接收一个div id并返回一个函数。被返回的函数接收一个类作为参数，在这个函数中应创建新的div，应用该类并创建随机位置以放置在原始div中。

我花了一些时间来解决这个问题，我想我已经正确地构建了addDivTo()，因为我将该函数接收回变量，但是在尝试将该类传递给返回函数时没有发生任何事情。

我很抱歉，我在我的代码中有一堆评论，试图保持我试图做的事情，但我显然没有做正确的事，因为没有任何事情发生！如果有人能指出我正确的方向或解释我做错了什么，我将不胜感激。

<!doctype html> 
<html> 
<head> 
<title> Functions: Returning a function from a function </title> 
<meta charset="utf-8"> 
<style> 
    html, body, div#container { 
     width: 100%; 
     height: 100%; 
     margin: 0px; 
     padding: 0px; 
    } 
    div#container1, div#container2 { 
     position: relative; 
     height: 300px; 
     border: 1px solid black; 
    } 
    .red { 
     position: absolute; 
     width: 150px; 
     height: 150px; 
     background-color: red; 
    } 
    .blue { 
     position: absolute; 
     width: 175px; 
     height: 175px; 
     background-color: lightblue; 
    } 
    .circle { 
     width:100px; 
     height:100px; 
     border-radius:50px; 
     font-size:20px; 
     color:#fff; 
     line-height:100px; 
     text-align:center; 
     background:#000 
    } 
    .squared { 
     border: 2x solid black; 
    } 
</style> 
    <script> 
     window.onload = init; 
     function init() {  
     //Pass value for div container into addDivTo() 
     //addDivTo() will return a function to the variable passed to it 
     //when calling function returned from addDivTo pass in name of 
     //class the div should have 

     var containerOne = document.getElementById("container1"); 
     var containerTwo = document.getElementById("container2"); 
     var colorOne = getComputedStyle(document.body, "red"); 
     var colorTwo = getComputedStyle(document.body, "blue"); 
     var shapeSquare = getComputedStyle(document.body, "square"); 
     var shapeCircle = getComputedStyle(document.body, "circle"); 

     //call addDivTo() calling containers 
    //return function will be contained in the variables 

    var newDiv1 = addDivTo(containerOne); 
    var newDiv2 = addDivTo(containerTwo); 

    //pass class to function which should return the new div and class 
    //and append to original container passed to addDivTo 

    var addColor = newDiv1(colorOne); 
    containerOne.appendChild(addColor); 
    var addShape = newDiv1(shapeSquare); 
    containerOne.appendChild(addShape); 
    var addColor2 = newDiv2(colorTwo); 
    containerTwo.appendChild(addColor2); 
    var addShape2 = newDiv2(shapeCircle); 
    container2.appendChild(addShape2);   
} 

function addDivTo (containerIn) { 
//Takes container id and returns a function when called 

//Return function takes class, create new div element and add to div 
//passed in the call addDivTo      
    return function(classToAdd) { 
     var divIn = containerIn; 
     var classIn = classToAdd;     
     var newDiv = document.createElement('div'); 
     newDiv.id = "funcDiv"; 
     newDiv.style.left = Math.floor(Math.random() * (newDiv.offsetWidth 
         = 175)) + "px"; 
     newDiv.style.right = Math.floor(Math.random() * 
         (newDiv.offsetHeight = 175)) + "px"; 
     newDiv.className = classIn;    
     return newDiv; 
    }; 

} 

    </script> 
</head> 
<body> 
    <div id="container1"></div> 
    <div id="container2"></div> 
</body> 
</html>

来源

2015-04-03 TRogers

如果使用.className属性，则只能传递类名。看看这里：http://www.w3schools.com/jsref/prop_html_classname.asp

你只需要改变：

var colorOne = getComputedStyle(document.body, "red"); 
var colorTwo = getComputedStyle(document.body, "blue");

要：

var colorOne = "red"; 
var colorTwo = "blue";

这里是工作示例： http://codepen.io/anon/pen/KwYYMp

来源

2015-04-03 16:53:15

首先，getComputedStyle没有按这种工作就是这样。它返回一个样式对象，并且不需要第二个参数的类。 Read the docs on MDN.

其次，有一个p在.squared CSS失踪px。

接下来，您将获得许多无用的变量，这些变量只会在创建后立即传递，比如divIn和classIn。

最后，ID必须在文档中是唯一的，但您的函数始终创建具有相同ID的div。

为什么你必须首先返回一个函数？难道你不能只做一个叫做addDivTo(parent, class)的函数吗？它会照顾附加以及其他一切事情吗？

从解决这个问题开始，查看JS控制台的调试消息。

来源

2015-04-03 16:53:54

你正在返回一个函数（我们稍后会调用）而不是一个新的div。

的addDivTo（）函数接收一个DIV ID和返回功能

所以不是

var newDiv1 = addDivTo(containerOne);

认为这

var funcAddToContainerOne = addDivTo(containerOneId);

所述功能在t中返回接收一个类作为参数他的功能新的div应创建，类应用

现在你已经在正确的轨道上

function addDivTo (containerId) {     
    // this is an anonymous function you will assign to a variable 
    return function(classToAdd) { 
     // 1. create new div 
     // 2. add class 
     // 3. find containerId 
     // 4. append new div to found element 
    } 
}

你还可以用你之前设置的变量调用你的新的匿名函数：

var funcAddToContainerOne = addDivTo(containerOneId); 
funcAddToContainerOne(className);

现在，所有的DOM操作都从主init（）函数中移除并嵌入到匿名函数中。

来源

2015-04-03 17:15:12 Jasen

在声明中：var funcAddToContainerOne = addDivTo（containerOneId）我应该在那里调用元素名称还是与funcAddToContainerOne = addDivTo（containerOne）相同，其中document.getElementById（“container1）被分配给containerOne变量？ – TRogers 2015-04-03 18:36:19

如果您需要在该插入函数之外操作“container1”，则传递该元素。如果您不需要在此函数之外进行操作，则传递该id并让该函数找到该元素。 – Jasen 2015-04-03 18:39:53

在某些情况下，您将永远不会确切知道某个元素的Id是什么，但会将其作为一个对象引用 - 然后您将传递该元素本身。 – Jasen 2015-04-03 18:42:24

通过从JavaScript中的函数返回函数来修改div

回答

相关问题