ボタンを何度も何度かクリックすると、さまざまなことが起こる

私は、はいボタンをクリックするたびに次の四角が緑色に変わり、いいえをクリックしないと、1つの正方形に戻り、赤色に変わるようにします。私は種類の各変数をボックスが、私はそれをここでボタンを何度も何度かクリックすると、さまざまなことが起こる

を実装し、実際にトラブルを抱えている作りのアイデアを持っていることは、私はそれは非常にいいコーディングではありません知っている

<!DOCTYPE html> 
 
<head> 
 
<style> 
 
div { 
 
width: 300px; 
 
height: 300px; 
 
margin-left: auto; 
 
margin-right: auto; 
 
} 
 

 
div div { 
 
width: 100px; 
 
height: 100px; 
 
outline: 1px solid; 
 
float: left; 
 
} 
 

 
h1 { 
 
    text-align: center; 
 
    vertical-align:bottom; 
 
    padding-top: 10px; 
 
} 
 
div div div { 
 
    background-color: black; 
 
} 
 

 
p { 
 
    text-align: center; 
 
} 
 
button { 
 
    margin:auto; 
 
    display: block; 
 
} 
 
</style> 
 
</head> 
 
<body> 
 
<h1> Seven Stages of Misery </h1> 
 
    <div> 
 
     <div id = "b1"><h1>1</h1></div> 
 
     <div id = "b2"><h1>2</h1></div> 
 
     <div id = "b3"><h1>3</h1></div> 
 
     <div><div></div></div> 
 
     <div><div></div></div> 
 
     <div id = "b4"><h1>4</h1></div> 
 
     <div id = "b7"><h1>7</h1></div> 
 
     <div id = "b6"><h1>6</h1></div> 
 
     <div id = "b5"><h1>5</h1></div> 
 
    </div> 
 
<p id = "question">Did you do it right?</p> 
 

 
    <button id="yes" type="button" 
 
onclick="document.getElementById('b1').style.background = 'green'"> 
 
Yes</button> 
 

 
    <button id="no" type="button" 
 
onclick="document.getElementById('b1').style.background = 'red'"> 
 
No</button> 
 
<script> 
 
var b1 = 0; 
 
var b2 = 0; 
 
var b3 = 0; 
 
var b4 = 0; 
 
var b5 = 0; 
 
var b6 = 0; 
 
var b7 = 0; 
 
var yes= document.getElementById('yes'), no = document.getElementById('no') 
 
yes.onclick if (b1 = 0 || b1 = 2) { 
 
    b1 = 1; 
 
} else if (b2 = 0 || b2 = 2) { 
 
    b2 = 1; 
 
} else if (b3 = 0 || b4 = 2) { 
 
    b3= 1; 
 
} else if (b4 = 0 || b4 = 2) { 
 
    b4= 1; 
 
} else if (b5 = 0 || b5 = 2) { 
 
    b5= 1; 
 
} else if (b6 = 0 || b6 = 2) { 
 
    b6= 1; 
 
} else if (b7 = 0 || b7 = 2) { 
 
    b7= 1; 
 
}; 
 
no.onclick if (b7 = 1) { 
 
    b7 = 2; 
 
} else if (b6 = 1) { 
 
    b6 = 2; 
 
} else if (b5 = 1) { 
 
    b5 = 2; 
 
} else if (b4 = 1) { 
 
    b4 = 2; 
 
} else if (b3 = 1) { 
 
    b3 = 2; 
 
} else if (b2 = 1) { 
 
    b2 = 2; 
 
} else if (b1 = 1) { 
 
    b1 = 2; 
 
}; 
 
if (b1 = 0) { 
 
    document.getElementById('b1').style.background = 'white'; 
 
} else if (b1 = 1) { 
 
    document.getElementById('b1').style.background = 'green'; 
 
} else { 
 
    document.getElementById('b1').style.background = 'red'; 
 
} 
 

 
</script> 
 
</body>

出典

2016-05-25 Brian

非常に効率の良いバージョンを与えても大丈夫ですか？ –

私のコードですあなたとはかなり異なるが、それは私にとってはうまくいく。私はまだ助けてくれることを願っています！：

// Buttons 
<button id="yes" type="button" 
onclick="showProgress(1)"> 
Yes</button> 

<button id="no" type="button" 
onclick="showProgress(2)"> 
No</button> 

// JavaScript function 
<script> 
function showProgress(answer) 
{ 
    var currentDiv = 0; 

    if (answer == 1) 
    { 
     for (var i = 1; i <= 7; i++) 
      if (document.getElementById("b" + i).style.backgroundColor == "" || document.getElementById("b" + i).style.backgroundColor == "red") 
      { 
       currentDiv = i; 
       break; 
      } 

     document.getElementById("b" + currentDiv).style.backgroundColor = "green"; 
    } 
    else 
    { 
     for (var i = 7; i >= 1; i--) 
      if (document.getElementById("b" + i).style.backgroundColor == "green") 
      { 
       currentDiv = i; 
       break; 
      } 

     document.getElementById("b" + currentDiv).style.backgroundColor = "red"; 
    } 
} 
</script>

出典

2016-05-25 20:21:53

これは本当に良いし、他のelse文の場合は私の恐ろしいものよりはるかに効率的です。ありがとうございました – Brian

Heh、私もあなたのために働いてうれしいです。 :) –

ボタンを何度も何度かクリックすると、さまざまなことが起こる

答えて

関連する問題