将 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) => {&nbsp; el.innerHTML = telNo;});<div class="row m-0 d-flex align-items-center p-5">&nbsp; <div class="col-12 col-lg-6 pr-lg-0">&nbsp; &nbsp; <h1>Oops, something went wrong</h1>&nbsp; &nbsp; <span id="otherErrorTxt" style="display: block">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>This error has occurred whilst processing your request.</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>If the error continues, please contact us on:</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p name="telNo" class="text-muted"></p> <!-- TEL NO. TO GO HERE -->&nbsp; &nbsp; &nbsp; &nbsp; </span>&nbsp; &nbsp; <span id="fourOfourTxt">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>The page you are looking for is not available. This may be because of one of the following reasons:</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ul class="mb-3">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>The page may have been moved or removed</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>The page may have had its name changed</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>You may have typed the URL incorrectly</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; &nbsp; &nbsp; </span>&nbsp; &nbsp; <a class="btn btn-primary col-12 col-lg-2 mt-3" href="/">Go back</a>&nbsp; </div></div><div class="row footer">&nbsp; <div class="col-lg-4">&nbsp; &nbsp; &copy; 2020 Packnet Limited - All rights reserved&nbsp; </div>&nbsp; <div class="col text-right">&nbsp; &nbsp; <i class="fas fa-phone fa-lg fa-rotate-90 mr-2"></i>&nbsp; &nbsp; <span name="telNo"></span>&nbsp; &nbsp; <!-- TEL NO. TO ALSO GO HERE -->&nbsp; </div></div>