gpt4 book ai didi

javascript - 单击按钮后无法读取刚刚在 JS 中创建的 DIV 的属性 ("null")

转载 作者:行者123 更新时间:2023-11-28 10:44:43 24 4
gpt4 key购买 nike

我正在尝试创建一个基本网页,允许用户在按下按钮时创建新的 DIV。我成功地完成了那部分。现在,为了在按下时找到单个 DIV(这样我以后可以应用其他功能,例如编辑它),在不使用大量重复代码的情况下,我创建/设计了一个系统,该系统可以比较悬停在其上的 DIV 的颜色并找到它的 ID。然而,分配给 DIV 的颜色显然仍然为空,尽管您可以看到 CSS 改变了它的颜色。有什么建议么?抱歉,如果我的代码显示得很糟糕;第一次在这里写问题。

HTML:

<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<script type="text/javascript" src="scripts/scripts.js"></script>
<script src="scripts/jquery-3.2.1.min.js"></script>
</head>
<body>
<form onsubmit="createNewContentTile(); return false;">
<input type="submit" id="addTile" value="+">
<input type="text" id="inputTextContent" placeholder="content" maxlength="256">
</form>
</body>
</html>

JavaScript:

var tileDivIDCounter = 0;
var arrayOfTileIDs = ["tileDiv1"];
var selectTileDivIDCounter = 0;
var selectedTile = "";

function tileClicked() {
while (document.getElementById(arrayOfTileIDs[selectTileDivIDCounter]).style.backgroundcolor === "#ff0000") {
selectedTile = arrayOfTileIDs[selectTileDivIDCounter];
alert(arrayOfTileIDs[selectTileDivIDCounter]);
}
selectTileDivIDCounter += 1;
}

function createNewContentTile() {
if (document.getElementById("inputTextContent").value === "") {
alert("Enter content");
} else {
tileDivIDCounter += 1;
tileDivIDString = "tileDivID" + tileDivIDCounter;
arrayOfTileIDs.push(tileDivIDString);
var newDiv = document.createElement("div");
newDiv.setAttribute("class", "tileDiv");
newDiv.setAttribute("id", tileDivIDString);
newDiv.setAttribute("onclick", "tileClicked()");
var inputText = document.getElementById("inputTextContent").value;
var newContent = document.createTextNode(inputText);
document.getElementById("inputTextContent").value = "";
newDiv.appendChild(newContent);
var currentDiv = document.getElementById("div1");
document.body.insertBefore(newDiv, currentDiv); //change to bottom of wrapper
}


}

CSS:

.tileDiv {
background-color: aqua;
}

.tileDiv:hover {
background-color: #ff0000;
}

最佳答案

我认为您尝试做的事情存在两个问题:

1) 样式和计算样式是两个不同的东西。简单地将 CSS 样式应用于元素不会更改样式属性。请参阅https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle

2) selectTileDivIDCounter 永远不会改变,因此将始终设置为 0,指向不存在的元素(这就是为什么你得到 null)

编辑:

第 2 点并不完全正确,因为它确实在 onclick 函数中递增。我不确定那里可能存在一些命名问题。不过,我认为主要问题可能是第一点。

关于javascript - 单击按钮后无法读取刚刚在 JS 中创建的 DIV 的属性 ("null"),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45496407/

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