javascript - 如何在单击按钮时将首字母设置为大写

Question

当我点击按钮并且它出现在网页上时，我想做第一个字母 toUpperCase();但我不知道如何正确。我是这样做的:

function toUpper() {
            arr.charAt(0).toUpperCase() + arr.slice(1);
 }

但这似乎不正确，请解释如何正确地做？

    <input type="text" id="inp">
    <button class="btn">Push to array</button>
    <button class="delete">Delete</button>
    <br><br>
    <div id="list"></div>

<script>

var inp = document.getElementById("inp");
var btn = document.querySelector(".btn");
var list = document.querySelector('#list');
var del = document.querySelector(".delete");
var arr = [];

btn.addEventListener('click', function() {
  var valInp = inp.value; 
  if (valInp === '') { return; }
  arr.push(valInp);
  inp.value = "";
  list.innerHTML = arr.join("<br>").trim();

    function toUpper() {
        arr.charAt(0).toUpperCase() + arr.slice(1);
    }
});

 del.addEventListener('click', function(){
    arr.pop();
    list.innerHTML = arr.join("<br>").trim();   
});

</script>

Answer 1

1. 你需要在某处调用那个toUpper，目前你只是在那个点击事件处理程序中定义它。最好从该事件处理程序中定义它，因为它可以一次又一次地重复使用。

2. 您应该期望 toUpper 函数接受一个 string(因为它应该对 string 做一些事情，但不是arr 是一个数组)，然后返回一个将第一个字符转换为大写的新字符串。

3. 将转换后的字符串推送到该数组，完成。

var inp = document.getElementById("inp");
var btn = document.querySelector(".btn");
var list = document.querySelector('#list');
var del = document.querySelector(".delete");
var arr = [];

// Move the function out, as it can be reused.
// Input is a string, and you need to return the result of the toUppered string.
function toUpper(str) {
    return str.charAt(0).toUpperCase() + str.slice(1);
}

btn.addEventListener('click', function() {
  var valInp = inp.value; 
  if (valInp === '') { return; }
  
  // Push the toUppered string into array.
  arr.push(toUpper(valInp));
  inp.value = "";
  list.innerHTML = arr.join("<br>").trim();
});

 del.addEventListener('click', function(){
    arr.pop();
    list.innerHTML = arr.join("<br>").trim();   
});

<input type="text" id="inp">
    <button class="btn">Push to array</button>
    <button class="delete">Delete</button>
    <br><br>
    <div id="list"></div>