JavaScript 多个循环

javascript multiple loops

本文关键字：循环 JavaScript      更新时间：2023-09-26

我正在尝试获取HTML浏览器中显示的单词列表的总和。

如果每个单词都被分配了一个数字，即

a 为 1， b 为 2

依此类推，最多 z 是 26，那么苹果的总和应该是 50。我希望它们显示在浏览器中，如下所示：

apple  
carrot
money  
50
75
72

但我无法让循环正常工作。

<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" rev="stylesheet" href="script.css" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
   function newSquare(){
      for(var j=0; j<10; j++){
         calcAlpha(j);
      }
   }
   function newDisplay(){
      for(var k=0; k<10; k++){
         calcAlpha(k);
      }
   }
   function calcAlpha() {
      var word = document.getElementById("square + j").childNodes[0].data;
      var sum = 0;
      for(var i=word.length-1; i>=0; i--) {
         sum += (word.charCodeAt(i) - 96);
      }
      document.getElementById("display + k").innerHTML=sum
   }
</script>
</head>
<body>
   <h1>Calculate sum of words</h1>
   <table>
      <tr><td id="square1">apple</td></tr>
      <tr><td id="square2">carrot</td></tr>
      <tr><td id="square3">money</td></tr>
      <tr><td id="square4">game</td></tr>
   </table>
   <table>
      <tr><td id="display1">&nbsp;</td></tr>
      <tr><td id="display2">&nbsp;</td></tr>
      <tr><td id="display3">&nbsp;</td></tr>
      <tr><td id="display4">&nbsp;</td></tr>
   </table>
   <div id="display"></div>
   <button onclick="calcAlpha()">calculate</button>
</body>
</html>

有人可以为我解决这个问题吗？我仍然是Javascript的初学者，我不明白如何将i，j和k放在循环中。谢谢。

这是一个完整的答案：

代码有三个主要问题。首先，i、j 和 k 是具有特定整数值的var 的。 "square + j"只是一个没有所需值的字符串(即 square1、square2等(。正如迈克尔所建议的，你应该把"square"+j。

第二个问题是在您的网页中运行的唯一函数是 calcAlpha() ，您在 button 元素的 onclick 事件中调用它。在calcaAlpha()内，你从不调用newSquare()或newDisplay()，所以它们从不执行。

第三个问题是 javascript 变量的命名空间或范围。在calcAlpha()中，无法访问变量j或k，因为它们是在未封装calcAlpha()函数的外部函数中声明的。但是，您可以访问变量i因为它是在 calcAlpha() 中声明的。

问题的解决方案是删除newDisplay()和newSquare()，并将calcAlpha()更改为如下所示的内容：

function calcAlpha() {
    for (var j = 1; j <= 4; j++) {
        var word = document.getElementById("square" + j).childNodes[0].data;
        var sum = 0;
        for(var i=word.length-1; i>=0; i--) {
            sum += (word.charCodeAt(i) - 96);
        }
        document.getElementById("display" + j).innerHTML=sum
    }
}

这基本上是newSquare()和newDisplay()的组合代码，已放入calcAlpha()中并针对上述其他问题进行了修复。请注意，变量 k 是不必要的，因为您希望将squareN的数字总和放入 displayN 中，因此您可以使用单个变量 j 。

我不确定你想用这些函数做什么，但试试这个：

function run() {
// reads, calculates and prints all words
    for (var i=1; i<=4; i++) {
        var word = document.getElementById("square"+i).childNodes[0].data;
        var result = calcAlpha(word);
        document.getElementById("display"+i).childNodes[0].data = result;
    }
}
function calcAlpha(text) {
   text = text.toLowerCase();
   var sum = 0;
   for (var i=text.length-1; i>=0; i--) {
       sum += text.charCodeAt(i) - 96;
   }
   return sum;
}

并从按钮调用run函数。

我看到您立即做错的一件事是通过 id 获取元素。您将循环变量作为字符串而不是 int 包含在内。这是我的解决方案：

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
   function calcAlpha()
   {
        for(j =1; j<=4; j++)
        {
            var word = document.getElementById("square" + j).innerHTML;
            var sum = 0;
            for(var i=word.length-1; i>=0; i--) 
            {
                sum += (word.charCodeAt(i) - 96);
            }
            document.getElementById("display" + j).innerHTML=sum
        }
   }
</script>
</head>
<body>
   <h1>Calculate sum of words</h1>
   <table>
      <tr><td id="square1">apple</td></tr>
      <tr><td id="square2">carrot</td></tr>
      <tr><td id="square3">money</td></tr>
      <tr><td id="square4">game</td></tr>
   </table>
   <table>
      <tr><td id="display1">&nbsp;</td></tr>
      <tr><td id="display2">&nbsp;</td></tr>
      <tr><td id="display3">&nbsp;</td></tr>
      <tr><td id="display4">&nbsp;</td></tr>
   </table>
   <div id="display"></div>
   <button onclick="calcAlpha()">calculate</button>
</body>
</html>

第一个问题，就像迈克尔说的，是这样的：

document.getElementById("square + j")
// and
document.getElementById("display + k")

这将查找其id与"square + j"或"display + k"完全匹配的元素。要将变量的值连接到字符串，请使用 "square" + j 和 "display" + k 。

第二个问题是在calcAlpha的上下文中，变量j和k是未定义的。您可以通过使它们可供calcAlpha访问(通过在function calcAlpha范围之外定义它们(或通过传递j(或k(作为参数来解决此问题。你已经在做第一部分了(实际上是传递它(。您现在需要的只是在 calcAlpha 声明中使用它，如下所示：

function calcAlpha(index) {
  var word = document.getElementById("square" + index).childNodes[0].data;
  // [...]
}

变量index现在将包含您传递的j或k的值。

另一件事：您从其他函数和<button>的点击中调用calcAlpha。这可能不是你想要做的。看看Bergi的答案，他/她的解决方案应该可以解决你的问题。

相关文章：