更新

Question

不确定我的代码有什么问题。我想从输入字段中大写每个单词并在“showcase”中显示它。

以下是我的代码：

兑换

<script>
function convert(sst) {
    return sst.charAt(0).toUpperCase() + sst.slice(1);
    document.getElementById("showcase").innerHTML = n;
}
</script>

Answer 1

您在document.getElementById("showcase").innerHTML = n;
您没有声明变量n。

请查看以下修补程序的代码段：

function convert(sst) {
    return sst.charAt(0).toUpperCase() + sst.slice(1);        
}

// To reuse your function 'convert', just return the converted value.
document.getElementById("showcase").innerHTML = convert("ele");

<p id="showcase">
</p>

看到？现在它正在运用你的逻辑。

重要提示：您的方法仅适用于一个字： - ）

更新

这是大写所有单词的方法

document.getElementById('myButton').addEventListener('click', function() {
  document.getElementById("showcase").innerHTML = convert(document.getElementById('inputfield').value);
});

function convert(str) {
  return str.replace(/\w\S*/g, function(txt) {
    return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase()
  });
}

<body> <input type="text" id="inputfield" /> <button id='myButton'>Convert</button>
  <div id="showcase"></div>
</body>

Answer 2

最好从convert函数返回一个值，以便重新使用该函数：

<script>
    function convert(sst) {
        return sst.charAt(0).toUpperCase() + sst.slice(1);
    }
    var n = convert('hello');
    document.getElementById("showcase").innerHTML = n;
    var m = convert('world');
    document.getElementById("otherElement").innerHTML = m;
</script>

Answer 3

与其他答案不同，这会将每个单词大写 另一个不同的是，它将小写后面的其他字母（如本例中的sTRING）与其他类似，这也会从函数中返回一个值，因此您可以重新使用该函数，这也称为纯函数只做一件事。

function capitalizeWords(str) {
  return str.replace(/\w\S*/g, function (txt){
    return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
  });
}

var str = capitalizeWords('js sTRING exercises');
document.getElementById("showcase").innerText = str;

<p id="showcase"></p>

另请注意，为了更好的安全性，我从innerHTML切换到innerText。如果使用innerHTML

，任何危险的HTML代码都可以潜入

为什么我的大写功能没有按预期运行？

3 个答案:

更新