Question 228152 in Html Question posted in
Some basic documentation can be found here.

Html – Element Style not changing inside funtion

function AutoHider(){
   var Word = document.getElementsByClassName("word");
   for (var Count = 0;Count<Word.length;Count++){
    if(Word[Count].innerHTML === ""){
        Word[Count].style.display = 'none';
    }
   }
}

i have a list of 32 article tags each for an alphabet letter for a custom hobby dictionary
i manuanly added a lot of words to each tag but what i want is for the JS to automatically put the display of the tags that have no content in them to none so i made this AutoHider() function and attached it to a button by onclick event the "Word" variable is a set of 33 article tags with classname "word"
then i create a loop that counts from 0 to 32 and puts the number in a [] after Word to act as a selector because it cant navigate all that article tags by tiself and in the statement i decleared if the innerHTML is empty change .style.display to none
but it does not work

Important Note : the function all the classnames and ID and variables as well as the loop works fine because i used a different code in if statement for example puting letter A in every single empty article tag and it worked only thing that does not work is changing the style

sorry if sentence is messy

i tried different task than chaning style such as showing an alert or filling article tag with letter as well as showing the value in the "Count" variable and the result is the loop and its counter the statement and class and ID are ok

****Update
this is HTML code

<section class="words">
    <span class="sm-title">الف</span>
    <article class="word" id="A"> </article>
    <span class="sm-title">ب</span>
    <article class="word" id="B"></article>
    <span class="sm-title">پ</span>
    <article class="word" id="P"></article>
    <span class="sm-title">ت</span>
    <article class="word" id="T"></article>
    <span class="sm-title">ث</span>
    <article class="word" id="S"></article>
    <span class="sm-title">ج</span>
    <article class="word" id="Jim"></article>
    <span class="sm-title">چ</span>
    <article class="word" id="Ch"></article>
    <span class="sm-title">ح</span>
    <article class="word" id="H"></article>
    <span class="sm-title">خ</span>
    <article class="word" id="Kh"></article>
    <span class="sm-title">د</span>
    <article class="word" id="Dal"></article>
    <span class="sm-title">ذ</span>
    <article class="word" id="Z-D"></article>
    <span class="sm-title">ر</span>
    <article class="word" id="R"></article>
    <span class="sm-title">ز</span>
    <article class="word" id="Z"></article>
    <span class="sm-title">ژ</span>
    <article class="word" id="Zh"></article>
    <span class="sm-title">س</span>
    <article class="word" id="Sin"></article>
    <span class="sm-title">ش</span>
    <article class="word" id="Shin"></article>
    <span class="sm-title">ص</span>
    <article class="word" id="Sad"></article>
    <span class="sm-title">ض</span>
    <article class="word" id="Z-M"></article>
    <span class="sm-title">ط</span>
    <article class="word" id="T-D"></article>
    <span class="sm-title">ظ</span>
    <article class="word" id="Z-Z"></article>
    <span class="sm-title">ع</span>
    <article class="word" id="Ein"></article>
    <span class="sm-title">غ</span>
    <article class="word" id="Ghein"></article>
    <span class="sm-title">ف</span>
    <article class="word" id="F"></article>
    <span class="sm-title">ق</span>
    <article class="word" id="Gh"></article>
    <span class="sm-title">ک</span>
    <article class="word" id="Kam"></article>
    <span class="sm-title">گ</span>
    <article class="word" id="G"></article>
    <span class="sm-title">ل</span>
    <article class="word" id="Lam"></article>
    <span class="sm-title">م</span>
    <article class="word" id="Mim"></article>
    <span class="sm-title">ن</span>
    <article class="word" id="Noon"></article>
    <span class="sm-title">و</span>
    <article class="word" id="Vav"></article>
    <span class="sm-title">ه</span>
    <article class="word" id="H-do-cheshm"></article>
    <span class="sm-title">ی</span>
    <article class="word" id="Ya"></article>
</section>
Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    ok Sorry so i looked into the code turnes out everything was fine its just i mistaken the span tags i use as title with article itself and thaught its not hiding anything i added a line of code and its fixed

    function AutoHider(){
        var Word = document.getElementsByClassName("word");
        for (let Count = 0;Count<Word.length;Count++){
         if(Word[Count].innerHTML === ""){
             Word[Count].style.display = 'none';
             document.getElementsByClassName("sm-title")[Count].style.display = "none";
             document.getElementById("console").innerHTML += Count + "<br/>";
         }
        }
}

    its the last line from below now if an article tag is empty not only it hides it it hides the span tag class named as sm-title above it too thanks for your help regarding CSS solution


  2. 0

    You can use CSS and the :empty pseudoclass to hide divs with no content.

    Although whitespace seems to be an issue:
    https://developer.mozilla.org/en-US/docs/Web/CSS/:empty

    .word{
  height:50px;
  border:1px solid #000;
  background:red;
}

.word:empty{
  display:none
}
    <div class="word"></div>
<div class="word">CONTENT</div>
<div class="word"></div>
<div class="word">MORE CONTENT</div>
    Login or Signup to reply.
  3. 0

    Best I can tell your code works as you want to. There’s likely better ways to achieve the same thing as @imvain2 has pointed out.

    However, here’s your code pretty much verbatim and it’s working.

    function AutoHider(){
   var Word = document.getElementsByClassName("word");
   for (var Count = 0;Count<Word.length;Count++){
    if(Word[Count].innerHTML === ""){
        Word[Count].style.display = 'none';
    }
   }
}

function AutoShower(){
   var Word = document.getElementsByClassName("word");
   for (var Count = 0;Count<Word.length;Count++){
    if(Word[Count].innerHTML === ""){
        Word[Count].style.display = '';
    }
   }
}
    article{
  height: 20px;
  background:red;
}
    <button onClick="AutoHider()">
Hide Empty Articles
</button>

<button onClick="AutoShower()">
Show Empty Articles
</button>

<section class="words">
    <span class="sm-title">الف</span>
    <article class="word" id="A"> </article>
    <span class="sm-title">ب</span>
    <article class="word" id="B"></article>
    <span class="sm-title">پ</span>
    <article class="word" id="P"></article>
    <span class="sm-title">ت</span>
    <article class="word" id="T"></article>
    <span class="sm-title">ث</span>
    <article class="word" id="S"></article>
    <span class="sm-title">ج</span>
    <article class="word" id="Jim"></article>
    <span class="sm-title">چ</span>
    <article class="word" id="Ch"></article>
    <span class="sm-title">ح</span>
    <article class="word" id="H"></article>
    <span class="sm-title">خ</span>
    <article class="word" id="Kh"></article>
    <span class="sm-title">د</span>
    <article class="word" id="Dal"></article>
    <span class="sm-title">ذ</span>
    <article class="word" id="Z-D"></article>
    <span class="sm-title">ر</span>
    <article class="word" id="R"></article>
    <span class="sm-title">ز</span>
    <article class="word" id="Z"></article>
    <span class="sm-title">ژ</span>
    <article class="word" id="Zh"></article>
    <span class="sm-title">س</span>
    <article class="word" id="Sin"></article>
    <span class="sm-title">ش</span>
    <article class="word" id="Shin"></article>
    <span class="sm-title">ص</span>
    <article class="word" id="Sad"></article>
    <span class="sm-title">ض</span>
    <article class="word" id="Z-M"></article>
    <span class="sm-title">ط</span>
    <article class="word" id="T-D"></article>
    <span class="sm-title">ظ</span>
    <article class="word" id="Z-Z"></article>
    <span class="sm-title">ع</span>
    <article class="word" id="Ein"></article>
    <span class="sm-title">غ</span>
    <article class="word" id="Ghein"></article>
    <span class="sm-title">ف</span>
    <article class="word" id="F"></article>
    <span class="sm-title">ق</span>
    <article class="word" id="Gh"></article>
    <span class="sm-title">ک</span>
    <article class="word" id="Kam"></article>
    <span class="sm-title">گ</span>
    <article class="word" id="G"></article>
    <span class="sm-title">ل</span>
    <article class="word" id="Lam"></article>
    <span class="sm-title">م</span>
    <article class="word" id="Mim"></article>
    <span class="sm-title">ن</span>
    <article class="word" id="Noon"></article>
    <span class="sm-title">و</span>
    <article class="word" id="Vav"></article>
    <span class="sm-title">ه</span>
    <article class="word" id="H-do-cheshm"></article>
    <span class="sm-title">ی</span>
    <article class="word" id="Ya"></article>
</section>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search