目标：每次用户刷新页面时，都会出现一个新的随机“方块”，上面有文本（标签）和图像（图标），当用户点击“方块”时，它将重定向到一个新链接（href） .
我的计划：每次刷新页面时，都会随机选取数组 (myArray) 中的对象。来自对象的属性（标签、图标和 href）的值将被调用，并将用于创建“正方形”。
这是我到目前为止所做的：
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script>
var myArray = [{
label: "Appels",
icon: "./Appels.png",
href: "./Appels.html"
}, {
label: "Pears",
icon: "./Pears.png",
href: "./Pears.html"
}, {
label: "Banana",
icon: "./Banana.png",
href: "./Banana.html"
}, {
label: "Mango",
icon: "./Mango.png",
href: "./Mango.html"
}];
var randomItem1 = myArray[Math.floor(Math.random()*myArray.length)];
var randomItem2 = myArray[Math.floor(Math.random()*myArray.length)];
var randomItem3 = myArray[Math.floor(Math.random()*myArray.length)];
var randomItem4 = myArray[Math.floor(Math.random()*myArray.length)];
document.addEventListener("DOMContentLoaded", function(event) {
document.getElementById("randomItem1label").innerHTML = randomItem1.label;
document.getElementById("randomItem1icon").innerHTML = randomItem1.icon;
document.getElementById("randomItem1href").innerHTML = randomItem1.href;
document.getElementById("randomItem2label").innerHTML = randomItem2.label;
document.getElementById("randomItem2icon").innerHTML = randomItem2.icon;
document.getElementById("randomItem2href").innerHTML = randomItem2.href;
document.getElementById("randomItem3label").innerHTML = randomItem3.label;
document.getElementById("randomItem3icon").innerHTML = randomItem3.icon;
document.getElementById("randomItem3href").innerHTML = randomItem3.href;
document.getElementById("randomItem4label").innerHTML = randomItem4.label;
document.getElementById("randomItem4icon").innerHTML = randomItem4.icon;
document.getElementById("randomItem4href").innerHTML = randomItem4.href;
});
</script>
<p>Random 1</p>
<!-- <div id = "randomItem1label"> </div> -->
<div id = "randomItem1icon"> </div>
<div id = "randomItem1href"> </div>
<p>Random 2</p>
<div id = "randomItem2label"> </div>
<div id = "randomItem2icon"> </div>
<div id = "randomItem2href"> </div>
<p>Random 3</p>
<div id = "randomItem3label"> </div>
<div id = "randomItem3icon"> </div>
<div id = "randomItem3href"> </div>
<p>Random 4</p>
<div id = "randomItem4label"> </div>
<div id = "randomItem4icon"> </div>
<div id = "randomItem4href"> </div>
<hr>
Making of the "Square" without CSS (So not really a square)
<hr>
<div class="col-md-3">
<div class="block">
<a href="/placeholderlink" id="testlink"> <!-- href -->
<div class="block_icon">
<img src=""> <!-- icon -->
</div>
<div class="block_info">
<div id = "randomItem1label"> </div> <!-- Label -->
</div>
</a>
</div>
</div>
<script>
var link = document.getElementById("testlink");
link.setAttribute("href", "ID FROM id = randomItem1href HERE " );
</script>
</body>
</html>如您所见，标签 ID 被插入到“方块”中
问题：属性、图标和 href 没有插入到“方块”中。我曾尝试使用，link.setAttribute但在添加 ID 时遇到问题。
<div id = "randomItem1href"> </div>
<a href="/placeholderlink" id="testlink"> <!-- href -->
<script>
var link = document.getElementById("testlink");
link.setAttribute("href", ***id = "randomItem1href"*** );
</script>
id = "randomItem1href"不工作我怎么能把我的 id 值放在那里。
我希望我的问题很清楚。
解决了
假设应将id及其值用作 url 参数，您可以执行以下操作，并将其附加到锚点href
堆栈片段
var div = document.querySelector('#randomItem1href');
var anchor = document.querySelector('a');
anchor.href += "?id=" + div.id;
console.log(anchor.href)<div id = "randomItem1href"> </div>
<a href="some_url">some url</a>问题编辑后更新
这是您的代码片段的更新，我像这样对其进行了更改，如果您刷新它，它将随机对项目进行排序，并随之 href
var link = document.getElementById("testlink");
link.href = randomItem4.href;
堆栈片段
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script>
var myArray = [{
label: "Appels",
icon: "./Appels.png",
href: "./Appels.html"
}, {
label: "Pears",
icon: "./Pears.png",
href: "./Pears.html"
}, {
label: "Banana",
icon: "./Banana.png",
href: "./Banana.html"
}, {
label: "Mango",
icon: "./Mango.png",
href: "./Mango.html"
}];
var randomItem1 = myArray[Math.floor(Math.random()*myArray.length)];
var randomItem2 = myArray[Math.floor(Math.random()*myArray.length)];
var randomItem3 = myArray[Math.floor(Math.random()*myArray.length)];
var randomItem4 = myArray[Math.floor(Math.random()*myArray.length)];
document.addEventListener("DOMContentLoaded", function(event) {
document.getElementById("randomItem1label").innerHTML = randomItem1.label;
document.getElementById("randomItem1icon").innerHTML = randomItem1.icon;
document.getElementById("randomItem1href").innerHTML = randomItem1.href;
document.getElementById("randomItem2label").innerHTML = randomItem2.label;
document.getElementById("randomItem2icon").innerHTML = randomItem2.icon;
document.getElementById("randomItem2href").innerHTML = randomItem2.href;
document.getElementById("randomItem3label").innerHTML = randomItem3.label;
document.getElementById("randomItem3icon").innerHTML = randomItem3.icon;
document.getElementById("randomItem3href").innerHTML = randomItem3.href;
document.getElementById("randomItem4label").innerHTML = randomItem4.label;
document.getElementById("randomItem4icon").innerHTML = randomItem4.icon;
document.getElementById("randomItem4href").innerHTML = randomItem4.href;
});
</script>
<p>Random 1</p>
<!-- <div id = "randomItem1label"> </div> -->
<div id = "randomItem1icon"> </div>
<div id = "randomItem1href"> </div>
<p>Random 2</p>
<div id = "randomItem2label"> </div>
<div id = "randomItem2icon"> </div>
<div id = "randomItem2href"> </div>
<p>Random 3</p>
<div id = "randomItem3label"> </div>
<div id = "randomItem3icon"> </div>
<div id = "randomItem3href"> </div>
<p>Random 4</p>
<div id = "randomItem4label"> </div>
<div id = "randomItem4icon"> </div>
<div id = "randomItem4href"> </div>
<hr>
Making of the "Square" without CSS (So not really a square)
<hr>
<div class="col-md-3">
<div class="block">
<a href="/placeholderlink" id="testlink"> <!-- href -->
<div class="block_icon">
<img src=""> <!-- icon -->
</div>
<div class="block_info">
<div id = "randomItem1label"> </div> <!-- Label -->
</div>
</a>
</div>
</div>
<script>
var link = document.getElementById("testlink");
link.href = randomItem1.href;
</script>
</body>
</html>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句