2

I am trying to get the sum of a list of words displayed in an HTML browser.

If each word is assigned a number i.e

a is 1, b is 2

and so on upto z is 26, then the sum of apple should be 50. I want them to be displayed in browser like below:

apple  
carrot
money  

50
75
72

but I am not able to get the loop to work correctly.

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

Can someone can sort this for me? I am still a beginner at Javascript, and I dont understand how to put i,j, and k in loops. Thanks.

4

4 回答 4

2

这是一个完整的答案：

代码存在三个主要问题。首先，在此示例中，i、j 和 k 是var具有特定整数值的 。"square + j"只是一个没有所需值的字符串（即square1，square2等）。正如迈克尔建议的那样，您应该输入“square”+ j。

第二个问题是在您的网页中运行的唯一函数是calcAlpha()，您在元素onclick事件中调用它。button在calcaAlpha()你内部永远不会调用newSquare()or 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。

于 2012-08-02T18:01:31.617 回答
1

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

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并从按钮调用函数。

于 2012-08-02T17:58:39.153 回答
0

第一个问题，正如迈克尔所说，是这样的：

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

这将寻找与orid完全匹配的元素。要将变量的值连接到字符串，请使用and 。"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现在将包含您传递的jor的值。k

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

于 2012-08-02T17:59:04.210 回答
0

我看到您立即做错的一件事是通过 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>
于 2012-08-02T17:57:17.063 回答