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

【问题标题】：Get value of each letter from input JS从输入JS中获取每个字母的值
【发布时间】：2018-08-21 17:18:42
【问题描述】：

我制作了一个应用程序，它为字母 A-Z = 1-26 赋值并将它们相加。如何从输入字段中获取每个字母的值？例如，如果我输入“bb”，它将在跨度中输出 b(2)+b(2) = 4，id 为“a”

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>

【问题讨论】：

请在问题中添加相关部分。 minimal reproducible example
你在for循环中缺少i++，所以你有一个无限循环。
不清楚你在问什么，你想得到什么价值？您还参考了一些span，如果是，请提供必要的标记。
我希望当我在输入字段中输入一个单词来获取每个字母的值并输出第二个跨度中的值，id 为 'a' 例如，如果我输入 bb，它将输出 'b (2)+b(2)' = 4 在 id 为 'a' 的跨度中 n var 只是一个测试
我认为您应该使用提供的解释更新问题，因为目前它很混乱。另一个技巧是摆脱id="a"，而是将其称为id="expression-and-result" 或类似名称，代码在这方面将立即变得不言自明。你会忘记一个月或更早的 a 是什么。

标签： javascript

【解决方案1】：

根据您的最后评论，我相信您可能想要类似的东西：

const cap = (n, min, max) => Math.max(min, Math.min(n, max));
const getNumValue = char => cap(char.charCodeAt(0) - 96, 1, 26);

function myFunction() {
  const str = document.getElementById("txt").value;
  const total = str.split('').map(getNumValue).reduce((a, b) => a + b, 0)
  const n = str.split('').map(v => `${v}(${getNumValue(v)})`).join(' + ');

  document.getElementById("res").innerHTML = total; 
  document.getElementById("a").innerHTML = n;
}

<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>

你可以使用你已经拥有的逻辑来计算你的总数，我只是不喜欢这个大对象。不过要小心，这会将 (a-z) 之外的值解析为不同的值。

【讨论】：

【解决方案2】：

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

要获取 ascii 值，请使用 "A".charCodeAt(0)，它将返回 65。

【讨论】：

我相信这更适合作为评论而不是 anwser。
另外，从 JavaScript 使用的 UTF-16 单元代码 (charCodeAt) 到 ASCII 需要大量解释。

【解决方案3】：

所以要建立你想要的输出，你可以使用字符串连接：

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

与结果连接并输出到dom

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

var expressionAndResult = expression + '=' + total;

【讨论】：

【解决方案4】：

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

正如@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>

【讨论】：

这不会回答 OP 的问题，因为所需的行为是在 <p id="a">0</p> 中输出表达式。
@Olga 哎呀，很抱歉我错过了那部分。所以他问他想要像a(1) + b(2) = 3 这样的输出吗？作为我的更新答案？
我想是的，是的。