I've created a script that hides a DIV Class if it contains the text "No Event Found" or "Error". This part is working great, however when this happens I would like a hidden DIV ID to load in it's place. (#brxe-akqmjs)

<script>
const divs = document.getElementsByClassName('etn-not-found-post');

for (let x = 0; x < divs.length; x  ) {
    const div = divs[x];
    const content = div.textContent.trim();
  
    if (content == 'No Event Found' || content == 'Error') {
        div.style.display = 'none';
    }
}
</script>

How do I go about getting this to load correctly? The DIV I want to show is set to display:none.

Many thanks in advance.

I have tried adding if statements but this only results in the original code breaking.

CodePudding user response：

You can simply using jquery hide() and show() method to hide and show the content. Here I rewrite the function in jquery format.

<script>
const divs = $('.etn-not-found-post');

for (let x = 0; x < divs.length; x  ) {
    const div = divs[x];
    const content = div.textContent.trim();
  
    if (content == 'No Event Found' || content == 'Error') {
        div.hide();
    }else{
        div.show();
    }
}
</script>

CodePudding user response：

It depends on how that hidden DIV with ID been implemented.

Let me try to cover two approaches:

1. DIV is hidden with css using display: none;
2. DIV is hidden using attribute hidden

For both cases, first get the element reference by ID. For e.g.

var divWithID = document.getElementById("divWithID");

Now for case 1,update the style property.

dovWithId.style.display = "block";

For case 2, set the hidden attribute value to false

divWithID.setAttribute("hidden", false);

Hope this helps and clarifies your question.