• ベストアンサー

クリックカウンターの作り方

HPにボタンをクリックした回数を表示させたいのですが、どうすればいいのでしょうか? <HTML> <BODY> <center> <form> あなたは<input type=text name=mnt value=0 size=6>人目です。<br> <input type=button value="クリックしてね" onClick="javascript:this.form.mnt.value++;"> </form> </center> </BODY> </HTML> このようにすると、数字の部分がテキストボックスになってしまうのでNGです。 また、2重クリックもできないようにしたいのですが・・・。

質問者が選んだベストアンサー

  • ベストアンサー
  • hinako913
  • ベストアンサー率100% (1/1)
回答No.3

>あなたは・・・人目です >2重クリックもできないようにしたい 質問内容を見る限りではアクセスカウンターの作り方かと思われますが、 アクセスカウンターということでしたらJavaScriptではNGです。 クリックした回数を保持できないので、ページを表示するたびに回数が0にリセットされます。 自前のアクセスカウンターを実装したいのでしたらASPやPHPなどを使わなければいけません。 もとい、 ボタンをクリックした回数をページ上に表示するということに限定してお答えします。 >数字の部分がテキストボックスになってしまうのでNG 数値の部分がテキストボックスにしないようにするにはダイナミックHTMLを使うと実現できるかと。 >2重クリックもできないようにしたい フラグを立ててif文で制御すれば実現できるかと。 <HTML> <head> <Script language="JavaScript"> <!-- var cnt = 0; var flg = true; function f_click(){ if(flg){ cnt++; document.getElementById('Ninzu').innerHTML=cnt; flg = false; } } //--> </Script> </head> <BODY> <center> あなたは<span id="Ninzu">0</span>人目です。<br> <input type=button value="クリックしてね" onClick="f_click()"> </center> </BODY> </HTML> 見当違いの回答だとしても、今後の参考になっていただければ幸いです。

その他の回答 (2)

  • LancerVII
  • ベストアンサー率51% (1060/2054)
回答No.2

すいません、補足です。 10人クリックしたらの部分ですが、 その10人どれも0からの表示となります。

  • LancerVII
  • ベストアンサー率51% (1060/2054)
回答No.1

こんにちは。 JavaScriptのみですと、訪問者が10人クリックしたとしても 次に来た人の表示は0からですが、問題はないですか?

関連するQ&A

  • クリックカウンター

    クリックカウンターでの質問です。次の人になるとまた「0」になってしまいます。どうしてなのでしょう? どなたか直していただけないでしょうか。 <HTML> <head> <Script language="JavaScript"> <!-- var cnt = 0; var flg = true; function f_click(){ if(flg){ cnt++; document.getElementById('Ninzu').innerHTML=cnt; flg = false; } } //--> </Script> </head> <BODY> <center> あなたは<span id="Ninzu">0</span>人目です。<br> <input type=button value="クリックしてね" onClick="f_click()"> </center> </BODY> </HTML>

  • クリックするとボタンの中の文字が変わるようにしたいんですが一応コードは出来たんですが・・うまくうごかなくて困ってます。

    java スクリプトのONCLICKについて質問があります。 ONCLICKのあとに何個もオプションはつけられないのでしょうか? <INPUT TYPE="button" VALUE=" " ONCLICK="form1.Q8.value += '1';" style="font-size:40pt"><br> にボタンをクリックするとボタンの中に「○」を表示するようにしたいんですが、うまくいきません・・・ 一応こう感じにつくってみたんですが・・・ <html> <head> <title></title> </head> <body> <script type="text/javascript"> function change_label(){ document.form1.label1.value = " ○ "; } </script> <form name="form1"> <input type="hidden" name="Q8" value=""><br> <input type="button" name="label1" value="クリックしてね" onclick="form1.Q8.value += '1';change_label();"> <input type="submit" name="Q9b" value="次へ" style="font-size:25pt"> </form> </body> </html> もしよろしければアドバイスいただけませんでしょうか・・・・

  • HPボタンの長さが異なる。

    下のボタンが マックの「IE4.5」「IE5.0」「ネスケ4.7」だとちゃんと奇麗に中央に表示されますが、 Windows「IE4.5」「IE5.0」はボタンの長さが異なり ガタガタになります。 windowsでも奇麗に並べるにはどうしたらいいのでしょうか? よろしくご指導お願いいたします。 テストでアップしてあるURLですのでご確認してください。 http://watn.jp/test/ <HTML> <HEAD> <TITLE>++++</TITLE> </HEAD> <!------------------- 中身-------------------> <center> 下のボタンがマックの「IE4.5」「IE5.0」「ネスケ4.7」だと<br> ちゃんと中央に表示されますが、Windows「IE4.5」「IE5.0」は<br> ボタンの長さが異なりガタガタになります。 <FORM> <INPUT TYPE="button" VALUE=" ●●・・◇◇◇   " onClick="window.location.href='kituke.html'"><br> <INPUT TYPE="button" VALUE="   ・・◇◇◇◇  " onClick="window.location.href='sadou.html'"><br> <INPUT TYPE="button" VALUE="   ・・◇◇◇◇◇ " onClick="window.location.href='buyou.html'"><br> <INPUT TYPE="button" VALUE=" ●●・・◇◇◇   " onClick="window.location.href='ivent.html'"><br> <INPUT TYPE="button" VALUE="   ・・◇◇◇◇  " onClick="window.location.href='tenjikai.html'"><br> <INPUT TYPE="button" VALUE=" ◇◇◇       " onClick="window.location.href='butai.html'"><br> <INPUT TYPE="button" VALUE=" ◇◇◇◇      " onClick="window.location.href='honten.html'"><br> <INPUT TYPE="button" VALUE=" ◇◇◇◇◇     " onClick="window.location.href='yono.html'"><br> </FORM> </center> </BODY> </HTML>

  • javascriptのtextbox

    こんばんは。 <html> <body> <center> <br><br> <form name="fuji"> TEXT BOX<br> <input type="text" name="tex"> </form> <SCRIPT type="text/javascript"> var i; i="ABC" document.write("<input type='button' value='↑を変数iに代入' onClick='i=(document.fuji.tex);'>"); document.write("<br><input type='button' value='表示' onClick='document.write(i);'>"); </SCRIPT> </center> </body> </html> でテキストボックスの中身を表示させたいのですが、 上手くいきません。どうすればいいのでしょうか。 また、変数を使わずに直接テキストボックスの中身を 表示させる事はできるのでしょうか。 教えてください。

  • フォーム入力の制限について

    ショッピングカート構築してます。 数量入力に関して下記の方法で数量変更させたのですが、数量を減らす時に0以下はマイナスにカウントされます。0以下はマイナスを押しても表示されなくするにはどうすればよいでしょうか?ちなみに、+-表示部分に画像を使い場合も教えていただけたらと思います。 <form> <input type="text" name="mnt" value="1" size="2" maxlength="2"><input type=button value="+" onClick="javascript:this.form.mnt.value++;"> <input type=button value="-" onClick="javascript:this.form.mnt.value--;"> </form>

  • fileUploadオブジェクトへの値の代入 (困っています。教えてください。m(__)m)

    こんばんは。 fileUploadオブジェクトへの値の代入がどうにもこうにもできません。 いったいどうしたらいいのでしょうか?どうか助けてください。 よろしくお願いいたします。m(__)m -- <HTML><BODY> <FORM NAME="myFormF"> <INPUT TYPE="file" NAME="myFile"> <INPUT TYPE="button" value="set FILEFILE -> file" onClick="document.myFormF.myFile.value='FILEFILE'"> <INPUT TYPE="submit" onClick="alert(document.myFormF.myFile.value)"> </FORM> <FORM NAME="myFormT"> <INPUT TYPE="text" NAME="myText"> <INPUT TYPE="button" value="set TEXTTEXT -> text" onClick="document.myFormT.myText.value='TEXTTEXT'"> <INPUT TYPE="submit" onClick="alert(document.myFormT.myText.value)"> </FORM> </BODY></HTML> -- key: fileUpload object,ファイルアップロードオブジェクト,WSH,javascript

  • javaで name=id[?] を指定する方法とは?

    ショップ運営で、商品一覧から+-ボタンでそれぞれ数の増減をさせるよう、ほかのサイトを参考にして下記のようにjavascriptで記述してみました。 このうち、商品2と3はボタンが機能したのですが、商品1は数の増減ができません。 おそらく要素名に(name=id[1])と[]で囲っているからだと思うのですが、この[]を取らないまま、ボタンを機能させる方法はありますでしょうか? よろしくお願いします。 <FORM> 商品1:<INPUT type=text name=id[1] value=3 size=4> <INPUT type=button value="+" onClick="plus(this.form.id[1])"> <INPUT type=button value="-" onClick="minus(this.form.id[1])"> <BR> 商品2:<INPUT type=text name=id2 value=3 size=4> <INPUT type=button value="+" onClick="plus(this.form.id2)"> <INPUT type=button value="-" onClick="minus(this.form.id2)"> <BR> 商品3:<INPUT type=text name=id3 value=3 size=4> <INPUT type=button value="+" onClick="plus(this.form.id3)"> <INPUT type=button value="-" onClick="minus(this.form.id3)"> </FORM> <SCRIPT language="JavaScript"> <!-- function plus(chk){chk.value++; if (chk.value==6) {chk.value=5} } function minus(chk){chk.value--; if (chk.value==0) {chk.value=1} } // --> </SCRIPT>

  • ボタンをクリックすると数が増えていくようにしたい

    質問させていただきます。 初心者で大変申し訳ないのですが、、 下記のようなものをjsで動作させたいのですが、 うまく出来ず困っております。 <body> <form> <input type="text"> <input type="button" value="数を1づつ増やす"> </form> </body> ボタンを押すとテキストボックスの中の数字が 1.2.3・・・と数が増えていく仕組みにしたいのです。 また、<head>内でjsの記述をし、ボタンにonClickをつけ ようと思っているのですが、、 どなたか分かるかたがお見えになりましたら 教えていただけると大変助かります。 よろしくお願いいたします! !

  • inputタグはformタグで必ず囲む必要がありますか?

    <input type="text">や< input type="button">などのinputタグは、入力欄に入力されたデータを他のファイルに送らずに同ファイル内で処理する場合も、必ず<form></form>で囲む必要があるのでしょうか? 例えば、<input type="text" id=”background_color”>に色(例:赤、青等)を入力し< input type="button" value=”変更” onClick=”change_background()”>ボタンを押すと、バックグラウンドの色が入力された色に変わるようなコードを書くとします。Javascript(change_background())の内容は同ファイルの<header></header>内に記述しますが、ここでは関係ないので割愛します。 この場合、 <body> <input type="text" id=”background_color”> < input type="button" value=”変更” onClick=”change_background()”> </body> で良いのでしょうか? それとも <body> <form> <input type="text" id=”background_color”> < input type="button" value=”変更” onClick=”change_background()”> </form> </body> とする必要が、ありますか? よろしくお願いします。

    • ベストアンサー
    • HTML
  • onClickがinput type="image"だとできない!

    以前、↓の質問をさせていただき解決したのですが、 input type="image" にしたいのですが、 ただ変更するだけでは、できません。 http://oshiete1.goo.ne.jp/kotaeru.php3?q=2068911 どのように変更したらいいでしょうか? 教えてください! 現在下記の方法でやっています。 <style type="text/css"> .white{ background-Color:white; color:black; } .gray{ background-Color:gray; color:yellow; } .blue{ background-Color:blue; color:red; } </style> <body> <form> 全体: <input type="button" value="White" onClick="document.body.className='white'"> <input type="button" value="Gray" onClick="document.body.className='gray'"> <input type="button" value="Blue" onClick="document.body.className='blue'"><br> テーブル1: <input type="button" value="White" onClick="document.getElementById('t1').className='white'"> <input type="button" value="Gray" onClick="document.getElementById('t1').className='gray'"> <input type="button" value="Blue" onClick="document.getElementById('t1').className='blue'"><br> テーブル2: <input type="button" value="White" onClick="document.getElementById('t2').className='white'"> <input type="button" value="Gray" onClick="document.getElementById('t2').className='gray'"> <input type="button" value="Blue" onClick="document.getElementById('t2').className='blue'"><br> </form> <table width=100% id="t1"> <tr><td>test</td></tr> </table> <table width=100% id="t2"> <tr><td>test</td></tr> </table> </body>