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

Question

我有一些 HTML，其中有 2 个同名标签，在我的 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>

Answer 1

您需要循环该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>