from属性でdocument.querySelectorがnullエラーを返します

Question

まずはJSとjQueryを学習しています。私はフォームフィールドの内容を左右に同じフィールドにコピーするようにしています。 伝達関数は "null"を返すので、DOM内の要素が見つからないと思います。私は別の構文を試したが、私はそれを修正することはできません。ここで

は抜粋です：https://jsfiddle.net/wc8mzz3p/149/

<div id='main'> 
     <div id="rightSidePanel" class="ui form"> 
       <div id="compareForm" class="fields grid-no-margin"> 
        <div id="prjFormLeft" class="seven wide field"> 
      <div class='ui stackable one column grid grid-no-margin tab active'> 
      <div class='column field'><label for='Customer'>Customer</label><input type='text' field='Customer' name='Customer'></input><div class='ui item'> 
      <button class='ui right floated icon button' for='Customer' side='Left' onclick='transfer(this)'> 
      <i class='right chevron icon'></i></button> 
      //--lots of other fields 
     </div></div></div></div> 
      <div id="prjFormRight" class="seven wide field"> 
      <div class='ui stackable one column grid grid-no-margin tab active'> 
      <div class='column field'><label for='Customer'>Customer</label><input type='text' id='Customer' name='Customer'></input><div class='ui item'><button class='ui icon button' for='Customer' side='Right' onclick='transfer(this)'><i class='left chevron icon'></i></button></div></div> 
      //--lots of other fields 
     </div></div></div></div> 

JS機能：

function transfer(element) { 
    var from = element.getAttribute('side'); 
    var field = element.getAttribute('for'); 
    if(from === 'Right') var dest = 'Left'; 
    else var dest = 'Right'; 
    var destElement = document.querySelector("#prjForm"+dest+" label[for='"+field+"']"); 
    console.log(destElement); 
} 

Answer 1

TL; DR：ここでは、あなたの問題のa working Jsfiddleです。

まず、読むのが簡単になるように、（HTML）コードをインデントする必要があります。

<div id='main'> 
    <div id="rightSidePanel" class="ui form"> 
     <div id="compareForm" class="fields grid-no-margin"> 
      <div id="prjFormLeft" class="seven wide field"> 
       <div class='ui stackable one column grid grid-no-margin tab active'> 
        <div class='column field'> 
         <label for='Customer'>Customer</label> 
         <input id="left-input" type='text' field='Customer' name='Customer' /> 
         <div class='ui item'> 
          <button id="left-button" class='ui right floated icon button' for='Customer' side='Left'> 
          <i class='right chevron icon'></i> 
          </button> 
         </div> 
        </div> 
       </div> 
      </div> 
      <div id="prjFormRight" class="seven wide field"> 
       <div class='ui stackable one column grid grid-no-margin tab active'> 
        <div class='column field'> 
         <label for='Customer'>Customer</label> 
         <input id="right-input" type='text' name='Customer' /> 
         <div class='ui item'> 
          <button id="right-button" class='ui icon button' for='Customer' side='Right'> 
           <i class='right chevron icon'></i> 
          </button> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

<input />は、自己終了型のHTMLタグです。これをチェックアウトself-closing HTML tag list

ここでJavaScriptの部分に焦点を当てましょう。

ここでの目標は次のとおりです。ボタンをクリックすると、入力が取得され、もう一方の値が割り当てられます。そして、値が出てくる入力をクリアしますが、これはもちろんオプションです。

これを行うには、takeFromとsendToの2つのパラメータを取る関数transferInputValを作成しました。ボタンをクリックするとこの機能が起動されます。

たとえば、leftとsendToをtakeする場合、transferInputValは、左側の値を右側の入力に割り当てます。

この関数を宣言した後、DOMからボタンを読み込み、対応するボタンへの参照を保持する2つの変数を作成します。

次に、イベントリスナーclickを各ボタンに追加します。ボタンをクリックすると、2番目のパラメータで渡された関数が呼び出されます。これは、読みやすくするためにarrow functionと書かれています。

JavaScript（ES6）の最新バージョンで導入された概念はほとんどありませんでした。このトピックについてもっと学ぶことに興味があるかもしれません。私はこれについて書類を書いた、check it out if you want to =）。