HTMLを変更せずにJavaScriptを使ってonlickの動作を変更する

Question

私はHTMLを編集する権限がありませんが、ボタンにデフォルトのonClick動作を上書きするようにJavaScriptをページに追加したいと思います。

これはコードで、JSを使用して「Enter」ボタンをクリックするとgoogle.comに移動します。私はまた、このコードを見つけるためにクラス、名前、またはタイプを使用しないことを好むだろうが、それが唯一の選択肢ならばそうするだろう。

HTML：

<div class="button"> 
<input type="submit" name="cantUseName" value="Enter" onclick="if(isNew){ $(jQuery('[id$=Test]')[0]).show(); return false; } else return true;" class="main"> 
</div> 

私がここに集まって何から、私は技術的に私が欲しいものを行う必要がありますJSを作成しました。しかし、私はそれがURLのコードを何らかの理由で削除して、JSに何か間違っていると言っているので、これをテストすることはできません。

JS：

document.querySelectorAll("input[value=Enter]").onclick = function() { 
     location.href = "www.google.com"; 
}; 

ありがとう！

Answer 1

querySelectorAll()が見つかったすべての要素の集合であるアレイ状のオブジェクトである、nodeListを返します。あなたがこの方法を使用した場合、あなたはこのように、インデックスでコレクションから要素を取得する必要があるだろう：

document.querySelectorAll("input[value=Enter]")[0].onclick = ... 

しかし、あなたはあなたのセレクタにマッチするひとつの要素を期待し、そうquerySelector()を使用しています代わりにこれは、要素のコレクションではなく最初の一致する要素を返します（インデックスは不要）ので、マッチを見つけた後にマッチの検索を停止するため、パフォーマンスが向上します。

また、www.google.comの前にhttp://を追加します。

最後に、それはsubmitボタンの場合は、フォームの送信とform要素のaction属性値へのリダイレクトの副作用があるかもしれないことに注意してください。これはあなたの関数は、イベント参照を受け取り、確認した後、このように、イベントをキャンセルすることによって、回避することができます。

document.querySelector("input[value=Enter]").onclick = function(evt) { 
    evt.preventDefault(); // Cancel the native event 
    location.href = "http://www.google.com"; 
}; 

Answer 2

は以下に合わせて選択し、onclickの機能を変更してください。私はこのようなやり方で行動を起こさせることで成功した。

jQuery("input[value=Enter]").on('click', function (e) { 
    e.preventDefault(); 
    location.href = "http://www.google.com"; 
}); 

あなたはjQueryのを避けたい場合、あなたはこれらの線に沿って行くことができる：

document.querySelector("input[value=Enter]").onclick = function(e) { 
    e.preventDefault(); 
    location.href = "http://www.google.com"; 
};