- ベストアンサー
idHOGEで取得したinnerText（数字）の値に1足して表示する
<html> <head> <title>クリックカウンタ</title> <sclipt type="text/javascript"> <!-- function count(i){ now = document.getElementById(i).innerText; now = now + 1; } //--> </script> </head> <body> <span onclick="count(kaisu)">ボタン</span>を <span id="kaisu">0</span>回おしました </body> </html> のような感じでボタン(今はテキスト)をおせば対応箇所の回数を増やしたいのですが、こういう時の方法がよくわかりません（nowのところ) どのように処理するのでしょうか？
- idhokanohi
- お礼率58% (48/82)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (1)
こんな感じの動作をお望みですか？ --- <html> <head> <title>クリックカウンタ</title> <script type="text/javascript"> var n = 0; function addCounter() { n++; document.getElementById('counter').firstChild.nodeValue = n.toString(); }; </script> </head> <body> <button onclick="addCounter()"/>ボタン</button>を<span id="counter">0</span>回押しました。 </body> </html>
お礼
回答ありがとうございます。 .nodeValueと.toString() は知らなかった、また調べてみますね！ こういう方法もあるのか～。 こうやって使えるものが増えていくのは楽しいですね。
補足
この方法ですと、初期値が例えば4などのばあい、クリックするとまた1から始まるので少し違いました。 勉強になります。
関連するQ&A
- マウスでスクロールした値を取得できない
IE6.02を使っています。 マウスの座標を追いかけるプログラムで、 ブラウザを縦方向にスクロールしてもその座標を取得したいのですが、 なぜかdocument.body.scrollTopが0のままで追いかけてきませんでした。 次のどこがいけないのでしょうか？ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>sample</title> <script type="text/javascript"><!-- document.onmousemove=function(e){ if(document.all){ Myimg.style.pixelLeft=document.body.scrollLeft+event.x+15; Myimg.style.pixelTop=document.body.scrollTop+event.y+15; } else if(document.getElementById){ document.getElementById("Myimg").style.left=e.pageX+15; document.getElementById("Myimg").style.top=e.pageY+15; } } --></script> </head> <body> <span id="Myimg" style="position:absolute"><img src="gazou.gif"></span> a<br>←スクロールバーがでるように改行していく a<br> a<br> a<br> a<br> ・ ・ ・ </body> </html>
- ベストアンサー
- JavaScript
- JavaScript表示切替の問題
ボタンを押すたびに、こんにちはとこんばんはが切り替わるようにしたいのですが、 切り替わりません。なぜかわかる方がいたら教えて頂けると助かります。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> </head> <body> <div id="1">こんにちは</div> <input type="button" value="切替" onclick="func_switch()"> <script language="javascript" type="text/javascript"> function func_switch(){ if(document.getElementById(1).innerHTML="こんにちは"){ document.getElementById(1).innerHTML="こんばんは"; } else{ document.getElementById(1).innerHTML="こんばんは"; } } </script> </body> </html>
- ベストアンサー
- JavaScript
- innerHTMLに代入したインラインフレームのＤＩＶの値の取得について
下記のソースは「読み込み」ボタンを押した時にあらかじめ用意してた<div id="box">にインラインフレームを代入し、「値取得」ボタンを押したら、'sample.html'内のdivの値「keisan」をアラートで表示する記述です。このソース内容を、ボタンのイベントで「keisan」の値を取得するのではなく、<body>のonLoadでページを開いた瞬間にアラートが 出るようにしたいのですが、お分かりになる方はいらっしゃいますでしょうか？ わかりにくい説明ですみません。どうかよろしくお願いします。 <html> <head></head> <body> <div id="box"></div> <input type="button" value="読み込み" onClick="Details.changeURL('sample.html')" /> <input type="button" value="値取得" onClick="Details.showMessage('keisan')" /> </body> <script type="text/javascript"> <!-- var Details = (function(){ var handle = document.getElementById('box'); var buffer = null; return { changeURL: function(url){ handle.innerHTML = "<iframe src=\""+url+"\" id=\"ifr\"></iframe>"; }, showMessage: function(id){ buffer = document.getElementById('ifr').contentWindow.document; alert(buffer.getElementById(id).innerHTML); } } })(); //--> </script> </html>
- 締切済み
- JavaScript
- 下記コードの実行方法について質問です。
問題のコードは下記ですが、 bodyタグに onLoad="firstFunc()" と書かずに実行したいのですが、 スマートな方法はないでしょうか？ よろしくお願いいたします。 <script type="text/javascript"> function firstFunc(){ var aFunc = document.getElementById('btn'); aFunc.onclick = function(){ alert('りんご'); } } </script> </head> <body onLoad="firstFunc()"> <button id="btn" name="ボタン">getElementByIdでonclickのイベントを追加できる。</button> </body>
- ベストアンサー
- JavaScript
- innerTextの内容を<a>タグに表示させたい
開始と終了のテキストボックスに日付8桁（20120422）と入力した際 リンクにパラメータを追加したいのですが上手くいきません。 何もないところに表示することはできましたが<a>タグ内に表示が上手くいきません。 「ここに追加したい」のところに<span id="preview"></span>としても そのままこの文字列が出てしまいます。 どなたかご教授お願いします。 よろしくお願いし致します。 <script type="text/javascript"> function showPreview() { var start = document.getElementById('start').value ; var end = document.getElementById('end').value ; s_leng = start.length; e_leng = end.length; if(s_leng == 8 && e_leng == 8){ document.getElementById('preview').innerText = "start=" + start +"&end=" + end ; （innerHtmlでも上手くいかない） } } </script> ------------------------------------------------------------------------------------ <form> <input type="text" id="start" onkeyup="showPreview()">開始 <input type="text" id="end" onkeyup="showPreview()">終了 </form> <? $sql = "SELECT name FROM Catalog"; $rtns = pg_query($con, $sql); while($rtn = pg_fetch_array($rtns)) { ?> <a href="link.php?ここに追加したい"><?=$name?></a> <? } ?> <span id="preview"></span> →ここに表示することは可能
- ベストアンサー
- JavaScript
- googleスライドのhtmlについて
<!DOCTYPE html> <html> <head> <title>Copy Text to Clipboard</title> </head> <body> <textarea id="myTextarea" rows="4" cols="50">chrome-extension://gndmhdcefbhlchkhipcnnbkcmicncehk/manifest.json</textarea> <br> <button onclick="copyToClipboard()">コピー</button> <script> function copyToClipboard() { var text = document.getElementById("myTextarea").value; navigator.clipboard.writeText(text); } </script> </body> </html> みたいなhtmlを書いたのですが、何故かうまくいきません 多分半分くらい間違ってるんでどうしたらいいのか教えて下さい！！ ちなみに私がしたいのは"コピーする"ボタンをおしたらコピーできるみたいな感じのやつです
- 締切済み
- HTML
- ループ、プログラムなのに！？
以下のプログラムは、ただの乗算と、その合計を計算するだけなのに、なんでfor (var i = 1; i < 4; i++) { のループ、プログラムなのですか？ もし同じ計算結果のダイアログBOXで、Javaの範疇で組むのであれば、他にどんなプログラムがあるのですか？ よろしくお願いします。 <HTML> <HEAD> <TITLE>ループ</TITLE> <script tytpe="text/javascript"> <!-- function calc(){ var alltotal = 0; for (var i = 1; i < 4; i++) { var price = document.getElementById("price" + i).innerHTML; var num = document.getElementById("num" + i).value; var total = price * num; document.getElementById("total" + i).innerHTML = total; alltotal += total; } document.getElementById("alltotal").innerHTML = alltotal; } </script> </HEAD> <body> <p><span id="price1">100</span><input id="num1" value="0" /><span id="total1">1の合計</span></p> <p><span id="price2">200</span><input id="num2" value="0" /><span id="total2">2の合計</span></p> <p><span id="price3">300</span><input id="num3" value="0" /><span id="total3">3の合計</span></p> <div id="alltotal">合計</div> <button onclick="calc()">計算</button> </body> </HTML>
- ベストアンサー
- JavaScript
- 表示と非表示
下のような物があったときに、１を押したときに１が現れるのですが、続けて２を押したときに１と２が表示されてしまいます。 この時に、２を押したら、１を非表示にして２だけを表示したいのですが、可能でしょうか？ よろしくお願い致します。 <HTML><HEAD><TITLE>test</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- function apper(sLayers) { if (document.all) { if (document.all(sLayers).style.display=='inline') { document.all(sLayers).style.display='none'; } else { document.all(sLayers).style.display='inline'; } } return (false); } // --> </SCRIPT> <style type="text/css"> span.hidden { position: relative; display: none } span.visiable { position: relative; display: inline } // --> </style></HEAD> <BODY> <a href="" onClick="return apper('1')">質問１</a><br> <a href="" onClick="return apper('2')">質問２</a><br> <a href="" onClick="return apper('3')">質問３</a><br> <span class="hidden" id="1">1<br></span> <span class="hidden" id="2">2<br></span> <span class="hidden" id="3">3<br></span> </BODY></HTML>
- ベストアンサー
- JavaScript
- ブラウザ依存？ html JavaScript textboxの値の渡し方
<html> <head> <script type="text/javascript"> function print(arg){ document.getElementById("out").innerHTML = "<br/>" + arg; } </script> </head> <body> <input type="textbox" name="text1"/><br/> <input type="button" value="print" onclick="print(text1.value)"/> <div id="out"></div> </body> </html> 上記は、textboxに入力した文字列を[print]ボタンを押下すると表示するhtmlです。IE6.0では期待通りに動作するのですが、Firefox/2.0では動作しません。 ブラウザに依存しない様にはどこを直せばよいですか？
- ベストアンサー
- JavaScript
- HTMLでテキスト入力し表示させる
HTMLでテキストボックスに文字を入力し、表示させたいのですがうまくできません。 見た目はできているようなのですが、文字が表示されない状態です。 コードを記載しますので、お手数をお掛けしますがご教授頂けますでしょうか。 <html> <head> <script> function add(){ document.getElementById("target").innerText = document.getElementById("name").value; target = document.getElementById("output"); document.write(target); } </script> </head> <body> <p>名前を入力してください</p> <input id="name" name="name" type="text" size="30" onkeydown="update_field();"> <br> <input type="button" onclick="add()" value="実行"> <form action="index.html" method="post"> <br> <input type="submit" name="exit" value="戻る"> </form> </body> </html>
- 締切済み
- JavaScript
- LAVIE T1195BASのUSBタイプCのバージョンを教えてください。もし3.1以上ならば、HDMI変換ケーブルを使って映像を楽しむことができます。
- LAVIE T1195BASのUSBタイプCのバージョンは3.1以上ですか？もし3.1以上であれば、HDMI変換ケーブルを使用して映像を楽しむことができます。
- LAVIE T1195BASのUSBタイプCのバージョンを教えてください。もし3.1以上であれば、HDMI変換ケーブルを利用して映像を楽しむことができます。
お礼
おおー、こんな方法があったのですね！ まさにこれです。 入力ミスに気づいてなかったのは内緒ですよ？ ++document.getElementById(i).innerText; ですか～、なるほど。 回答ありがとうございました～！。