Question

目标： ：每次用户刷新页面时，都会出现一个新的 random “正方形”，其中包含文本（标签）和图像（图标）上，当用户单击“正方形”时，它将重定向到新链接（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的值放在那里。

我希望我的问题很清楚。

已解决

Answer 1

假定 id 及其 value 应该用作url参数，您可以执行类似的操作，并将其附加到锚点href < / p>

堆栈片段

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>

Answer 2

您也可以使用此代码选择ID

href =“ javascript：{document.getElementById（” yourid“），submit（）}”

将javascript ID添加为Href

2 个答案: