div onclickはyesまたはnoを入力します（yesの場合はdivを別の色に変更します）

-1

私は実際に患者を助けるかどうかにかかわらず、ユーザーデータを受信するWebサイトで作業しています。div onclickはyesまたはnoを入力します（yesの場合はdivを別の色に変更します）

私は実際にこれを始める方法を知らず、私は数週間にわたって1つのシンプルな機能に慣れていました。

例：正方形をクリックすると、はいまたはいいえと色が黄色に変わります。黄色い四角をクリックすると、もう一度yesまたはnoを入力します。元の色に戻します。

function myFunction() { 
 
    if (confirm("Press a button!") == true) { 
 
     document.getElementByClass("stileone").style.backgroundColor = "lightblue"; 
 
    } 
 
    else { 
 
     txt = "You pressed Cancel!"; 
 
    } 
 

 

 
if (confirm('Are you sure you want to save this thing into the database?') == true) { 
 
    // Save it! 
 
} else { 
 
    // Do nothing! 
 
}

.foo { 
 
    float: left; 
 
    width: 30px; 
 
    height: 30px; 
 
    margin: 5px; 
 
    border: 1px solid rgba(0, 0, 0, .2); 
 
    border-radius: 25%; 
 
} 
 

 
.blue { 
 
    background: #13b4ff; 
 
} 
 

 
.whole { 
 
    float: left; 
 
    width: 900px; 
 
    height: 900px; 
 
    margin: 5px; 
 
    border: 1px solid rgba(0, 0, 0, .2); 
 
    
 
} 
 
.purple { 
 
    background: #ab3fdd; 
 
} 
 

 
.wine { 
 
    background: #ae163e; 
 
}

<!doctype html> 
 
<head> 
 
</head> 
 
    <body> 
 
    <div class = "whole"> 
 

 
     <div id = "centerbox1" class="foo blue">A1</div> 
 
     <div id = "centerbox2"class="foo purple">A2</div> 
 
     <div id = "centerbox3"class="foo wine">A3</div> 
 
     <br> 
 
     <br> 
 
     <div id = "centerbox4"class="foo blue">B1</div> 
 
     <div id = "centerbox5"class="foo purple">B2</div> 
 
     <div id = "centerbox6"class="foo wine">B3</div> 
 

 
    </div> 
 
    </body> 
 
</html>

出典

2017-12-12 Ivan Phua You Wen

すべてのイベントはありません。 [MDN EventTarget]（https://developer.mozilla.org/de/docs/Web/API/EventTarget/addEventListener） –

1.関数を呼び出します。 2.実行したときに表示されるエラーメッセージを読みます。 – Quentin

あなたは 'my'Function'を' div'要素に添付していません。 –

-1

私はあなたが達成しようとしている、あなたはあなたの関数を呼び出すためにイベントを使用していないスタートのために、あなたのコード内の多くの過ちを犯しているものはかなりよく分かりません。あなたの最初のボックスをクリックして、YesまたはCancelをクリックしたかどうかを確認してください。ここで

$('#centerbox1').on('click', function() { 
 
    $(this).css('background', '#13b4ff'); 
 
    if (confirm('Do you want to do this ?')) { 
 
     $(this).css('background', 'yellow'); 
 
    } 
 
})

.foo { 
 
    float: left; 
 
    width: 30px; 
 
    height: 30px; 
 
    margin: 5px; 
 
    border: 1px solid rgba(0, 0, 0, .2); 
 
    border-radius: 25%; 
 
} 
 

 
.blue { 
 
    background: #13b4ff; 
 
} 
 

 
.whole { 
 
    float: left; 
 
    width: 900px; 
 
    height: 900px; 
 
    margin: 5px; 
 
    border: 1px solid rgba(0, 0, 0, .2); 
 
    
 
} 
 
.purple { 
 
    background: #ab3fdd; 
 
} 
 

 
.wine { 
 
    background: #ae163e; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <div class = "whole"> 
 

 
     <div id = "centerbox1" class="foo blue">A1</div> 
 
     <div id = "centerbox2" class="foo purple">A2</div> 
 
     <div id = "centerbox3" class="foo wine">A3</div> 
 
     <br> 
 
     <br> 
 
     <div id = "centerbox4" class="foo blue">B1</div> 
 
     <div id = "centerbox5" class="foo purple">B2</div> 
 
     <div id = "centerbox6" class="foo wine">B3</div> 
 

 
    </div>

出典

2017-12-12 10:26:27 Zvezdas1989

ありがとうございました！私はあなたの肩にたくさんのストレスを与えました。申し訳ありませんが多くの間違い、私はちょうどjavascriptを始めたと私は本当に、本当に混乱していた。それにもかかわらず、あなたは大きな助けになりました！ @ zvezdas1989 –

@IvanPhuaYouWen助けても問題ありません！ – Zvezdas1989

あなたの問題のために純粋Javascriptソリューションです。

function myFunction() { 
 
if (confirm("Press a button!") == true) { 
 
    if(this.style.backgroundColor == "yellow") 
 
    this.style.backgroundColor = ""; 
 
    else 
 
    this.style.backgroundColor = "yellow"; 
 
} else { 
 
    txt = "You pressed Cancel!"; 
 
} 
 

 
    if (confirm('Are you sure you want to save this thing into the database?') == true) { 
 
    // Save it! 
 
    } else { 
 
    // Do nothing! 
 
    } 
 
} 
 

 
var blocks = document.getElementsByClassName("foo"); 
 
for (i = 0; i < blocks.length; i++) { 
 
    blocks[i].addEventListener("click", myFunction); 
 
}

.foo { 
 
    float: left; 
 
    width: 30px; 
 
    height: 30px; 
 
    margin: 5px; 
 
    border: 1px solid rgba(0, 0, 0, .2); 
 
    border-radius: 25%; 
 
} 
 

 
.blue { 
 
    background: #13b4ff; 
 
} 
 

 
.whole { 
 
    float: left; 
 
    width: 900px; 
 
    height: 900px; 
 
    margin: 5px; 
 
    border: 1px solid rgba(0, 0, 0, .2); 
 
} 
 

 
.purple { 
 
    background: #ab3fdd; 
 
} 
 

 
.wine { 
 
    background: #ae163e; 
 
}

<div class="whole"> 
 
    <div id="centerbox1" class="foo blue">A1</div> 
 
    <div id="centerbox2" class="foo purple">A2</div> 
 
    <div id="centerbox3" class="foo wine">A3</div><br><br> 
 

 
    <div id="centerbox4" class="foo blue">B1</div> 
 
    <div id="centerbox5" class="foo purple">B2</div> 
 
    <div id="centerbox6" class="foo wine">B3</div> 
 
</div>

出典

2017-12-12 10:33:49

ありがとう！しかし、もし私がさらにそれを4色で循環させるように修正するにはどうすればいいのでしょうか？例：青は黄色に、赤色は青色に戻りますか？ –

さらに条件を追加することでそれを行うことができます。ここで黄色を見つけると背景がリセットされますが、必要に応じて別の色を追加できます。 –

もう一度ご迷惑をおかけして申し訳ありません...下のコードを確認する手助けをすれば幸いですか？私は以下のリンクに別の1つを掲載しましたが、なぜそれが表示され、確認されたら色が変わらないのか分かりません。ありがとう！ https://stackoverflow.com/questions/47776790/why-doesnt-the-colour-of-my-boxes-change-when-prompted-and-confirmed –

-1

これかもしれ役に立つ

$(document).click("foo",function(event) { 
 
    
 
    var elm=event.target; 
 
    
 
    if(confirm("Set this to yellow!")==true) 
 
    { 
 
     elm.className+=" yel-div"; 
 
    } 
 
    else 
 
    { 
 
     elm.classList.remove("yel-div"); 
 
    } 
 
});

.foo { 
 
    float: left; 
 
    width: 30px; 
 
    height: 30px; 
 
    margin: 5px; 
 
    border: 1px solid rgba(0, 0, 0, .2); 
 
    border-radius: 25%; 
 
} 
 

 
.blue { 
 
    background: #13b4ff; 
 
} 
 

 
.whole { 
 
    float: left; 
 
    width: 900px; 
 
    height: 900px; 
 
    margin: 5px; 
 
    border: 1px solid rgba(0, 0, 0, .2); 
 
    
 
} 
 
.purple { 
 
    background: #ab3fdd; 
 
} 
 

 
.wine { 
 
    background: #ae163e; 
 
} 
 
.yel-div 
 
{ 
 
    background:yellow; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class = "whole"> 
 

 
<div id = "centerbox1" class="foo blue" >A1</div> 
 
<div id = "centerbox2"class="foo purple">A2</div> 
 
<div id = "centerbox3"class="foo wine">A3</div> 
 
<br> 
 
<br> 
 
<div id = "centerbox4"class="foo blue">B1</div> 
 
<div id = "centerbox5"class="foo purple">B2</div> 
 
<div id = "centerbox6"class="foo wine">B3</div> 
 
</div>

出典

2017-12-12 10:54:28

div onclickはyesまたはnoを入力します（yesの場合はdivを別の色に変更します）

答えて

関連する問題