javascript - 当我尝试获取值时，文本转换不起作用

<分区>

我有一个带有“text-transform: capitalize;”的文本框它工作正常，但当我试图获得它的值(value)时，它并没有被改变。例如，我写了“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);
    }
}

最佳答案

您可以在第一个字符上使用 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>

关于javascript - 当我尝试获取值时，文本转换不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47022881/

上一篇：html - CSS3 渐变和居中的 div 响应式

下一篇：css - Bootstrap 布局移位器模式

相关文章：

javascript - 函数参数可以隐藏全局变量吗

javascript - 单击目标 div 以外的其他位置时取消功能

jquery - ":first-of-type"有效，":last-of-type"无效

javascript - jsPDF - Firefox 中的兼容性问题

javascript - 使用javascript将用户添加到列表

html - CSS 不适用于类，但适用于 body 元素

jquery - 响应式网页上的下拉菜单不起作用

css - 如何将 gif 转换为阴影？

javascript - SlideToggle jQuery 速度

javascript - 在 sweetalert onOpen 函数中使用路由器推送 - Vue2