替换javascript中的类值

我是Javascript新手，如果我采取了错误的方法，那么很抱歉

我希望通过类名识别页面上的元素，隐藏它，并用文本“Loading…”替换它

这是我到目前为止所做的，它成功地清空了页面，但是，我的替换消息没有显示出来

<style>
.loading{
display: block;
}
</style>
<script>

if (checkRequiredFields(document.forms[0]) && document.InfoForm.FUDF9.value=="Y1")
{
var elems = document.getElementsByClassName("name");

for (i = 0; i < elems.length; i++) {
    elems[i].style.display = "none";}
}

</script>
<div id = "loading"></div>
<script>
var Message1 = "Loading...";
if (checkRequiredFields(document.forms[0]) && document.InfoForm.FUDF9.value=='Y1'){

document.getElementByClassName("loading").innerHTML = Message1;}
</script>

.装货{
显示：块；
}
if（checkRequiredFields（document.forms[0]）&document.InfoForm.FUDF9.value==“Y1”）
{
var elems=document.getElementsByClassName（“名称”）；
对于（i=0；i

这是一个类名，页面上的很多元素都有，我尝试过使用一个更窄的类名，但这似乎并没有隐藏较小的单个元素。任何帮助都将不胜感激

编辑：好的，我修改了所有内容，所以它都是通过ID操作的。仍然不明白为什么它会空白页面，但不显示我的消息

<style>
#loading{
display: block;
}
</style>
<div id = "loading"></div>
<script>

if (checkRequiredFields(document.forms[0]) && document.InfoForm.FUDF9.value=="Y1")
{
var elems = document.getElementsByClassName("name");

for (i = 0; i < elems.length; i++) {
    elems[i].style.display = "none";}
}

var quickPledgeMessage1 = "Loading...";
if (checkRequiredFields(document.forms[0]) && document.InfoForm.FUDF9.value=='Y1'){

document.getElementById("loading").innerHTML = quickPledgeMessage1;}
</script>

#装载{
显示：块；
}
if（checkRequiredFields（document.forms[0]）&document.InfoForm.FUDF9.value==“Y1”）
{
var elems=document.getElementsByClassName（“名称”）；
对于（i=0；i

加载是一个ID。因此您有两个选项

<div id="loading"></div>
document.getElementById("loading").innerHTML = Message1;

document.getElementById（“加载”）.innerHTML=Message1；

或

document.getElementsByClassName（“正在加载”）[0].innerHTML=Message1；

将脚本移动到页面底部。。。它是在DOM中的

可用之前执行的。或者，将所有代码包装在window.onload回调中

而

加载

是一个ID，请使用

getElementById

或者更好地使用

querySelector

最后，开头的

{

和结尾的

}

括号看起来不匹配

<style>
.loading{
display: block;
}
</style>
<div id = "loading"></div>
<script>

if (checkRequiredFields(document.forms[0]) && document.InfoForm.FUDF9.value=="Y1")
{
    var elems = document.getElementsByClassName("name");

    for (i = 0; i < elems.length; i++) {
        elems[i].style.display = "none";}
    }
}
var Message1 = "Loading...";
if (checkRequiredFields(document.forms[0]) && document.InfoForm.FUDF9.value=='Y1'){
    document.getElementById("loading").innerHTML = Message1;
}
</script>

.装货{
显示：块；
}
if（checkRequiredFields（document.forms[0]）&document.InfoForm.FUDF9.value==“Y1”）
{
var elems=document.getElementsByClassName（“名称”）；
对于（i=0；i

返回一个活动节点列表，而不是单个元素。您寻求的方法是getElementsByClassName（注意复数形式），它返回一个节点列表，因此您需要类似于

document.getElementByClassName（“加载”）[0]。innerHTML…

。在脚本完成之前，您不会看到刷新，如果希望在处理过程中显示某些内容，则需要使用setTimeout调用将其拆分。

<style>
.loading{
display: block;
}
</style>
<div id = "loading"></div>
<script>

if (checkRequiredFields(document.forms[0]) && document.InfoForm.FUDF9.value=="Y1")
{
    var elems = document.getElementsByClassName("name");

    for (i = 0; i < elems.length; i++) {
        elems[i].style.display = "none";}
    }
}
var Message1 = "Loading...";
if (checkRequiredFields(document.forms[0]) && document.InfoForm.FUDF9.value=='Y1'){
    document.getElementById("loading").innerHTML = Message1;
}
</script>