replace class value in javascript

Question

I'm newer to Javascript, so sorry if I'm taking the wrong approach.

I am looking to identify an element on a page by Class Name, hide it, and replace it with the text "Loading..."

Here's what I have so far, which does successfully blank the page, however, my replacement message doesn't show.

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

It is a class name that a lot of elements on the page have, I've tried going to a narrower class name but that doesn't seem to hide the smaller individual elements. Any help would be appreciated.

EDIT: Okay, I reworked everything so it's all operating off an ID. Still confused about why it will blank the page but not show my message.

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

The method you seek is getElementsByClassName (note plural), and it returns a NodeList so you'll need something like document.getElementByClassName("loading")[0].innerHTML .... You will not see a refresh until the script finishes, you'll need to split it with setTimeout calls if you want to show something while processing occurs. — RobG
– RobG, Commented Apr 11, 2016 at 2:07

Mottie · Accepted Answer · 2016-04-11 02:02:12Z

1

Move your script to the bottom of the page... it is executing before the <div id="loading"></div> is available in the DOM. Or, wrap all the code inside a window.onload callback.

And loading is an ID, use getElementById or better yet use querySelector.

Lastly, the opening { and closing } brackets don't look like they match up.

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

answered Apr 11, 2016 at 2:02

Mottie

86.7k30 gold badges132 silver badges248 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Xzandro · Accepted Answer · 2016-04-11 02:08:14Z

0

loading is an ID. So you have two options.

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

or

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

edited Apr 11, 2016 at 2:08

answered Apr 11, 2016 at 2:01

Xzandro

9776 silver badges14 bronze badges

1 Comment

RobG Over a year ago

getElementsByClassName returns a live NodeList, not a single element.

Collectives™ on Stack Overflow

replace class value in javascript

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related