通過從JavaScript中的函數返回函數來修改div
[英]Modifying div by returning a function from a function in JavaScript
問題描述
因此，我的任務是將div傳遞給函數，然后返回一個函數，該函數將創建一個新的div，分配一個類（在CSS中定義），然后添加到最初傳遞給該函數的div中。
更具體地說， addDivTo()函數接收一個div id並返回一個函數。 返回的函數接收一個類作為參數，在該函數中應創建新的div，應用該類並創建隨機位置以放置在原始div中。
我花了一些時間來解決這個問題，我認為我在將函數接收回變量時正確構建了addDivTo() ，但是嘗試將類傳遞給return函數時沒有任何反應。
我很抱歉，我的代碼中有很多注釋，試圖保持我嘗試做的事情，但顯然我沒有做正確的事，因為什么也沒發生！ 如果有人能指出正確的方向或解釋我做錯了什么，我將不勝感激。
<!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>
3 個解決方案
解決方案1
1 2015-04-03 16:53:54
首先， getComputedStyle根本無法正常工作。 它返回一個樣式對象，並且沒有第二個參數的類。 閱讀有關MDN的文檔。
其次， .squared css中的px缺少p 。
接下來，您將創建很多無用的變量，這些變量只能在之后立即傳遞，例如divIn和classIn。
最后，id在文檔中必須唯一，但是您的函數始終創建具有相同id的div。
以及為什么必須首先返回一個函數？ 您能否僅制作一個稱為addDivTo(parent, class)函數addDivTo(parent, class)該函數將負責附加以及其他所有內容？
首先修復該問題，然后查看JS控制台以獲取調試消息。
解決方案2
0 2015-04-03 16:53:15
如果使用.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
解決方案3
0 2015-04-03 17:15:12
您返回的是一個函數（稍后將調用）而不是新的div。
addDivTo（）函數接收一個div ID並返回一個函數
所以代替
var newDiv1 = addDivTo(containerOne);
想想看
var funcAddToContainerOne = addDivTo(containerOneId);
返回的函數接收一個類作為參數，在該函數中應創建新的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（）函數中刪除，並嵌入到您的匿名函數中。
JavaScript函數未修改html
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.