Question

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

我希望通过类名识别页面上的元素，隐藏它，并将其替换为“正在加载...”文本

这是我到目前为止的成功空白页面，但是，我的替换消息没有显示。

<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>

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

编辑：好的，我重新设计了所有内容，所以所有操作都是通过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>

Answer 1

将您的script移动到页面底部...它在DOM中<div id="loading"></div>可用之前执行。或者，将所有代码包装在window.onload回调中。

loading是一个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>

Answer 2

loading是一个ID。所以你有两个选择。

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

或

<div class="loading"></div>
document.getElementsByClassName("loading")[0].innerHTML = Message1;

在javascript中替换类值

2 个答案: