Question

我制作了一个为字母A-Z = 1-26赋值并将其求和的应用程序。如何从输入字段中获取每个字母的值？例如，如果我键入“ bb”，它将在范围内输出id为“ a”的b（2）+ b（2）= 4

https://codepen.io/anon/pen/pOvNXd

function myFunction() {
  //code
var alp = {a:1, b:2, c:3, d:4, e:5, f:6, g:7, h:8, i:9, j:10, k:11, l:12, m:13, n:14, o:15, p:16, q:17, r:18, s:19, t:20, u:21, v:22, w:23, x:24, y:25, z:26, ' ':0, '"':0, "'":0, '!': 0, '#':0, '$':0, '%':0, '(':0, ')':0, '+':0, '-':0, '*':0, '/':0, '=':0, '_':0, '@':0, '?':0, '&':0, '.':0, ',':0, ':':0, ';':0}

//starting value
var str = document.getElementById("txt").value;
var n = str.length;
var total = 0;
  
//counter
for (var i = 0; i < str.length; i++)
  total += alp[str[i]]

//output
document.getElementById("res").innerHTML = total;
document.getElementById("a").innerHTML = n;
}

<html>
<head>
  <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">
</head>

<body>
  <div id="wrapper">
    <center>
      <h1>Task</h1><br>
      <input type="text" name="fname" id="txt" style="width: 500px; font-size: 125%" size="60px" value="" placeholder="Type something..." oninput="myFunction()">
      <br><br>
      <p style="color: RGB(0,186,0)">Sum</p>
      <span id="res" style="color: RGB(0,186,0)">0</span>
      <br>
      <p id="a">0</p>
    </center>
  </div>
</body>
</html>

Answer 1

这是我的代码，所以我做了一些更改。

正如@Barmar所提到的，您错过了for循环中的i++，这使它无限。
在您从输入中接收到文本后，我添加了.split('')，这将其转换为数组，以后将在您的代码str[i]中使用。

编辑：

搜索StackOverflow之后，我发现了this answer：

您还可以使用普通数组访问每个字符及其索引句法。但是请注意，字符串是不可变的，这意味着您无法使用此方法设置字符的值，并且 IE7不支持（如果那对您仍然很重要）。

因此，即使您的代码可以直接使用str[i]，我还是希望将其更改为数组，以防日后需要将其用作数组（编辑或类似的东西）上。

function myFunction() {
  //code
  var alp = {a:1, b:2, c:3, d:4, e:5, f:6, g:7, h:8, i:9, j:10, k:11, l:12, m:13, n:14, o:15, p:16, q:17, r:18, s:19, t:20, u:21, v:22, w:23, x:24, y:25, z:26, ' ':0, '"':0, "'":0, '!': 0, '#':0, '$':0, '%':0, '(':0, ')':0, '+':0, '-':0, '*':0, '/':0, '=':0, '_':0, '@':0, '?':0, '&':0, '.':0, ',':0, ':':0, ';':0};

  //starting value
  var str = document.getElementById("txt").value.split('');
  var n = str.length;
  var total = 0;
  var result = "";

  //counter
  for (var i = 0; i < str.length; i++) {
    total += alp[str[i]];
    result += str[i] + "(" + alp[str[i]] + ") + ";
  }
  result = result.substr(0, result.length - 2) + " = " + total;
  //output
  document.getElementById("res").innerHTML = result;
  document.getElementById("a").innerHTML = "Total: " + total;
}

body {
  margin: 0px;
  padding: 0px;
  background-color: white;
  color: black;
}

body,
input {
  font-family: 'Roboto Condensed', sans-serif;
}

header input::-webkit-input-placeholder {
  color: rgba(255, 255, 255, 0.8)
}

#txt {
  color: rgba(0, 0, 0, 0.8);
  border-radius: 1%;
  transition: all 200ms ease-out;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
}

#txt:hover {
  box-shadow: 0 0 6px rgba(35, 173, 278, 1);
}

#txt:focus {
  box-shadow: 0 0 6px rgba(35, 173, 278, 1);
}

#wrapper {
  margin: 0px padding: 0px;
}

<html>

<head>
  <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">
</head>

<body>
  <div id="wrapper">
    <center>
      <h1>Task</h1><br>
      <input type="text" name="fname" id="txt" style="width: 500px; font-size: 125%" size="60px" value="" placeholder="Type something..." oninput="myFunction()">
      <br><br>
      <p style="color: RGB(0,186,0)">Sum</p>
      <span id="res" style="color: RGB(0,186,0)">0</span>
      <br>
      <p id="a">0</p>
    </center>
  </div>
</body>

</html>

Answer 2

从您的最后一条评论中，我相信您可能想要类似的东西：

s.count...

max

您可以使用已经具有的逻辑来计算总数，我只是不喜欢大对象。不过请注意，这会解析（a-z）之外的其他值。

Answer 3

为什么不为此使用ASCII值。您可以从所有大写字母的ASCII值中减去64，并将ASCII值超出65-90的任何字符分配为0。

要获取ascii值，请使用“ A” .charCodeAt（0），它将返回65。

Answer 4

因此，要建立所需的输出，可以使用字符串连接：

将字符串拆分为多个字符
遍历数组中的每个元素，并使用map方法将其修改为所需的表达式。
使用+

将结果连接起来并输出到dom

var expression = str.split('')
    .map(function (currentLetter) {
        return currentLetter + '(' + alp[currentLetter] + ')';
    })
    .join(' + ');

var expressionAndResult = expression + '=' + total;

从输入JS获取每个字母的值

4 个答案:

编辑：