Javascript 如何以更简单的方式在图像标记中编写变量？

我可能想显示同一股票符号的不同版本的图表，因此需要使用“var”。 （我的其他用途是天气图或交通摄像头等，因此我有更广泛的应用）。 我将用股票图表来说明这一点

通过反复试验，我发现使用id=“x”和“document.getElementById”是可行的， 但它需要在每行两次仔细地记录相同且唯一的id。（如果不是“长线”而是断线，则更难保持身份证的笔直）

想象一下，如果有几十行额外的图表变化，它会变得单调乏味

有更好的办法吗？您将如何编写代码以生成“图形拼贴”

var sym=“MSFT”
符号文件。写入（sym）

$var a=document.getElementById（'i1'）；a、 src=”http://www.google.com/finance/chart?cht=o&tlf=12h&q=“+sym；
%var a=document.getElementById（'i2'）；a、 src=”http://www.google.com/finance/chart?cht=c&tlf=12h&q=“+sym；

我将从HTML中删除所有的

标记。这使文档结构和行为逻辑保持分离。下面是一个使用循环和字符串连接的示例，应该是可扩展的：

<h1 id="title"></h1>
<img src="" class="symbol" alt="stock chart">$&nbsp;&nbsp;
<img src="" class="symbol" alt="stock chart">%&nbsp;&nbsp;
<!-- etc.  perhaps dozens more different charts for the same symbol -->

<script>

const sym = "MSFT";
const urls = [
  "http://www.google.com/finance/chart?cht=o&tlf=12h&q=", 
  "http://www.google.com/finance/chart?cht=c&tlf=12h&q="
];
document.getElementById("title").innerHTML = "Symbol " + sym;
const symElems = document.getElementsByClassName("symbol");

for (let i = 0; i < symElems.length; i++) {
  symElems[i].src = urls[i] + sym; 
}

</script>

---

谢谢，这看起来更优雅。我特别喜欢最后一个片段，它是一个清晰的列表。不过，我必须更加努力地学习，因为图表URL可能看起来完全不同，并且符号不一定在最后。e、 g.为了证明哪怕是微小的变化（与标准普尔500指数相比），我不能简单地添加一行“”。我现在只学习如何使用你建议的对象等。尝试了更多的例子，我真的印象深刻，它工作得多么好，当符号位于url末尾时总是正确的。这对我帮助很大！现在，我必须弄清楚当const在一些URL的中间某个地方时，如何构造线或代码，而对于其他人来说，假设一个必须是“…q= MSFT，.x x”，其他的只是“…q= MSFT”听起来不错——如果需要更多的指导，请告诉我。问题在于找到合适的数据结构来保存您需要的任何信息（如果需要的信息很多，可能是JSON），编写循环，连接字符串，并将元素粘贴到文档中。如果您想要构建的每个URL或其他规范之间存在很大差异，那么可能需要更多的麻烦。

<h1 id="title"></h1>
<div id="sym-container"></div>

<script>

const sym = "MSFT";
const urls = [
  "http://www.google.com/finance/chart?cht=o&tlf=12h&q=", 
  "http://www.google.com/finance/chart?cht=c&tlf=12h&q=",
  "http://www.google.com/finance/chart?cht=g&tlf=12h&q=",
  "http://www.google.com/finance/chart?cht=s&tlf=12h&q=" 
];
document.getElementById("title").innerHTML = "Symbol " + sym;
const symContainer = document.getElementById("sym-container");

urls.forEach(e => {
  const symElem = document.createElement("img");
  symElem.src = e + sym; 
  symContainer.appendChild(symElem);
});

</script>