getElementById() 从几个变量显示

Question

我想通过 document.getElementById 显示来自外部 javascript 文件的社交网络链接汇编，具体取决于我网站的语言版本。问题是它适用于第一个 ID ("sociallv")，但不适用于其他 ID（"socialen" 和 "socialru"），如果我在网页上单独使用它们的话。我应该改变什么？

/* Social networks start */

var start = "<div class='social justify-content-between'>"

var end = "</div>"

var facebook = "<a href='https://www.facebook.com/maggitekstils.lv' title='Facebook' rel='noreferrer' target='_blank'><div class='social-button facebook'></div>"; 

var draugiem = "<a href='https://www.draugiem.lv/maggitekstils.lv' title='Draugiem' rel='noreferrer' target='_blank'><div class='social-button draugiem'></div>"; 

var youtube = "<a href='https://www.youtube.com/channel/UC2H9dhm1Nzw3i4wveNTgHnQ/playlists' title='YouTube' rel='noreferrer' target='_blank'><div class='social-button youtube'></div></a>"; 

document.getElementById("sociallv").innerHTML = start + facebook + draugiem + youtube + end;

document.getElementById("socialen").innerHTML = start + facebook + youtube + end;

document.getElementById("socialru").innerHTML = start + facebook + youtube + end;

/* Social networks end */

<div class="social-media" id="socialen"></div>

Answer 1

在提供的 html 中，您只有一个 ID 为 socialen 的元素，这就是为什么当您设置 socialen 的 innerHTML 时它起作用的原因。但是 socialru 和 sociallv 不是 html 元素，因此它实际上没有设置任何内容。

如果您将以下内容添加到 html，您应该会得到预期的结果

<div class="social-media" id="sociallv"></div>
<div class="social-media" id="socialru"></div>

Answer 2

您检查过您的 JS 控制台是否有任何错误吗？

对于Chrome：https://developers.google.com/web/tools/chrome-devtools/open

对于 Firefox：https://developer.mozilla.org/en-US/docs/Tools/Web_Console

我怀疑你的 Javascript 的执行被中止了，因为你试图为一个不存在的对象设置一个属性的值，因此块

document.getElementById("socialen").innerHTML = start + facebook + youtube + end;

document.getElementById("socialru").innerHTML = start + facebook + youtube + end;

从未达到。您应该始终检查查询的元素是否存在：

// ...

if ( document.getElementById("socialen") ) {
  document.getElementById("socialen").innerHTML = start + facebook + youtube + end;
}

// ...

getElementById() 从几个变量显示

getElementById() display from several variables

html

javascript

getelementbyid