web-dev-qa-db-ja.com

onclickイベントがJavaScriptで機能しない

ボタンのあるHTMLページにJavaScriptコードがあります。ボタンのonClickイベントを処理する「click()」という関数があります。ボタンのコードは次のとおりです。

<input type="button" onClick="click()">button text</input>  

問題は、ボタンをクリックしても、関数が呼び出されないことです。ここで何が間違っていますか?
ありがとう

45

2つの観察:

  1. あなたは書くべきです

    <input type="button" value="button text" />
    

    の代わりに

    <input type="button">button text</input>
    
  2. 関数の名前を変更する必要があります。関数click()はボタンで既に定義され(クリックをシミュレートします)、メソッドよりも高い優先度を取得します。

ここにはいくつかの提案がありますが、これは明らかに間違っているため、あまり時間をかけないでください。

  • onclick="javascript:myfunc()"を使用しないでください。ハイパーリンクのhref属性内でjavascript:プレフィックスのみを使用してください:<a href="javascript:myfunc()">
  • セミコロンで終わる必要はありません。 onclick="foo()"onclick="foo();"はどちらも正常に機能します。
  • HTMLのイベント属性では大文字と小文字が区別されないため、onclickonClick、およびONCLICKはすべて機能します。属性を小文字で記述するのは一般的な方法です:onclickjavascript自体は大文字と小文字が区別されるため、document.getElementById("...").onclick = ...と記述すると、必須すべて小文字になります。
96
Elian Ebbing

click()は予約語であり、既に関数です。名前をclick()からrunclick()に変更します

13
Jimmy Rousseau

これを試して

<input type="button" onClick="return click();">button text</input>  
4
Nathanphan

同じ関数を呼び出しているかどうかを確認してください。

<script>function greeting(){document.write("hi");}</script>

<input type="button" value="Click Here" onclick="greeting();"/>
3
user3669026

大文字を修正してください。 onclickの代わりにonClick

リファレンス: Mozilla Developer Docs

0
Wylie

<input type="button" value="button text" onclick="click()">これがお役に立てば幸いです!

0
Kyle Gagnon
<script>
//$(document).ready(function () {
function showcontent() {
        document.getElementById("demo22").innerHTML = "Hello World";
}
//});// end of ready function
</script>

Onclick関数呼び出しが機能しないという同じ問題がありました。通常の「$(document).ready(function(){});」内に関数を含めました。 jqueryスクリプトをラップするために使用されるブロック。このブロックをコメントアウトして問題を解決しました。

0
Tony

今日、これは私にも起こりました。関数名がキーワードと競合している可能性があります。私の場合はscrape()です。関数名を変更すると、すべて正常に機能します。

0
lover summer

はい、関数の名前を変更する必要があります。 Javascriptにはメソッドが予約されており、onclick = >>>> click()<<<<はそのうちの1つであるため、名前を変更し、末尾に「s」を追加するか、何かを追加します。 強力なテキスト `

0
Jerry Noel