wie man einen Knopf mehrmals drückt verschiedene Dinge tun

Ich versuche es so zu machen, dass jedes Mal, wenn ich auf den Ja Knopf klicke, das nächste Quadrat grün wird und wenn ich Nein klicke, geht es zurück und wird rot. Ich habe Art die Idee, die jeweils eine variable Feld, aber ich habe Probleme tatsächlichwie man einen Knopf mehrmals drückt verschiedene Dinge tun

Umsetzung Hier ist mein Code

<!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>

Quelle

2016-05-25 Brian

Ist es ok wenn ich nicht sehr effiziente Version gebe? –

Ich weiß es nicht sehr schön Codierung und unterscheidet sich sehr von Ihrem, aber es funktioniert für mich sehr gut. Ich hoffe das hilft immer noch !:

// 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>

Quelle

2016-05-25 20:21:53

Dieser ist wirklich gut und viel effizienter als meine schrecklichen wenn sonst noch Aussagen. Vielen Dank – Brian

Heh, ich bin froh, dass das auch für dich funktioniert hat. :) –

wie man einen Knopf mehrmals drückt verschiedene Dinge tun

Antwort

Verwandte Themen