Text-transform Doesn't Work When I Try To Get The Value

I have a textbox with 'text-transform: capitalize;' and it works fine, but when I try to get it's value it's not transformed. For example I write in 'test' and it shows 'Test' in t

Solution 1:

You could use string.toUpperCase() on the first char.

functionquery() {
  var x = document.querySelectorAll(".query-p");
  var y = document.getElementById("search");
  var i;
  for(i = 0; i < x.length; i++) {
    if(x[i].innerHTML.includes(y.value)) {
      x[i].style.display = 'block';
    } else {
      x[i].style.display = 'none';
    }
    var text = x[i].innerHTMLconsole.log(text[0].toUpperCase() + text.slice(1));
  }
}

<inputtype="text"id="search"/><buttontype="submit"onclick="query()">Submit</button><divclass="query-div"><pclass="query-p">Test-a</p></div><divclass="query-div"><pclass="query-p">Test-b</p></div><divclass="query-div"><pclass="query-p">Test-ba</p></div>