JavaScript:从HTML输入字段中获取字符串，通过首字母缩略词生成代码进行处理

JavaScript: Taking string from HTML input field to process through an acronym-generating code

本文关键字：缩略词 处理 代码 输入 HTML 字段 字符串 获取 JavaScript      更新时间：2023-09-26

我需要创建一个脚本，其中从HTML输入字段中获取的字符串然后通过缩略词生成代码进行处理。我有:

在HTML文件:

     <h1>Acronym Creator</h1>
     <p>
        <input type="text" id="phrase" />
        <input type="button" id="clicker" value="Click me!" />
    </p>
    <p id="result"></p>
<script src="20.js"></script>

JavaScript文件:

var words = document.getElementById("phrase").value.split(" ");
var acronym = "";
for (var i = 0; i < words.length; i += 1) {
    acronym += words[i].charAt(0).toUpperCase();
}
var report = function() {
    document.getElementById("result").innerHTML = acronym;
};
$('#clicker').click(function(){
    var myVar = $('#phrase').val();
alert(myVar);
});

我如何让我的脚本功能?我做错了什么?

您需要在单击处理程序

中运行缩略词生成代码

$('#clicker').click(function() {
  var myVar = $('#phrase').val();
  var words = myVar.split(" ");
  var acronym = words.map(function(word) {
    return word.charAt(0).toUpperCase();
  }).join('');
  $("#result").html(acronym);
  console.log(myVar);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Acronym Creator</h1>
<p>
  <input type="text" id="phrase" />
  <input type="button" id="clicker" value="Click me!" />
</p>
<p id="result"></p>

相关文章：