getElementsByClassName is not working in if condition

Question

I'm Trying to get all the classnames with "items" and checking if innerHTML of each className by for loop and with given string. But even though the condition is true, nothing is happening in if condition.

I've implemented with the javascript and everything is working except the getElementsByClassName is not working

function clearAndAdd(){
    var texter = document.getElementById("textBox").value;
    if (texter != ""){
        var allList = [];
        document.getElementById("textBox").value = "";
        created = 'deleteCurrent("'+texter+'")';
        document.getElementById("lister").innerHTML = document.getElementById("lister").innerHTML+"<li class='items' onclick='"+created+"'>"+texter+"<span></span></li>";
        document.getElementById("textBox").focus();
    }
}
function deleteCurrent(text){
    var allList = [];
    var list = document.getElementsByClassName("items");
    for(var i=0; i<list.length; i++){
        var value = list[i].innerHTML;
        if (value == text){
            document.getElementById("output").innerHTML = value;
            break;
        }
    }
}

<!-- HTML code -->
<body>
<div class="input-categories">
<ul id="lister">
</ul>
<input type="text" id="textBox" onblur="clearAndAdd();" />
</div>
<div id="output">
</div>
</body>

When I'm running the code with passing the string in text... even the value and the text are same, if condition is not executed. Can anyone help me with this

Side note: use === instead of == to make sure that type also been took in account. (Not critical in this case) — maximelian1986, Feb 11 '19 at 10:20
What do you think is wrong with `getElementsByClassName` in your code? Just saying "is not working", is not very helpful. It works fine [here](https://jsfiddle.net/xsvc43jm/) — trincot, Feb 11 '19 at 10:22
"except the getElementsByClassName is not working" — [Not working](http://idownvotedbecau.se/itsnotworking/) isn't a helpful description of the problem. In what way is it not working? Does it return a list of 0 length? You don't have any code in the question to log the length. Does it actually work, but the problkem is elsewhere? You have no logging inside the loop to see what `innerHTML`, `value, or `text` are. — Quentin, Feb 11 '19 at 10:23
`vartexter`: what is that? Where are your elements with class `items`? — trincot, Feb 11 '19 at 10:29
@trincot Those class names are added dynamically in clearAndAdd function — Sunil Kumar Nerella, Feb 11 '19 at 10:30
@SunilKumarNerella — clearAndAdd throws an error because texter isn't defined. So we can never call deleteCurrent , which is what you say doesn't work. You need to provide a [mcve]. — Quentin, Feb 11 '19 at 10:32
Your `list[i].innerHTML` contains a `` tag, so obviously it will never match the text you look for. — trincot, Feb 11 '19 at 10:35
Okay @trincot, then how can I achieve to get only the text from that element? — Sunil Kumar Nerella, Feb 11 '19 at 10:36

score 1 · Accepted Answer · answered Feb 11 '19 at 10:37

1

The content returned by list[i].innerHTML contains a <span> tag, so obviously it will never match the text you look for.

Instead of innerHTML use the textContent property: that will just return the text content:

var value = list[i].textContent;

answered Feb 11 '19 at 10:37

trincot

211,288
25
175
211

getElementsByClassName is not working in if condition

1 Answers1