javascript - javascriptの複数のループ

Question

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をループに入れる方法を理解していません。ありがとう。

score 2 · Accepted Answer

完全な答えは次のとおりです。

コードには主に 3 つの問題があります。まず、i、j、および k はvar、この例では特定の整数値を持つです。は、目的の値 ( 、など)"square + j"を持たない単なる文字列です。Michael が提案したように、"square" + j を入力する必要があります。square1square2

2 つ目の問題は、Web ページで実行する唯一の関数がであり、要素のイベントでcalcAlpha()呼び出すことです。内部ではorを呼び出すことはないため、実行されることはありません。onclickbuttoncalcaAlpha()newSquare()newDisplay()

3 番目の問題は、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()、変数は不要であることに注意してください。したがって、単一の変数を使用できます。ksquareNdisplayNj

score 1 · Accepted Answer

これらの関数で何をしたいのかわかりませんが、これを試してください：

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、ボタンから関数を呼び出します。

score 0 · Accepted Answer

あなたがすぐに間違ったことをしたと私が見たのは、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>

score 0 · Accepted Answer

マイケルが言ったように、最初の問題はこれです：

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

これは、 orとid完全に一致する要素を探します。変数の値を文字列に連結するには、とを使用します。"square + j""display + k""square" + j"display" + k

2 番目の問題は、のコンテキストでcalcAlphaは、変数jとkが定義されていないことです。これは、アクセス可能にするcalcAlpha( のスコープ外で定義する) か、 (または) をパラメーターとしてfunction calcAlpha渡すことで修正できます。あなたはすでにその最初の部分を行っています（実際にそれを伝えています）。必要なのは、次のようにの宣言で使用することだけです。jkcalcAlpha

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

変数には、渡されたorindexの値が含まれます。jk

もう 1 つ: 他の関数との onclick のcalcAlpha両方から呼び出しています。<button>それはおそらくあなたがやりたいことではありません。Bergi's answerを見てください。彼/彼女のソリューションで問題が解決するはずです。

javascript - javascriptの複数のループ

4 に答える 4

Related

Reference