配列内の各種類のJavascriptカウント数

外部のライブラリの配列に格納されている配列flowersの各タイプの花を数えようとしています。 "バラ"、 "マリゴールド"、 "チューリップ"という3つの花があります。私はボタンをクリックするとhtmlページを持って、各花の数が格納された配列にあるかどうかを教えてくれます。しかし、私のプログラムは、実行時にカウントを与えません。コードは私にとっては正しいので、何が間違っているのか全く分かりません。配列内の各種類のJavascriptカウント数

document.getElementById('go').onclick = function() { 

roseCount = 0; 

marigoldCount = 0; 

tulipCount = 0; 

lengthArray = flowers.length; 

for (f = 0; f < lengthArray; f++) { 

    if (flowers[f] == 'rose') { 

     roseCount ++; 

    }; 

    if (flowers[f] == 'marigold') { 

     marigoldCount ++; 

    }; 

    if (flowers[f] == 'tulip') { 

     tulipCount ++; 

    }; 

    document.getElementById('tulip').value = tulipCount; 

    document.getElementById('rose').value = roseCount; 

    document.getElementById('marigold').value = marigoldCount; 

    }; 

};

HTML

<body> 

    <button id = 'go' class = ''>COMPUTE</button> 
    <input id = 'number' name = '' value = '' class = ''> 
    <input id = 'sum' name = '' value = '' class = ''> 
    <input id = 'average' name = '' value = '' class = ''> 
    <script src = 'http://gobongo.net/information/24065/script/javascript array 02 data.js'></script> 
    <script src = 'js/javascript 11.js'></script> 
</body>

出典

2017-10-20 Astonishing

それはflowers'はどこから来る '全く明確ではありません。 – Pointy

@Pointy flowersは既に外部ライブラリに作成されています。それには3つの花が納められています。私は花だけを使用することになっています – Astonishing

あなたは配列の構造を表示せず、期待される結果のサンプルを提供するとき、どうすれば助けになるでしょうか？ [mcve] – charlietfl

OK]をクリックしてHTMLとJSを使用して、分析し、間違っているものを見ることができるように一緒に意味がありませんので、私は機能が働いてしまいました。

問題：

使用varだけではなく、そのように変数を定義する、それがグローバル変数になるだろうされていない場合。

var roseCount = 0; 
var marigoldCount = 0; 
var tulipCount = 0; 
var flowers = ['rose', 'marigold', 'tulip']; 
var lengthArray = flowers.length;

flowers配列であっても定義されていませんでした。私はこれをしました。
```
var flowers = ['rose', 'marigold', 'tulip']; 
```
ボタンは、我々が計算する必要が押されたとき私はcalculate()と呼ばれ、HTMLボタンがクリックされたときに関数が呼び出され
```
<button id = 'go' class = '' onclick='calculate()'>COMPUTE</button> 
```
でそれを呼び出す機能のロジックを包ん！

JSを使用してtulip rose and marigoldを検索していますが、これらのHTML要素が見つからないため、以下の行を追加しました。

<input id = 'tulip' name = 'tulip' value = '' class = ''> 
<input id = 'rose' name = 'rose' value = '' class = ''> 
<input id = 'marigold' name = 'marigold' value = '' class = ''>

以下のスニペットを参照し、問題が解決されたなら、私に知らせて、ありがとう！

また、外部のjsファイルに名前にスペースが含まれている場合は、それらを削除してください。

function calculate() { 
 
    var roseCount = 0; 
 

 
    var marigoldCount = 0; 
 

 
    var tulipCount = 0; 
 
    var flowers = ['rose', 'marigold', 'tulip']; 
 
    var lengthArray = flowers.length; 
 

 
    for (f = 0; f < lengthArray; f++) { 
 

 
    if (flowers[f] == 'rose') { 
 

 
     roseCount++; 
 

 
    }; 
 

 
    if (flowers[f] == 'marigold') { 
 

 
     marigoldCount++; 
 

 
    }; 
 

 
    if (flowers[f] == 'tulip') { 
 

 
     tulipCount++; 
 

 
    }; 
 

 
    document.getElementById('tulip').value = tulipCount; 
 

 
    document.getElementById('rose').value = roseCount; 
 

 
    document.getElementById('marigold').value = marigoldCount; 
 

 
    }; 
 
}

<body> 
 

 
    <button id='go' class='' onclick='calculate()'>COMPUTE</button> 
 
    <input id='tulip' name='tulip' value='' class=''> 
 
    <input id='rose' name='rose' value='' class=''> 
 
    <input id='marigold' name='marigold' value='' class=''> 
 
    <script src='http://gobongo.net/information/24065/script/javascript array 02 data.js'></script> 
 
    <script src='js/javascript 11.js'></script> 
 
</body>

出典

2017-10-20 21:22:41

@配列を作成できません。配列はすでに作成されています – Astonishing

@Alingishing 'テストデータ'を見つけることができますか？..今、本当に巧妙なビットです。もし彼のプログラムが 'テストデータ 'で動作するなら、実際のデータ..？プログラミングの世界へようこそ。 – Keith

@Astonishingあなたの問題を解決できましたか？問題は、配列が存在する別のjsfileになければなりません...上記のスニペットに示されているように配列が適切に定義されていることを確認してください。またスペースを入れずに名前を付けるようにしてください...おそらくソースjsファイルis is ' HTMLファイルに含まれています –

あなたは、ドキュメントの読み込みが完了する前に要素にonclickハンドラをアタッチしようとしています。そのために、あなたのコードを置き換える：

// ignore this line, you already have a flowers array 
 
var flowers = ['rose','rose','rose','marigold','marigold','marigold','tulip','tulip']; 
 

 
// wait for the DOM to load 
 
window.onload = function() { 
 

 
    // attach your event handler now the DOM is ready!  
 
    document.getElementById('go').addEventListener('click', function() { 
 

 
     var roseCount = 0; 
 
     var marigoldCount = 0; 
 
     var tulipCount = 0; 
 

 
     // calculate number of items 
 
     for (var i=0, l=flowers.length; i<l; i++) { 
 
      if (flowers[i] === 'rose') roseCount++; 
 
      if (flowers[i] === 'marigold') marigoldCount++; 
 
      if (flowers[i] === 'tulip') tulipCount++; 
 
     } 
 

 
     // update your inputs outside of the loop! 
 
     document.getElementById('tulip').value = tulipCount; 
 
     document.getElementById('rose').value = roseCount; 
 
     document.getElementById('marigold').value = marigoldCount; 
 
    }); 
 
}

<!-- clean up your HTML... just to satisfy my OCD :) --> 
 
<body> 
 
    <button id="go">COMPUTE</button> 
 
    <input id="tulip" name="tulip" value=""> 
 
    <input id="rose" name="rose" value=""> 
 
    <input id="marigold" name="marigold" value=""> 
 
    <script src="http://gobongo.net/information/24065/script/javascript array 02 data.js"></script> 
 
    <script src="js/javascript 11.js"></script> 
 
</body>

出典

2017-10-20 22:05:56

配列内の各種類のJavascriptカウント数

答えて

関連する問題