モと表示された1個のボタンと穴と表示された2個のボタンを用意する。モのボタンをクリックするとそのボタンの法事は穴に変わり、残り2つの穴のどれかがモに変わる。穴のボタンをクリックされても何も変わらないプログラムをつくりたいのです。
最初の状態からモをクリックして他のボタンを変化させることはなんとかできたのですが、そのあと移動したモをおしても同じことをできるようにするのができなくて困ってます。
あと、できたらモを押して2つの穴のどちらかがモにかわるとき穴からモにかわるボタンは左側のもの、とかは決まってないでランダムだとうれしいです><
おねがいします!!!
全然違うかもしれませんが、つくってみたのものっけておきます
<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>
バグとかあったらすみません。
もっと効率のいい方法はないかな。
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>
No.3
- 回答日時:
> あと、できたらモを押して2つの穴のどちらかがモにかわるとき穴からモにかわるボタンは左側のもの、とかは決まってないでランダムだとうれしいです><
ランダムに表示を行えばいい、、、といえば簡単なんですが。
作ってみました。
innerHTMLの所をコメントアウトすれば、どこに当たりがでるのかわからなくなるので、簡単なくじ引きになると思います。
動作テストはFirefox2、IE7のみ。エラーチェックなし。
簡単にするために、onclickで呼び出す関数にthisを引数に付けました。
表示部分にちょっとトリックが入ってますが、
「ランダム数」と「何番目のボタンか」を比較して、trueなら0、falseなら1に変換して、配列の添え字として使う
ということをしています。
> モのボタンをクリックするとそのボタンの法事は穴に変わり、残り2つの穴のどれかがモに変わる。穴のボタンをクリックされても何も変わらないプログラムをつくりたいのです。
これについては行っていません。(忘れていたとも言う)
シャッフルするところで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>
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>
お探しの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ランキング
-
javascript 特定のタグのidの存...
-
<a>タグのテキストを取得
-
javascriptでCSVを呼出しvlookup
-
Click回数を数え、規定された回...
-
文字を点滅させるスクリプト ...
-
getElementsByClassについて
-
文字を一文字ずつ表示
-
window.openでタイトル名の指定
-
Excel VBA の ChangeFileAccess
-
クリックすると上に開くアコー...
-
javascriptの基本的なことだと...
-
JavaScriptで、現在日時から100...
-
ジェネレーターの作り方
-
google apps scriptの終了のさせ方
-
XMLHttpRequestでキャッシュを...
-
functionから別のfunctionを実...
-
VSCODE[Python]の設定について
-
JSONデータを50音順でソートしたい
-
javascript 変数名の連結をしたい
-
jQueryの :not() .not() が有効...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
<a>タグのテキストを取得
-
任意の座標をクリックさせるには
-
ActiveXobjectが作成できない
-
innerHTML実行後のイベント
-
Click回数を数え、規定された回...
-
HTML:Tableタグに対し、JavaScr...
-
JavaScriptでオブジェクトを取...
-
onchangeイベントを使ってspan...
-
【Tabキー】特定の範囲内だけで...
-
モーダルダイアログウィンドウ...
-
重複しないくじの作り方がわか...
-
javascript 特定のタグのidの存...
-
配列の大括弧と丸括弧はどう違う?
-
「nullまたはオブジェクトでは...
-
javascriptであるボタンを押す...
-
div要素内の全input要素をdisable
-
画像上のクリックした場所が分...
-
onclickを使わずにイベント処理...
-
javascript 作成した要素にCS...
-
RadioButtonListの表示制御
おすすめ情報