JavaScriptでは、表示パラメータの割り当てを要素パラメータを取る2つの関数に抽出するにはどうすればよいですか？

私はJavascriptコードを複数の関数にリファクタリングするよう依頼されています（各関数は1つのことを行います）、私は何をすべきかに固執しています。表示割り当て操作を2つの別々の関数にする必要があり、すべての値を引数/パラメータとして関数に渡す必要があります。したがって、グローバル変数はありません。私はどこから始めたらいいかわからないが、これは簡単だと思うが、私はここで頭を抱えている。ここでJavaScriptでは、表示パラメータの割り当てを要素パラメータを取る2つの関数に抽出するにはどうすればよいですか？

はHTMLである：ここでは

<body onload="changeChooser()"> 
    <h1>Monster Mash</h1> 
    <p>Pick your favorite monster from the dropdown!</p> 
    <select id="monsterChooser" onchange="changeChooser();"> 
     <option value="monsterContent">Monsters</option> 
     <option value="frankContent">Frankenstein</option> 
     <option value="draculaContent">Dracula</option> 
     <option value="wolfmanContent">Wolfman</option> 
     <option value="mummyContent">Mummy</option> 
     <option value="piggyContent">I hate monsters</option> 
     </select> 
    <div id="monsterContent"> 
     <h2>Monster Madness</h2> 
     <img src="images/monsters.jpg"> 
    </div> 
    <div id="frankContent"> 
     <h2>Frankenstein</h2> 
     <img src="images/frankenstein.jpg"> 
    </div> 
    <div id="draculaContent"> 
     <h2>Dracula</h2> 
     <img src="images/dracula.jpg"> 
    </div> 
    <div id="wolfmanContent"> 
     <h2>Wolfman</h2> 
     <img src="images/wolfman.jpg"> 
    </div> 
    <div id="mummyContent"> 
     <h2>Mummy</h2> 
     <img src="images/mummy.jpg"> 
    </div> 
    <div id="piggyContent"> 
     <h2>FINE!</h2> 
     <p>Here is a little piggy eating ice cream!</p> 
     <img src="images/piggy.jpg"> 
    </div> 
</body> 

</html>

は、リファクタリングを開始するには良い場所が同じ/同様の参照を使用して、または実行されるコードの一部を見ることですJavascriptを

<script> 
    function changeChooser() { 
     console.log("gotChange"); 
     var chooser = document.getElementById("monsterChooser"); 
     var options = chooser.options; 
     var counter = 0; 

     while (counter < options.length) { 
      if (options[counter].selected) { 
       document.getElementById(options[counter].value).style.display = ""; 
      } else { 
       document.getElementById(options[counter].value).style.display = "none"; 
      } 
      counter = counter + 1; 
     } 

    } 
</script>

出典

2017-10-28 Betsy Nunnally

です類似の仕事。私はこれらの改善になるだろう（ただし、いくつかの良い代替ソリューションがあります）

<script> 
    function changeChooser() { 
    var chooser = document.getElementById("monsterChooser"); 

    for (var i = 0; i < chooser.options.length; i++) { 
     var id = chooser.options[counter].value; 

     if (chooser.options[i].selected) { 
     changeDisplayById(id, ''); 
     } else { 
     changeDisplayById(id, 'none'); 
     } 
    } 

    } 

    function changeDisplayById(id, display) { 
    document.getElementById(id).style.display = display; 
    } 
</script>

出典

2017-10-28 23:14:04 hackerrdave

：私は別の関数にdisplayプロパティを変更する2行を抽出します

から利益を得るstrictモードを使用します言語の改善とより厳格なチェック
addEventListenerのコードでのハンドラーのバインド
DOMACentLoadedイベントハンドラー）を使用してすべてのローカル変数のスコープを作成します。
ブラウザはID属性を持つすべての要素に対して（グローバル）変数を作成します。

をあなたはそれらの代わりに、 getElementById

でルックアップを実行するあなたが表示/非表示する必要があるすべてのdivの要素を見つけるために、CSSセレクタを使用することができますを使用することができ、あなたは一度だけその検索を行い、結果を保存することができ

"use strict"; 
 
// Preferrably bind event handlers in code, not in HTML attributes: 
 
document.addEventListener('DOMContentLoaded', function() { 
 
    // Put all code in this closure, so new variables (if any) are local 
 

 
    // Only query the content DIV elements once, using a CSS selector 
 
    var divs = document.querySelectorAll('div[id*=Content]'); 
 
    
 
    changeChooser(); 
 
    // Global variables are automatically created for all elements with an ID: use them 
 
    monsterChooser.addEventListener('change', changeChooser); 
 

 
    function changeChooser() { 
 
     // Apply hideElement to all content divs 
 
     Array.from(divs, hideElement); 
 
     // Show the specific div: 
 
     showElement(document.getElementById(monsterChooser.value)); 
 
    } 
 

 
    function hideElement(elem) { 
 
     elem.style.display = "none"; 
 
    } 
 
    function showElement(elem) { 
 
     elem.style.display = ""; 
 
    } 
 
});

<h1>Monster Mash</h1> 
 
<p>Pick your favorite monster from the dropdown!</p> 
 
<select id="monsterChooser"> 
 
    <option value="monsterContent">Monsters</option> 
 
    <option value="frankContent">Frankenstein</option> 
 
    <option value="draculaContent">Dracula</option> 
 
    <option value="wolfmanContent">Wolfman</option> 
 
    <option value="mummyContent">Mummy</option> 
 
    <option value="piggyContent">I hate monsters</option> 
 
    </select> 
 
<div id="monsterContent"> 
 
    <h2>Monster Madness</h2> 
 
    <img src="images/monsters.jpg"> 
 
</div> 
 
<div id="frankContent"> 
 
    <h2>Frankenstein</h2> 
 
    <img src="images/frankenstein.jpg"> 
 
</div> 
 
<div id="draculaContent"> 
 
    <h2>Dracula</h2> 
 
    <img src="images/dracula.jpg"> 
 
</div> 
 
<div id="wolfmanContent"> 
 
    <h2>Wolfman</h2> 
 
    <img src="images/wolfman.jpg"> 
 
</div> 
 
<div id="mummyContent"> 
 
    <h2>Mummy</h2> 
 
    <img src="images/mummy.jpg"> 
 
</div> 
 
<div id="piggyContent"> 
 
    <h2>FINE!</h2> 
 
    <p>Here is a little piggy eating ice cream!</p> 
 
    <img src="images/piggy.jpg"> 
 
</div>

出典

2017-10-28 23:59:04 trincot

JavaScriptでは、表示パラメータの割り当てを要素パラメータを取る2つの関数に抽出するにはどうすればよいですか？

答えて

関連する問題