ウォッチ
モと表示された１個のボタンと穴と表示された２個のボタンを用意する。モのボタンをクリックするとそのボタンの法事は穴に変わり、残り２つの穴のどれかがモに変わる。穴のボタンをクリックされても何も変わらないプログラムをつくりたいのです。
最初の状態からモをクリックして他のボタンを変化させることはなんとかできたのですが、そのあと移動したモをおしても同じことをできるようにするのができなくて困ってます。
あと、できたらモを押して２つの穴のどちらかがモにかわるとき穴からモにかわるボタンは左側のもの、とかは決まってないでランダムだとうれしいです＞＜
おねがいします！！！
全然違うかもしれませんが、つくってみたのものっけておきます
<html>
<head>
<title></title>
<script type="text/javascript">
var moFlg = true;
function func(){
if (moFlg) {
document.getElementById("btn01").innerHTML = "穴";
document.getElementById("btn02").innerHTML = "モ";
document.getElementById("btn03").innerHTML = "穴";
moFlg = !moFlg;
} else {
document.getElementById("btn01").innerHTML = "穴";
document.getElementById("btn02").innerHTML = "穴";
document.getElementById("btn03").innerHTML = "モ";
moFlg = !moFlg;
}
}
</script>
</head>
<body>
<button id="btn01" type="button" " onClick="func()">
モ
</button>
<button id="btn02" type="button" " onClick="">
穴
</button>
<button id="btn03" type="button" " onClick="">
穴
</button>
</body>
</html>
ここまでです。
でもできたら<input type ～ button ～ onClick>とかがつかわれているとうれしいです。
No.1ベストアンサー
- 回答日時：
あまり制度高くないような感じですが作ってみました。
<html lang="ja">
<head>
<title></title>
<script type="text/javascript">
function func(t_bt){
var input = document.getElementsByTagName('input');
var button = new Array();
for(var i = 0; i < input.length; i++) {
if(input[i].type == 'button') {
button.push(input[i]);
}
}
if(t_bt.value == 'モ') {
var rand = Rand(button.length - 1);
var flg = 0;
for(var i = 0; i < button.length; i++) {
if(button[i].id == t_bt.id) {
t_bt.value = '穴';
} else {
button[i].value = flg == rand ? 'モ' : '穴';
flg++;
}
}
}
}
function Rand(n) {
return Math.floor(Math.random() * n);
}
</script>
</head>
<body>
<form>
<input type="button" id="btn01" value="モ" onclick="func(this);">
<input type="button" id="btn02" value="穴" onclick="func(this);">
<input type="button" id="btn03" value="穴" onclick="func(this);">
</form>
</body>
</html>
バグとかあったらすみません。
もっと効率のいい方法はないかな。
-
-
- 0
- 件
-
No.4
- 回答日時：
No.3のRand(ids.length-1)となってますが、Rand(ids.length)としてください。
(´Д ｀ )初期表示もランダムになったくじ引きだぁ。てやんでぃ。
<script type="text/javascript">
var ids=['btn01','btn02','btn03'];
var htmls=['モ','穴'];
var prize=0;
function func(elm){
//当たりをクリックしたか
var win=(ids[prize] && ids[prize]==elm.id);
if(win){
alert('勝ち');
}else{
alert('負け');
}
if(win){
Shuffle();
}
}
//シャッフル
function Shuffle(){
var r=Rand(ids.length);
for(var i=0,el;el=$(ids[i]);i++){
el.innerHTML=htmls[+(r!=i)];
}
prize=r;
}
function $(id){return document.getElementById(id);}
function Rand(n){return Math.floor(Math.random()*n);}
onload=function(){
Shuffle();
}
</script>
</head>
<body>
<form action="">
<button id="btn01" type="button" onClick="func(this);">
モ
</button>
<button id="btn02" type="button" onClick="func(this);">
穴
</button>
<button id="btn03" type="button" onClick="func(this);">
穴
</button>
</form>
-
-
- 0
- 件
-
No.3
- 回答日時：
> あと、できたらモを押して２つの穴のどちらかがモにかわるとき穴からモにかわるボタンは左側のもの、とかは決まってないでランダムだとうれしいです＞＜
ランダムに表示を行えばいい、、、といえば簡単なんですが。
作ってみました。
innerHTMLの所をコメントアウトすれば、どこに当たりがでるのかわからなくなるので、簡単なくじ引きになると思います。
動作テストはFirefox2、IE7のみ。エラーチェックなし。
簡単にするために、onclickで呼び出す関数にthisを引数に付けました。
表示部分にちょっとトリックが入ってますが、
「ランダム数」と「何番目のボタンか」を比較して、trueなら0、falseなら1に変換して、配列の添え字として使う
ということをしています。
> モのボタンをクリックするとそのボタンの法事は穴に変わり、残り２つの穴のどれかがモに変わる。穴のボタンをクリックされても何も変わらないプログラムをつくりたいのです。
これについては行っていません。（忘れていたとも言う）
シャッフルするところでif(!win){}を付けるか、負けのところでreturnしてください。(´Д ｀ )
<script type="text/javascript">
var ids=['btn01','btn02','btn03']; //ボタンのID
var htmls=['モ','穴']; // 表示
var prize=0; // 当たり判定用
function func(elm){
//当たりをクリックしたか
var win=(ids[prize]==elm.id);
if(win){
alert('勝ち');
}else{
alert('負け');
}
//シャッフル
var r=Rand(ids.length-1);
for(var i=0,el;el=$(ids[i]);i++){
el.innerHTML=htmls[+(r!=i)];
}
prize=r;
}
function $(id){return document.getElementById(id);}
function Rand(n){return Math.floor(Math.random()*n);}
</script>
<form action="">
<button id="btn01" type="button" onClick="func(this);">
モ
</button>
<button id="btn02" type="button" onClick="func(this);">
穴
</button>
<button id="btn03" type="button" onClick="func(this);">
穴
</button>
</form>
<hr>
<!--IDで指定せず、classでの判別-->
<script type="text/javascript">
var ids2=[];
var theClass='btn';
var htmls=['モ','穴'];
var prize2=0;
function func2(elm){
if(!ids2.length){
Init();
}
//当たりをクリックしたか
var win=(ids2[prize2].id==elm.id);
if(win){
alert('勝ち');
}else{
alert('負け');
}
//シャッフル
var r=Rand(ids2.length-1);
for(var i=0,el;el=ids2[i];i++){
el.innerHTML=htmls[+(r!=i)];
}
prize2=r;
}
function Init(){
var es=document.getElementsByTagName('*');
for(var i=0,c;i<es.length;i++){
c=es[i].className+' ';
if(c.search(theClass+' ')!=-1)
ids2.push(es[i]);
}
es=null;
}
// classではなくinnerHTMLで判別する場合
// <button>の中に改行が入っていると正確に判定できないかもしれません。
function Init2(){
var es=document.getElementsByTagName('*');
for(var i=0,n,h;i<es.length;i++){
n=es[i].nodeName.toUpperCase();
h=es[i].innerHTML;
if( (n=='BUTTON') && (h=='モ' || h=='穴'){
ids2.push(es[i]);
}
}
es=null;
}
</script>
<form action="">
<button id="btn11" type="button" onClick="func2(this);" class="btn hoge">モ</button>
<button id="btn12" type="button" onClick="func2(this);" class="btn page">穴</button>
<button id="btn13" type="button" onClick="func2(this);" class="home btn">穴</button>
<button id="btn14" type="button" onClick="func2(this);" class="btn">ぺ</button>
</form>
-
-
- 0
- 件
-
No.2
- 回答日時：
こんな風にすると汎用性があります
<html>
<head>
<script type="text/javascript">
window.onload=function(){
var mogura=document.getElementById("mogura");
var n=mogura.firstChild;
while(n){
if(n.nodeName=="INPUT" && n.type=="button"){
n.onclick=change;
}
n=n.nextSibling;
}
}
function change(){
if(this.value=="穴") return false;
this.value="穴";
var n=this.parentNode.firstChild;
var count=0;
while(n){
if(n.nodeName=="INPUT" && n.type=="button") {count++};
n=n.nextSibling;
}
var target=Math.floor(Math.random() * (count-1));
var count=0;
var n=this.parentNode.firstChild;
while(n){
if(n.nodeName=="INPUT" && n.type=="button"){
if(n!=this) {
if(count==target){
n.value="モ";
return true;
}
count++;
}
}
n=n.nextSibling;
}
}
</script>
</head>
<body>
<div id="mogura">
<input type="button" value="モ">
<input type="button" value="穴">
<input type="button" value="穴">
<input type="button" value="穴">
<input type="button" value="穴">
<input type="button" value="穴">
<input type="button" value="穴">
<input type="button" value="穴">
<input type="button" value="穴">
</div>
</body>
</html>
-
-
- 0
- 件
-
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！
似たような質問が見つかりました
- JavaScript コードレビューをお願いします。 1 2022/07/16 05:38
- JavaScript javascriptのちょっとした動作不良（原因は突き止めたのですが） 1 2023/06/15 19:58
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- JavaScript プログラムがうまく動きませんレビューお願いします 1 2022/07/10 05:08
- JavaScript javascriptでテーブルに追加した項目のid追加してローカルストレージを操作したい 5 2023/01/01 15:52
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- JavaScript Javascriptが機能せず原因が分からないので教えて頂きたいです 3 2023/06/04 14:50
- JavaScript jsで質問です。 ボタンが二つ存在し、両方のボタンがクリックされたことをチェックしたいのですが、どの 4 2022/11/22 10:30
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
<a>タグのテキストを取得
-
innerHTML実行後のイベント
-
ActiveXobjectが作成できない
-
【Tabキー】特定の範囲内だけで...
-
モーダルダイアログウィンドウ...
-
テキストボックスがブランクの...
-
javascriptでCSVを呼出しvlookup
-
任意の座標をクリックさせるには
-
問題はbind の付いたリスナーを...
-
重複しないくじの作り方がわか...
-
画像の一部を表示
-
idを使わずにonclickで自身の要...
-
C#OpenCv V4にのエラーに関する...
-
google apps scriptの終了のさせ方
-
二次元配列を使って順位をだす...
-
同じIDで定義した要素の配列を...
-
functionから別のfunctionを実...
-
GASでundefinedエラーが出ます
-
Boolean型配列中のTrueの有無を...
-
【正規表現】【javascript】CR...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
<a>タグのテキストを取得
-
[初心者]javascriptのfor文でな...
-
ActiveXobjectが作成できない
-
任意の座標をクリックさせるには
-
appendChildがieだとできない？？
-
onchangeイベントを使ってspan...
-
【Tabキー】特定の範囲内だけで...
-
モーダルダイアログウィンドウ...
-
javascript 特定のタグのidの存...
-
日本語入力の禁止
-
innerHTML実行後のイベント
-
HTML:Tableタグに対し、JavaScr...
-
onclickを使わずにイベント処理...
-
アンカークリックのイベントを...
-
javascriptでスロットゲームを...
-
画像上のクリックした場所が分...
-
javascriptでCSVを呼出しvlookup
-
javascriptで編集可能不可能の...
-
Click回数を数え、規定された回...
-
子画面からwindow.openを開いた...
おすすめ情報
