How can I make this JS function shorter?-CodePudding

I'm currently using this script to hide elements by their ID numbers:

function items() {

var div = document.getElementById('QTDItems');
var itensQtd = div.textContent;

if (itensQtd == 1) {
    for(var i=2; i<=20; i  ){
        var element = document.getElementById("item" i);
            element.style.display = 'none';
    }
} 

else if (itensQtd == 2) {
    for(var i=3; i<=20; i  ){
        var element = document.getElementById("item" i);
            element.style.display = 'none';
    }
} 
// And so on until the else if (itensQtd == 18)

I'm using the itensQtd = div.textContent because I'm scaping a PHP variable to the html like this:

<div id="QTDItems" style="display: block;">
    <?php echo block_field('exame-qtd'); ?>
</div>

But for every one of the 20 divs I have to create an IF that selects which ID numbers will be hidden. I'm not that good with JavaScript yet, so I don't know how to make it shorter and smarter. Can someone help?

CodePudding user response：

Try something like this:

function HideItems(itensQtd){
    for(var i=itensQtd 1; i<=20; i  ){
        var element = document.getElementById("item" i);
            element.style.display = 'none';
    }
}

or you can use the arrow function:

HideItems = (itensQtd) => {
    for(var i=itensQtd 1; i<=20; i  ){
        var element = document.getElementById("item" i);
            element.style.display = 'none';
    }
}

Note: it is best to replace the number in the condition "i<=20" with the total number of divs found.

Then you call it like this. No need to call if conditional:

var div = document.getElementById('QTDItems');
var itensQtd = div.textContent;
HideItems(itensQtd);

CodePudding user response：

Alright, there's a lot of things wrong here. You should definitely check out a JavaScript tutorial on Youtube or on other resources like W3Schools. First off, you should use let/const instead of var. So whenever you want to create a variable, you use let, like this:

let itensQtd = div.textContent;

or this:

for(let i = 0; i < n; i  )

You also need to properly parse the text content and make sure it's a number.

const goalID = parseInt(div.textContent);

When it comes to your question, you can create a loop that iterates on each of the elements and sets them to none unless it's the element you want to display.

for(let i = 1; i <= 20; i  ) {
   const element = document.getElementById(`item ${i}`);
   if(i === goalID) element.style.display = 'block'; // not sure how you want to display the one that you don't want to hide.
   else element.style.display = 'none';
}

Overall, this will fix the problem stated, but you should definitely try to do a modern JavaScript tutorial to learn the basics. Not sure what your bigger project is, but there is definitely a problem if you need to find which element to hide/display by parsing the text content of another element.