条件付きオープンリンク

私の目標は、新しいタブチェックボックスがチェックされている場合にのみでこれらのリンクがオープンにすることです。条件付きオープンリンク

私はのgetElementsByClassNameにgetElementByIdをを変更した場合、なぜ私のanchor.getAttribute関数ではなく？配列のようなオブジェクトを返しますgetElementsByClassName

<!DOCTYPE html> 
<html> 
    <head> </head> 
    <title> </title> 
    <body> 
     <input id="checkr" type="checkbox">Open in New Window</input> 
     <br /> 
     <a href="http://www.google.com" class="linker">Google</a> <br> 
     <a href="http://www.w3schools.com" class="linker">W3 Schools</a> <br> 
     <a href="http://www.twitch.tv" class="linker">Twitch</a> <br> 

     <script> 
      var checkr = document.getElementById('checkr'); 
      var anchor = document.getElementsByClassName('linker'); 
      var link = anchor.getAttribute('href'); 

      function OpenWindow(href) { 
       if (checkr.checked) { 
        window.open(href, '_blank'); 
       } else { 
        window.open(href, '_self'); 
       } 
      } 
      anchor.onclick = function() { 
       OpenWindow(link); 
       return false; 
      }; 
     </script> 
    </body> 
</html>

出典

2016-10-06 Jlouk

コードを含むようにリンクが使用できなくなった場合には、あなたの質問を更新してください。 – MJH

まず、...要素の複数が手がかりでなければなりません...それはそれは事のコレクションを返します、単一ものを返していません。

const linkers = document.getElementsByClassName('linker'); 
for(const linker of linkers) { 
    linker.addEventListener('click', function(evt) { 
    // this is your click event listener 
    }); 
}

第二に、はどのアンカーされているので、あなたが、アンカーが仕事に行くのではありません取得しようとしている方法：

だからあなたのハンドラをアタッチする、あなたはそうのようなそれらをループする必要がありあなたはについて話していますか？あなたはデフォルトの動作が起こることを望んでいないので

const linkers = document.getElementsByClassName('linker'); 
for(const linker of linkers) { 
    linker.addEventListener('click', function(evt) { 
    const href = evt.target.attributes['href'].value; 
    }); 
}

、evt.preventDefault()呼び出し：

それを行うための最善の方法は、イベント自体は、アンカーがクリックされたものを教えて、それは target財産だを通じてそれがないている聞かせています

const linkers = document.getElementsByClassName('linker'); 
for(const linker of linkers) { 
    linker.addEventListener('click', function(evt) { 
    evt.preventDefault(); 
    const href = evt.target.attributes['href'].value; 
    }); 
}

その後、最終的に、あなたは、チェックボックスの値を取得し、適切な行動とることができます。

const linkers = document.getElementsByClassName('linker'); 
for(const linker of linkers) { 
    linker.addEventListener('click', function(evt) { 
    evt.preventDefault(); 
    const href = evt.target.attributes['href'].value; 
    const newWindow = document.getElementById('checkr').checked; 
    window.open(href, newWindow ? '_blank' : '_self'); 
    }); 
}

注私はを使用していますループ。これは古い古いブラウザでは利用できない可能性があります。それが問題であれば、通常のforのループをインデックスに置き換えることができます（Array#forEachを使用することはできません）。DOMは無限の知恵で配列を返しませんが、という配列のようなものです。オブジェクト）。

出典

2016-10-06 00:46:14

条件付きオープンリンク

答えて

関連する問題