从多个变量中获取元素()显示

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

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

对于Chrome浏览器。https:/developers.google.comwebtoolschrome-devtoolsopen。

对于Firefox。https:/developer.mozilla.orgen-USdocsToolsWeb_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;
}

// ...

Answer 2

在所提供的html中，你只有一个id为 socialen 这就是为什么当你设置innerHTML的 socialen 它的工作原理。不过 socialru 和 sociallv 不是 html 元素，因此它实际上没有设置任何东西。

如果你在你的html中添加以下内容，你应该会得到预期的结果。

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