gpt4 book ai didi

javascript - 通过从 JavaScript 中的函数返回一个函数来修改 div

转载 作者:太空宇宙 更新时间:2023-11-04 12:05:15 24 4
gpt4 key购买 nike

所以,我的任务是将一个 div 传递给一个函数,然后返回一个函数,该函数将创建一个新的 div,分配一个类(在 CSS 中定义)并添加到最初传递给该函数的 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>

最佳答案

首先,getComputedStyle 根本不是那样工作的。它返回一个样式对象并且不将类作为第二个参数。 Read the docs on MDN.

其次,.squared CSS 中的 px 缺少 p

接下来,你有很多无用的变量,它们被创建只是为了在之后立即传递,比如 divIn 和 classIn。

最后,id 在文档中必须是唯一的,但是您的函数总是创建具有相同 id 的 div。

为什么你必须首先返回一个函数?难道你不能只创建一个名为 addDivTo(parent, class) 的函数来处理追加以及其他所有事情吗?

首先修复它并查看 JS 控制台以获取调试消息。

关于javascript - 通过从 JavaScript 中的函数返回一个函数来修改 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29435869/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com