时间戳

首页 > 解决方案 > 在“GetElementbyID”中使用数组

javascript - 在“GetElementbyID”中使用数组

问题描述

我使用以下代码将变量文本输入到字段中，但想知道我是否可以使用数组来代替：

document.getElementById("PLG").innerHTML = PLGame;
document.getElementById("PLV").innerHTML = PLV;
document.getElementById("PLKOT").innerHTML = PLKOT;
document.getElementById("PLS1").innerHTML = PLS1;
document.getElementById("PLS2").innerHTML = PLS2;
document.getElementById("PLS3").innerHTML = PLS3;
document.getElementById("PLPred").innerHTML = PLPred;

我认为这将遵循以下原则：

for (i=0; i<myArray.length; i++)
let myArray = ["PLG","PLV","PLKOT","PLS1","PLS2","PLS3","PLPred"];
let outArray = ["PLGame","PLV","PLKOT","PLS1","PLS2","PLS3","PLPred"];     
document.getElementById("myArray[i]").innerHTML = OutArray[i];

我想这有很多问题，但我还在学习 JS，所以放轻松：)

标签： javascript

解决方案

肯定有多种方法可以做到这一点。按照您当前的逻辑，您可以创建一个for循环，该循环将提供您需要索引到两个数组中的索引并执行分配。

我认为更好的实现是创建一个带有对象的数组。这样，您不必担心两个数组在完全相同的索引处具有正确的 id/value 对。

// method 1
const ids = ["PLG", "PLV", "PLKOT"]
const values = ["v1", "v2", "v3"]

for (let i = 0; i < ids.length; i++) {
  document.getElementById(ids[i]).innerHTML = values[i]
}

// method 2
const pairs = [
  {
    id: 'PLG',
    value: 'v1'
  },
  {
    id: 'PLV',
    value: 'v2'
  },
  {
    id: 'PLKOT',
    value: 'v3'
  }
]

pairs.forEach((pair) => {
  document.getElementById(pair.id).innerHTML = pair.value
})
<h1>Method 1</h1>

<div id="PLG"></div>
<div id="PLV"></div>
<div id="PLKOT"></div>

推荐阅读