• ベストアンサー

ボタン押すたびに文字を送りたい

ボタンを押す度に、文字を下に送りながら残していく関数を作りたいと 思っているのですが、配列を作り、ボタンを作るところまでしか わかりません。文字はHTML上に書きたいです。 var kudamonoList = new Array(6); kudamnoList[1] = "いちご"; kudamnoList[2] = "りんご"; kudamnoList[3] = "なし"; kudamnoList[4] = "ぶどう"; kudamnoList[5] = "もも"; function getNumber() { <input id="button1" type="button" value="押す" onclick="getNumber()" > どのように作ればよいか、コードを教えてください。よろしくお願いします。 表示例) 1回目ボタンにて:いちご 2回目ボタンにて:りんご          いちご 3回目ボタンにて:なし          りんご          いちご

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

  • ベストアンサー
  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.2

<html> <head> <script language=javascript> var kudamonoList = new Array(4); kudamonoList[0] = "いちご"; kudamonoList[1] = "りんご"; kudamonoList[2] = "なし"; kudamonoList[3] = "ぶどう"; kudamonoList[4] = "もも"; var num=0; function getNumber(){ var area=document.getElementById('viewArea'); if (num>=kudamonoList.length) return num; area.innerHTML = kudamonoList[num]+"<br>"+area.innerHTML num++; } </script> </head> <body> <input id="button1" type="button" value="押す" onclick="getNumber()" > <div id="viewArea"></div> </body> </html>

taro12
質問者

お礼

作った配列も使って頂いてとても参考になりました!回答頂いて本当にありがとうございました!

全文を見る
すると、全ての回答が全文表示されます。

その他の回答 (1)

  • BLUEPIXY
  • ベストアンサー率50% (3003/5914)
回答No.1

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=SHIFT_JIS"> <title>Sample</title> <script type="text/javascript"><!-- var List = [ "いちご", "りんご", "なし", "ぶどう", "もも" ]; var Last_pos = -1; function button1_push(){ var result_HTML=""; Last_pos++; if(List.length <= Last_pos) return ;//リストの最後を越えている for(var i=0;i<=Last_pos;i++){ result_HTML = List[i] + "<br>" + result_HTML; } document.getElementById("result").innerHTML=result_HTML; } //--> </script> </head> <body> <input id="button1" type="button" value="押す" onclick="button1_push()" > <div id="result"></div> </body> </html>

taro12
質問者

お礼

とても参考になりました!配列の使い方にもいろいろあるんですね。回答頂いて本当にありがとうございました!

全文を見る
すると、全ての回答が全文表示されます。

関連するQ&A

  • ボタンに書かれている文字の入れ替え

    2つのボタンのどちらを押しても、ボタンに書かれているアルファベットが入れ替わるようにしたいのですが、うまくいきません。 alert(obj1)、alert(obj2)などとして、A,Bともに読み込まれているようなのですが、alert(tmp)の時はundefinedがでます。 どこが間違っているのかよろしければ教えてください。 <!doctype html> <html> <head> <meta charset="utf-8"> <title>勉強中</title> </head> <body> <script> function change_alphabet() { var tmp; var obj1 = document.getElementById("button_1").value; var obj2 = document.getElementById("button_2").value; // alert(obj1); // alert(obj2); tmp = obj1.innerHTML; // alert(tmp); obj1.innerHTML = obj2.innerHTML; obj2.innerHTML = tmp; // alert(obj2); } </script> < input type = "button" id = "button_1" value = "A" style = "width: 25px; height: 25px" onclick = "change_alphabet()" > < input type = "button" id = "button_2" value = "B" style = "width: 25px; height: 25px" onclick = "change_alphabet()" > <body> </html>

  • ボタンの長さを変えたい(至急)

    <INPUT TYPE=BUTTON VALUE="最新100回グラフ" onClick="location.href='../grf/100.htm'"> <INPUT TYPE=BUTTON VALUE="最新50回グラフ" onClick="location.href='../grf/50.htm'"> このようなボタンの長さを揃えたいです。 スペースで調節するしかないのでしょうか?

    • ベストアンサー
    • HTML
  • ボタンの飛び先を一つにして、押したボタンのプロパティを変更するには?(超初心者)

    VBじゃないかもしれませんが・・・ HTMLファイルに、VBScriptで次のように書いたのですが、 <html> <head>   ////省略/// <SCRIPT>   ////省略/// Sub Button1_OnClick   ////省略///   Call XXXX EndSub Sub Button2_OnClick   ////省略///   Call XXXX EndSub Sub Button3_OnClick   ////省略///   Call XXXX EndSub  :  :  : Sub XXXX   ---ここで、押したボタンのいろんなプロパティを 変更したいのですが・・・変更の内容はどのボタンを押しても同じなので、ここでひとつにまとめたいんですが。たとえば、そのひとつとして、ボタンの画像を変えるとして・・・   Button(押したボタンの).Src = "sampleX.gif" End Sub </SCRIPT> </head> <body>   <input id="button1" type="button" name="button1" src="sample1.gif">   <input id="button2" type="button" name="button2" src="sample2.gif">   <input id="button3" type="button" name="button3" src="sample3.gif">  :  :  : つまり、押したボタンが何であったかを判別して、 維持することができないでしょうか? 素人です。よろしくお願いします。 ボタンは配列にできればしてもかまいません。 見当違いのスクリプトで、ほかにもっとよいスクリプトがあったら教えてください。

  • CSSでのボタンのエフェクト

    数字を小さい順にタップしていくコードなのですが この状態だと一度押されたものは背景が変わり押せなくなります ですがCSSでボタンのデザインを変えると押したかどうかわからなくなってしまいます コードは以下の通りです <body> <h1>小さい数字からタッチ!</h1> <p>Time: <span id ="time">0.0</span> sec. </p> <div id="board"> <input type="button" id="button_0" value="?" onclick="touched(0);"> <input type="button" id="button_1" value="?" onclick="touched(1);"> <input type="button" id="button_2" value="?" onclick="touched(2);"><br> <input type="button" id="button_3" value="?" onclick="touched(3);"> <input type="button" id="button_4" value="?" onclick="touched(4);"> <input type="button" id="button_5" value="?" onclick="touched(5);"><br> <input type="button" id="button_6" value="?" onclick="touched(6);"> <input type="button" id="button_7" value="?" onclick="touched(7);"> <input type="button" id="button_8" value="?" onclick="touched(8);"><br> </div> <p><input type="button" value="start!" onclick="timerStart();"></p> <script> var currentNum; var timet; var startTime; var isPlaying = false; function timerStart() { initBoard(); currentNum = 0; startTime = (new Date()).getTime(); if (!isPlaying) { isPlaying = true; runTimer(); } } function initBoard() { var nums = [0,1,2,3,4,5,6,7,8]; var num; var btn; for (var i=0; i<9; i++) { num = nums.splice(Math.floor(Math.random() * nums.length), 1); btn = document.getElementById('button_' + i); btn.value = num[0]; btn.disabled = false; } } function touched(n) { var btn = document.getElementById('button_' + n) if (btn.value == currentNum) { btn.disabled = true; currentNum++; } if (currentNum == 9){ clearTimeout(timer); isPlaying = false; alert('Your Score: ' + document.getElementById('time').innerHTML); } } function runTimer() { document.getElementById('time').innerHTML = (((new Date()).getTime() - startTime) / 1000).toFixed(1); timer = setTimeout(function() { runTimer() ; }, 100); } </script> </body> CSSは #board > input { height: 60px; width: 90px; margin-right : 5px; margin-top : 5px; background: -moz-linear-gradient(top,#09C 0%,#09C 50%,#069 50%,#069); background: -webkit-gradient(linear, left top, left bottom,from(#09C), color-stop(0.5,#09C), color-stop(0.5,#069), to(#069)); border: 1px solid #DDD; color: #FFF; padding: 10px 0; } ですどうすればデザインの変更を保ったまま押されたときに背景を変えることができますか?

  • エクセル関数でおしえてください。

    エクセル関数でおしえてください。 以下のような表があります。   A     B     C     D     E  1 いちご   1 2 バナナ        1  3 ぶどう             1 4 サクランボ                1 5 もも    1 6 りんご        1 7 なし              1 8 すいか                  1 9 果物(1) いちご バナナ ぶどう サクランボ 10果物(2) もも  りんご なし  すいか B1~E8に「1」のフラグをたてます。 (フラグはランダムにたちます) 9、10行目に関数をいれて、いちご、もも・・と果物の名前を表示させたいです。 どなたかいい知恵をかしてください。 よろしくお願いします。

  • 2度押し防止ボタン

    HTML5 + CSS3 でスマートフォンゲームを作っています。 回線が混雑している状況でボタンを2度押ししても1回しかカウントされないボタンを作りたいと考えています。 【基本的な知見】 下記であれば要望に沿ったボタンになります。(ボタンはCSS3の標準ボタンを使用) <form action="form.cgi" method="post"> <input type="hidden" name="point" value="1" /> <SCRIPT TYPE="text/javascript"> <!-- //submitの2度押し防止 function disableButton(){ document.form1.button1.disabled = true; submitForm(); } function submitForm(){ document.form1.submit(); } // --> </SCRIPT> <input type="button" value="購 入" onClick="disableButton()" name="button1"> </form> 【やりたいこと】 「ボタンに数量を表示したいことと、ボタン上の数値表記とCGIに渡すvalueが異なることがある」ため、CSS3の標準ボタンを止め下記のオリジナルCSSのボタンを使用します。 <button class="button8" type="submit" name="point" value="1050" onClick="disableButton()"><div>50ポイント</div></button> このオリジナルCSSのボタンを使用した場合の2度押し防止のjavascriptはどのように改造すればいいか教えてください。 上記に示したjavascriptの 「document.form1.button1.disabled = true;」のbutton1をpointに変更したところ、数値をCGIに渡せませんでした。 よろしくお願いいたします。

  • ボタンを押すと、テキストエリアに文字が出て、さらにそれを

    アレンジしたいのです。 <FORM> <INPUT type="text" value="テスト" name="b1" size="55"> <br> <font style="font-size:15px" color="#666666">ボタンをクリック!</font> <INPUT type="button" value="ボタン" onclick="b1.value='こうゆうふうに字が出る'"> </FORM> 上記のようにして「ボタン押す=文字出る」を作りました。 さらには、1文字づつもったいぶって、文字を出したいのです。 別の、タグで「勝手に1文字づつ出る」のは、あったと思いますが、ボタンで、動作開始をしたいと思います。 何か、よいアイデアはありますでしょうか?

  • 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>

  • ボタンを押すたびに画像を切り替えるには?

    まずソースを載せます↓ <html> <head> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-type" content="text/html; charset=shift-jis"> <title>ボタンを押すたびに画像を表示します</title> <body bgcolor="#FFFFFF"> <script type="text/javascript"> function func1(str) { document.write('<img src="c:/MyImage/dog1.jpg" width="104" height="91" />'); } function func2(str) { document.write('<img src="c:/MyImage/dog2.jpg" width="104" height="91" />'); } function func3(str) { document.write('<img src="c:/MyImage/dog3.jpg" width="104" height="91" />'); } function func4(str) { document.write('<img src="c:/MyImage/dog4.jpg" width="104" height="91" />'); } </script> </head> <body bgcolor="#FFFFFF"> <form id="myForm" name="myForm"><p> <input type="button" value="ボタン1" name="button1"onclick="func1('dog1.jpg');"> <input type="button" value="ボタン2" name="button2"onclick="func2('dog2.jpg');"> <input type="button" value="ボタン3" name="button3"onclick="func3('dog3.jpg');"> <input type="button" value="ボタン4" name="button4"onclick="func4('dog4.jpg');"> </p></form> </body> </html> 今回の質問内容はボタンを押すたびに画像を表示するjavascriptプログラムです 画像はCドライブ直下のMyImageフォルダにdog1.jpg,,dog2.jpg,dog3.jpg, dog4.jpgを入れています なんで動かないのがわからないです 回答できたらよろしくお願いします

  • JavaScriptのinput要素のonclick内で直接JavaS

    JavaScriptのinput要素のonclick内で直接JavaScript文を書きたい <input type="button" onclick="func()" value="ボタン"> のようにonclick内で関数を呼び出すことはできますが、 以下のようにスクリプトを直接書き込むのは可能でしょうか? (これは私が適当に考えただけなので多分動作はしませんが) <input type="button" onclick="javascript:( var a = 123; alert( a ); )" value="ボタン"> というのもちょっと試したいだけのときなど、 なるべく外部呼出しにしたくないことも多々あるもので・・