时间戳

首页 > 解决方案 > 将 JavaScript var 添加到页面上的多个位置

javascript - 将 JavaScript var 添加到页面上的多个位置

问题描述

我有一些具有相同名称的 2 个标签的 HTML，在我的 JavaScript 中我有一个var，因此将来如果电话号码发生变化，只需在一个地方（在 JavaScript 中）更改它并将应用于所有标签与匹配的命名。

我似乎不记得如何做到这一点，因为我不能使用“ID”，因为在显示隐藏时Div会显示“页脚”。一个是 a <p>，另一个是 a <span>，页面包含其中的一些。

它需要是 JavaScript 而不是 jQuery。

代码

<div class="row m-0 d-flex align-items-center p-5">
    <div class="col-12 col-lg-6 pr-lg-0">
        <h1>Oops, something went wrong</h1>
        <span id="otherErrorTxt" style="display: none">
            <p>This error has occurred whilst processing your request.</p>
            <p>If the error continues, please contact us on:</p>
            <p name="telNo" class="text-muted"></p> <!-- TEL NO. TO GO HERE -->
        </span>
        <span id="fourOfourTxt">
            <p>The page you are looking for is not available. This may be because of one of the following reasons:</p>
            <ul class="mb-3">
                <li>The page may have been moved or removed</li>
                <li>The page may have had its name changed</li>
                <li>You may have typed the URL incorrectly</li>
            </ul>
        </span>
        <a class="btn btn-primary col-12 col-lg-2 mt-3" href="/">Go back</a>
    </div>
</div>

<div class="row footer">
    <div class="col-lg-4">
        &copy; 2020 Packnet Limited - All rights reserved
    </div>
    <div class="col text-right">
        <i class="fas fa-phone fa-lg fa-rotate-90 mr-2"></i>
        <span name="telNo"></span> <!-- TEL NO. TO ALSO GO HERE -->
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', (event) => {
        var telNo = '01234 567 8900 (8.30am till 5.30pm - Mon to Fri excluding bank holidays)';

        if (document.getElementById('returnedError').innerHTML.indexOf('404') != -1) {
            document.getElementById('fourOfourTxt').style.display = 'block';
            document.getElementById('otherErrorTxt').style.display = 'none';
        } else {
            document.getElementById('fourOfourTxt').style.display = 'none';
            document.getElementById('otherErrorTxt').style.display = 'block'
        }

        document.getElementsByName('telNo').innerHTML = telNo; // Not working
    });
</script>

标签： javascripthtml

解决方案

您需要遍历getElementsByName()函数的结果，因为它返回一个集合。请参见下面的示例。正如评论中提到的，你不应该在 span 元素上使用 name。最好使用类选择器。相同的逻辑适用于getElementsByClassName()orquerySelectorAll()函数，因为这些返回集合也是如此。

var telNo = '01234 567 8900 (8.30am till 5.30pm - Mon to Fri excluding bank holidays)';

document.getElementsByName('telNo').forEach((el) => {
  el.innerHTML = telNo;
});
<div class="row m-0 d-flex align-items-center p-5">
  <div class="col-12 col-lg-6 pr-lg-0">
    <h1>Oops, something went wrong</h1>
    <span id="otherErrorTxt" style="display: block">
            <p>This error has occurred whilst processing your request.</p>
            <p>If the error continues, please contact us on:</p>
            <p name="telNo" class="text-muted"></p> <!-- TEL NO. TO GO HERE -->
        </span>
    <span id="fourOfourTxt">
            <p>The page you are looking for is not available. This may be because of one of the following reasons:</p>
            <ul class="mb-3">
                <li>The page may have been moved or removed</li>
                <li>The page may have had its name changed</li>
                <li>You may have typed the URL incorrectly</li>
            </ul>
        </span>
    <a class="btn btn-primary col-12 col-lg-2 mt-3" href="/">Go back</a>
  </div>
</div>

<div class="row footer">
  <div class="col-lg-4">
    &copy; 2020 Packnet Limited - All rights reserved
  </div>
  <div class="col text-right">
    <i class="fas fa-phone fa-lg fa-rotate-90 mr-2"></i>
    <span name="telNo"></span>
    <!-- TEL NO. TO ALSO GO HERE -->
  </div>
</div>

推荐阅读