javascript - 替换javascript中的类值

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到页面底部...它在 <div id="loading"></div> 之前执行在 DOM 中可用。或者，将所有代码包装在 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>