当我尝试获取值时，文本转换不起作用[重复]

Question

我有一个带有“文本转换：大写；”的文本框它工作正常，但是当我试图获得它的价值时，它并没有改变。例如，我在“test”中写入，它在文本框中显示“Test”，但是当我执行“console.log(”document.getElementById(“search”).value“)”时，它显示“test”。
我该如何解决这个问题？

这是我的代码：

HTML：

<input type="text" id="search"/>
<button type="submit" onclick="query()">Submit</button>
<div class="query-div"><p class="query-p">Test-a</p></div>
<div class="query-div"><p class="query-p">Test-b</p></div>
<div class="query-div"><p class="query-p">Test-ba</p></div>

Javascript：

function query() {
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';}
             console.log(x[i].innerHTML);
    }
}

Answer 1

您可以在第一个字符上使用 string.toUpperCase()。

function query() {
  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].innerHTML
    console.log(text[0].toUpperCase() + text.slice(1));
  }
}

<input type="text" id="search"/>
<button type="submit" onclick="query()">Submit</button>
<div class="query-div"><p class="query-p">Test-a</p></div>
<div class="query-div"><p class="query-p">Test-b</p></div>
<div class="query-div"><p class="query-p">Test-ba</p></div>