I progressed in my code, but now for some reason the asked minimum and maximum numbers aren't matching!
I tried to fix some numbers adding for loops. But I think I only made it worse.
I made it on Dcoder(Phone)
var rndList = [];
var rndList2 = [];
function GD() {
var a = document.getElementById("MinS").value;
var b = document.getElementById("MaxS").value;
var c = document.getElementById("Min").value;
var d = document.getElementById("Max").value;
var e = document.getElementById("PrzNo").value;
r = [a, b, c, d, e];
return r;
}
var input = document.getElementsByClassName("o");
for (i = 0; i < input.length; i++) {
input[i].addEventListener("change", function() {
results = GD();
var a = results[0];
var b = (results[1] + 1);
var c = results[2];
var d = (results[3] + 1);
var e = results[4];
function raffle(MinS, MaxS, Min, Max, PrzNo) {
function getRndInt(min, max) {
return (Math.round(Math.random() * (max - min)) + min);
}
for (i = 0; i < PrzNo; i++) {
rndList.push(getRndInt(MinS, MaxS));
}
for (i = 0; i < PrzNo; i++) {
rndList2.push(getRndInt(Min, Max));
}
}
raffle(a, b, c, d, e);
for (i = 0; i < rndList.length; i++) {
while (rndList[i] >= b) {
rndList[i] = Math.round(rndList[i] / 10);
}
}
for (i = 0; i < rndList2.length; i++) {
while (rndList2[i] >= d) {
rndList2[i] = Math.round(rndList2[i] / 10);
}
}
for (i = 0; i < rndList.length; i++) {
if (rndList[i] == 0) {
rndList[i] = 1;
}
}
for (i = 0; i < rndList2.length; i++) {
if (rndList2[i] == 0) {
rndList2[i] = 1;
}
}
for (i = 0; i < rndList.length; i++) {
window.alert("Serial: " + rndList[i] + " y Number: " + rndList2[i]);
}
});
};
.center {
display: block;
text-align: center;
width: 50%;
border: 1px dotted #f00;
padding: 8px;
margin: auto;
}
<form action="Raffle.html" method="post" name="frm">
<p class="center"> Minimum Serial: <input class="center o" type="number" name="MinS" id="MinS"><br> Maximum Serial: <input class="center o" type="number" name="MaxS" id="MaxS"><br> Minimum Number: <input class="center o" type="number" name="Min" Id="Min"><br> Maximum
Number: <input class="center o" type="number" name="Max" id="Max"><br> Amount of Prizes: <input class="center o" type="number" name="PrzNo" id="PrzNo"></p>
</form>
I hope you can find what's wrong. I have another question, do you know some app or web page that reorganize your code? For making it more beautiful.
Thanks in advance for any replies. I am new to JavaScript and have got this far in calculating 2 results that I require. My question is how do I add both results together?
Please see first result below:
$(document).ready(function() {
function checkSum(e) {
var result = 0;
$(".checksum").each(function() {
var i = 0;
if ($(this).val() != "") {
i = parseFloat($(this).val());
}
result = result + i;
});
$("#resultsum").html(result * 60.60);
}
checkSum();
$(".checksum").bind("keyup", checkSum);
});
and this is the second:
$(document).ready(function() {
function checkSum2(e) {
var result2 = 0;
$(".checksum2").each(function() {
var j = 0;
if ($(this).val() != "") {
j = parseFloat($(this).val());
}
result2 = result2 + j;
});
$("#resultsum2").html(result2 * 14.88);
}
checkSum2();
$(".checksum2").bind("keyup", checkSum2);
});
Just add one line in the end of functions:
$("#resultsum3").html($("#resultsum").text() + $("#resultsum2").text());
$(document).ready(function() {
function checkSum(e) {
var result = 0;
$(".checksum").each(function() {
var i = 0;
if ($(this).val() != "") {
i = parseFloat($(this).val());
}
result = result + i;
});
$("#resultsum").html(result * 60.60);
$("#resultsum3").html($("#resultsum").text() + $("#resultsum2").text());
}
checkSum();
$(".checksum").bind("keyup", checkSum);
function checkSum2(e) {
var result2 = 0;
$(".checksum2").each(function() {
var j = 0;
if ($(this).val() != "") {
j = parseFloat($(this).val());
}
result2 = result2 + j;
});
$("#resultsum2").html(result2 * 14.88);
$("#resultsum3").html($("#resultsum").text() + $("#resultsum2").text());
}
checkSum2();
$(".checksum2").bind("keyup", checkSum2);
});
I've combined your snippets in to one to remove the redundant code you have. This approach will allow you to add more checksums in future (.checksum3?) and also makes sure your calculation logic is same for all.
The result is calculated in to new element whenever any of the checksums change. Try the snippet below:
// function to calculate checksum
// used for both individual results as well as for total
function calcChecksum(elements) {
let result = 0;
elements.each( function(index, ele) {
result = result + (parseFloat($(ele).val()) || 0)
});
return result;
}
// update total result
function updateTotal() {
let total = calcChecksum($('.result'));
$('#resultsum_total').val(total);
}
$(document).ready(function() {
// generate function for each set of checksum inputs
function genCheckSumFn(inputSel, outputSel, multiplier) {
return () => {
const result = calcChecksum($(inputSel));
$(outputSel).val(result * multiplier);
updateTotal();
}
}
//checkSum bindings
$(".checksum").bind("keyup",
genCheckSumFn('.checksum','#resultsum',60.60)
);
$(".checksum2").bind("keyup",
genCheckSumFn('.checksum2','#resultsum2',14.88)
);
// trigger initial calculation
$(".checksum").trigger('keyup');
$(".checksum2").trigger('keyup');
});
.checksum,
.checksum2{
display: block;
}
.box {
padding:10px 0px;
}
.box div {
margin-top:5px;
}
.box.results input {
color: #FFA500;
border:0px;
font-size: 14px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">
Checksum
<input class="checksum" value="10">
<input class="checksum" value="5">
Checksum(2)
<input class="checksum2" value="20">
<input class="checksum2" value="15">
<div>
<div class="box results">
<div> Resultsum:
<input id="resultsum" class="result" readonly> </div>
<div> Resultsum(2):
<input id="resultsum2" class="result" readonly> </div>
<div> Resultsum(Total): <input id="resultsum_total" readonly> </div>
</div>
I have recently been working on a project that has resulted in countless hours of frustration. The task is to create a Webpage that calculates a user's total cost depending on the different radio buttons / check boxes they select.
So, assuming all my other functions and constants are correct, is there anything wrong with my function or the calling of my function.
HTML
<input type = "button" value = "Submit" onclick="calculate();">
<table>
<tr><td>Workshop Total:</td> <td><div id="divWorkshopTotal"></div></td></tr>
<tr><td>Lodging Total:</td> <td><div id="divLodgingTotal"></div></td></tr>
<tr><td>Discount Amount:</td> <td><div id="divDiscount"></div></td></tr>
<tr><td>Sales Tax Amount:</td> <td><div id="divSalesTaxAmount"></div></td></tr>
<tr><td>Total Due:</td> <td><div id="divTotal"></div></td></tr>
</table>
JavaScript
function $(elementName){
return document.getElementById(elementName);
}
function calculate(){
clearOutput();
if (checkWorkshopSelected() > 3){
$("divWorkshopError").innerHTML = "* Selected workshops exceeds maximum of " + MAXIMUM_WORKSHOPS_SELECTED;
return;
} else if (checkWorkshopSelected() == 0){
$("divWorkshopError").innerHTML = "* No workshop(s) selected";
return;
}
var workshopCost = calculateWorkshopTotalCost();
var lodgingCost = calculateLodgingCost();
var subtotal = workshopCost + lodgingCost;
var discountRate = calculateDiscountRate();
var discountAmount = subtotal * discountRate;
if ($("chkTaxExempt").checked == false){
var salesTaxAmount = (subtotal - discountAmount) * SALES_TAX_RATE;
}
var totalCost = subtotal - discountAmount + salesTaxAmount;
$("divWorkshopTotal").innerHTML = workshopCost;
$("divLodgingTotal").innerHTML = lodgingCost;
$("divDiscount").innerHTML = discountAmount;
$("divSalesTaxAmount").innerHTML = salesTaxAmount;
$("divTotal").innerHTML = totalCost;
}
Please check out the code and only ask small doubts in comments. Otherwise please make a new question.
var SALES_TAX_RATE = 0.1,
MAXIMUM_WORKSHOPS_SELECTED = 3;
var data = {
productA: 10,
productB: 20,
productC: 25,
};
var prod = document.getElementsByClassName('prod'),
tax = $("tax"),
workshopTotal = $("workshopTotal"),
lodgingTotal = $("lodgingTotal"),
discount = $("discount"),
salesTaxAmount = $("salesTaxAmount"),
total = $("total"),
workshopError = $("workshopError"),
out = document.getElementsByClassName('out');
$("inputButton").addEventListener("click", calculate);
clearOutput();
function $(elementName){
return document.getElementById(elementName);
}
function calculate () {
clearOutput();
if (checkWorkshopSelected() >= MAXIMUM_WORKSHOPS_SELECTED) {
workshopError.innerHTML = "* Selected workshops exceeds maximum of " + MAXIMUM_WORKSHOPS_SELECTED;
return;
} else if (checkWorkshopSelected() == 0) {
workshopError.innerHTML = "* No workshop(s) selected";
return;
}
var workshopCost = calculateWorkshopTotalCost();
var lodgingCost = calculateLodgingCost();
var subtotal = workshopCost + lodgingCost;
var discountRate = calculateDiscountRate();
var discountAmount = subtotal * discountRate;
var salesTax = 0;
if (tax.checked == false){
salesTax = (subtotal - discountAmount) * SALES_TAX_RATE;
}
var totalCost = subtotal - discountAmount + salesTax;
outputPrice(workshopTotal, workshopCost);
outputPrice(lodgingTotal, lodgingCost);
outputPrice(discount, discountAmount);
outputPrice(salesTaxAmount, salesTax);
outputPrice(total, totalCost);
}
function clearOutput () {
for (var i=0; i<out.length; i++) {
var o = out[i];
o.innerHTML = "0,00"
}
workshopError.innerHTML = "";
}
function checkWorkshopSelected () {
var s = 0;
for (var i=0; i<prod.length; i++) {
var p = prod[i];
if (p.checked) s += 1;
}
return s;
}
function calculateLodgingCost () {
return 5;
}
function calculateWorkshopTotalCost () {
var t = 0;
for (var i=0; i<prod.length; i++) {
var p = prod[i];
if (p.checked) t += data[p.id];
}
return t;
}
function calculateDiscountRate () {
return 0.05;
}
function outputPrice (e, p) {
e.innerHTML = p.toFixed(2);
}
p {
line-height: 14px;
width: 200px;
}
#inputButton {
height: 32px;
margin-bottom: 10px;
}
#workshopError {
color: red;
float: right;
margin-bottom: 20px;
}
.prod + label {
font-weight: bold;
}
.out {
display: inline-block;
padding: 4px 12px;
margin: -6px 0;
background: #fff;
border: 1px solid #999;
border-radius: 3px;
font-family: monospace;
float: right;
}
.out:before {
content: "$";
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<p><input type="checkbox" id="productA" class="prod"><label>Workshop A - 10</label></p>
<p><input type="checkbox" id="productB" class="prod"><label>Workshop B - 20</label></p>
<p><input type="checkbox" id="productC" class="prod"><label>Workshop C - 25</label></p>
<p><input type="checkbox" id="tax"><label>Tax 10%</label></p>
<p><input id="inputButton" type="button" value="Submit"><label id="workshopError"></label></p>
<p><label>Workshop Total:</label><span class="out" id="workshopTotal"></span></p>
<p><label>Lodging Total:</label><span class="out" id="lodgingTotal"></span></p>
<p><label>Discount Amount:</label><span class="out" id="discount"></span></p>
<p><label>Sales Tax Amount:</label><span class="out" id="salesTaxAmount"></span></p>
<p><label>Total Due:</label><span class="out" id="total"></span></p>
</body>
</html>
I want to test how many red/black/even/odd comes up in a row in the game of roulette.
The following function will loop through a list of spins n and give how many times in a row red won and lost. The same function can be used for all the other types of even wins however the check is different
color[n[i]] == "red"
I want to pass a different check into this function to test for evens
n[i]%2 == 0
Can this be done?
function test(n)
{
var wins = parseInt(0);
var losses = parseInt(0);
for(var i=0;i<n.length;i++)
{
if(color[n[i]] == "red")
{
wins += 1
losses = 0
}
else
{
wins = 0
losses += 1
}
}
.
.
.
PART 2
This is the full code. If you click the 'Enter Spins' button and the 'Toggle Number Pad' button, then add the number 8 twice, then 3 alerts will display.
I can not seem to get the the 3 messages to show up on separate lines. I tried some examples, but it always adds the line return before the last message.
Do you know how to get the multiple messages on separate lines?
<html>
<head>
<style>
.bntcal {
padding: 10px 10px 10px 10px;
margin: 10px;
}
.bntcaladd {
padding: 10px 10px 10px 10px;
margin: 10px;
}
.bntshow{
padding: 5px 5px 5px 5px;
margin: 5px;
width: 10%;
}
.spanhide {
display: none;
}
.bell {
float:left;
display: none;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
var wheel0 = [37,32,15,19,4,21,2,25,17,34,6,27,13,36,11,30,8,23,10,5,24,16,33,1,20,14,31,9,22,18,29,7,28,12,35,3,26];
var wheel00 = [37,28,9,26,30,11,7,20,32,17,5,22,34,15,3,24,36,13,1,38,27,10,25,29,12,8,19,31,18,6,21,33,16,4,23,35,14,2];
var wheel = wheel00;
var wColor = "";
var numbers = [];
var color = [];
$(document).ready(function(){
// --- Menu Buttons
$("#enterSpins").click(function(){
$("#divSpins").show();
$("#divAlerts").hide();
$("#divHowTo").hide();
});
$("#setAlert").click(function(){
$("#divAlerts").show();
$("#divSpins").hide();
$("#divHowTo").hide();
});
$("#howTo").click(function(){
$("#divHowTo").show();
$("#divSpins").hide();
$("#divAlerts").hide();
});
// ---- Sub Buttons
$("#enterPad").click(function(){
$("#showSpinsPad").toggle();
$("#clearBox").toggle();
$("#clearBox1").toggle();
if(!$("#showSpinsPad").is(":hidden"))
{
$("#spins").prop("disabled", true)
}
else
{
$("#spins").prop("disabled", false)
}
});
$(".bntcal").click(function(){
$("#currentSpin").text($("#currentSpin").text()+$(this).val())
if ($("#currentSpin").text().length > 2)
{
$("#currentSpin").text($(this).val())
}
});
$("#clear").click(function(){
$("#currentSpin").text("")
});
$("#add").click(function(){
getWheel()
currentSpin = $("#currentSpin").text()
if(currentSpin.length > 0)
{
if ($("#spins").val().length > 0)
{
$("#spins").val($("#spins").val() + ", ");
}
if(parseInt(currentSpin)<37)
{
$("#spins").val($("#spins").val() + currentSpin);
}
if(parseInt(currentSpin) == 37)
{
$("#spins").val($("#spins").val() + "0");
}
if(parseInt(currentSpin) == 38)
{
$("#spins").val($("#spins").val() + "00");
}
if(parseInt(currentSpin)>38)
{
$("#spins").val($("#spins").val() + "0");
}
$("#currentSpin").text("")
}
var n = GetUserNumbers();
run(n)
});
$("#undo").click(function(){
var n = GetUserNumbers();
if (n.length>0)
{
n.pop();
}
$("#spins").val(n)
run(n)
});
$("#clean").click(function(){
$("#spins").val("")
});
$("#run").click(function(){
var n = GetUserNumbers();
run(n)
});
});
// ---------------------------------------------------------------
// --------------------- FUNCTIONS -------------------------------
// ---------------------------------------------------------------
function run(n)
{
$("#alert").text("")
// Evens
var conditions = ['color[n] == "red"','color[n] == "black"','n%2 == 0 && n<37','n%2 == 1 && n<37','n > 18 && n<37','n < 19 && n>0']
var checklocation = ['Red','Black','Even','Odd','High','Low']
var idWins = "#evenwin"
var idLosses = "#evenloss"
checkCondition(n, conditions, checklocation, idWins, idLosses)
// Dozens
var conditions = ['n%3 == 1','n%3 == 2','n%3 == 0','n>=1 && n<=12','n>=13 && n<=24','n>=25 && n<=36']
var checklocation = ['Row 1 [1,2,3..]','Row 2 [2,3,4..]','Row 2 [3,6,9..]','Dozen 1 [1-12]','Dozen 1 [13-24]','Dozen 1 [25-36]']
var idWins = "#dozenwin"
var idLosses = "#dozenloss"
checkCondition(n, conditions, checklocation, idWins, idLosses)
}
function checkCondition(n, conditions, checklocation, idWins, idLosses)
{
for(var i=0; i<conditions.length; i++)
{
var check = function(n){ if(conditions[i]){ return true; } else { return false; }}
var wins = checkWins(n, check)
var losses = checkLosses(n, check)
if(wins >= $(idWins).val()) { $("#alert").text($("#alert").text()+" "+checklocation[i]+" loses "+wins+" times in a rows.<br/>")}
if(losses >= $(idLosses).val()) { $("#alert").text($("#alert").text()+" "+checklocation[i]+" loses "+losses+" times in a rows.<br/>")}
}
}
function checkWins(n, condition)
{
var wins = parseInt(0);
for(var i=0;i<n.length;i++)
{
if(condition(n[i]))
{
wins += 1
}
else
{
wins = 0
}
}
return wins
}
function checkLosses(n, condition)
{
var losses = parseInt(0);
for(var i=0;i<n.length;i++)
{
if(condition(n[i]))
{
losses = 0
}
else
{
losses += 1
}
}
return losses
}
$.fn.multiline = function(text){
this.text(text);
this.html(this.html().replace(/\n/g,'<br/>'));
return this;
}
function getWheel()
{
if($("input[name=wheel]:checked").val()=="0")
{
wheel = wheel0
}
else
{
wheel = wheel00
}
color = GetColor(wheel)
}
function reset()
{
evenwins = parseInt(0);
}
function GetUserNumbers()
{
var n = $("#spins").val().split(",");
for(var x=0; x<n.length; x++)
{
if(n[x].trim() == "0")
{
n[x] = "37";
}
if(n[x].trim() == "00")
{
n[x] = "38";
}
n[x] = parseInt(n[x].trim());
}
return n;
}
function GetColor(wheel)
{
var color = Array();
if(wheel.length==37)
{
color[1] = "red";
color[2] = "black";
color[3] = "red";
color[4] = "black";
color[5] = "red";
color[6] = "black";
color[7] = "red";
color[8] = "black";
color[9] = "red";
color[10] = "black";
color[11] = "black";
color[12] = "red";
color[13] = "black";
color[14] = "red";
color[15] = "black";
color[16] = "red";
color[17] = "black";
color[18] = "red";
color[19] = "red";
color[20] = "black";
color[21] = "red";
color[22] = "black";
color[23] = "red";
color[24] = "black";
color[25] = "red";
color[26] = "black";
color[27] = "red";
color[28] = "black";
color[29] = "black";
color[30] = "red";
color[31] = "black";
color[32] = "red";
color[33] = "black";
color[34] = "red";
color[35] = "black";
color[36] = "red";
color[37] = "green";
}
if(wheel.length==38)
{
color[1] = "red";
color[2] = "black";
color[3] = "red";
color[4] = "black";
color[5] = "red";
color[6] = "black";
color[7] = "red";
color[8] = "black";
color[9] = "red";
color[10] = "black";
color[11] = "black";
color[12] = "red";
color[13] = "black";
color[14] = "red";
color[15] = "black";
color[16] = "red";
color[17] = "black";
color[18] = "red";
color[19] = "red";
color[20] = "black";
color[21] = "red";
color[22] = "black";
color[23] = "red";
color[24] = "black";
color[25] = "red";
color[26] = "black";
color[27] = "red";
color[28] = "black";
color[29] = "black";
color[30] = "red";
color[31] = "black";
color[32] = "red";
color[33] = "black";
color[34] = "red";
color[35] = "black";
color[36] = "red";
color[37] = "green";
color[38] = "green";
}
return color;
}
</script>
</head>
<body>
Toggle Displays</br><br/>
<div >
<button class="bntshow" id="enterSpins">Enter Spins</button><br/>
<button class="bntshow" id="setAlert">Set Alerts</button><br/>
<button class="bntshow" id="howTo">How To</button><br/>
<input type="radio" name="wheel" value="0">0 Wheel<br/>
<input type="radio" name="wheel" value="00" checked>00 Wheel<br/>
</div><br/>
<div id="alert"></div>
<hr>
<!-- Enter Spins -->
<span class="spanhide" id="divSpins">
<button class="bntcaladd" id="enterPad">Toggle Numberpad</button><br/>
<br/>
<span class="spanhide" id='showSpinsPad'>
<br/>
<button class="bntcal" id="calculator" value="0">0</button>
<button class="bntcal" id="calculator" value="00">00</button><br/>
<button class="bntcal" id="calculator" value="1">1</button>
<button class="bntcal" id="calculator" value="2">2</button>
<button class="bntcal" id="calculator" value="3">3</button><br/>
<button class="bntcal" id="calculator" value="4">4</button>
<button class="bntcal" id="calculator" value="5">5</button>
<button class="bntcal" id="calculator" value="6">6</button><br/>
<button class="bntcal" id="calculator" value="7">7</button>
<button class="bntcal" id="calculator" value="8">8</button>
<button class="bntcal" id="calculator" value="9">9</button><br/>
<button class="bntcaladd" id="clear">Clear</button>
<button class="bntcaladd" id="add">ADD</button><span id="currentSpin"></span>
<br/>
<button class="bntcaladd" id="undo">Undo</button><br/>
<span id="currentSpin"></span>
<br/>
</span>
<span id="clearBox">Enter roulette numbers separated by a comma</span><br/>
<textarea rows="10" cols="50" id="spins"></textarea><br/><br/>
<span id="clearBox1">
<button id="clean">Clear Box</button>
<button id="run">Run</button>
</span>
</span>
<!-- Set Alerts -->
<span class="spanhide" id="divAlerts">
<h2>Evens</h2>
<input type="text" id="evenwin" value="2"> Wins in a row<br>
<input type="text" id="evenloss" value="6"> Losses in a row<br>
<br><br>
<h2>Dozens</h2>
<input type="text" id="dozenwin" value="6"> Wins in a row<br>
<input type="text" id="dozenloss" value="6"> Losses in a row<br>
<br><br>
</span>
<!-- How To -->
<span class="spanhide" id="divHowTo">
How To
</span>
</body>
</html>
Yes, absolutely!
In JavaScript, you are capable of saving functions to variables, and hence pass them around as parameters; this is one of the most powerful aspects of JavaScript. So for example, if you want to check if the color is red, you can write a condition test function that returns true/false as follows:
var checkColor = function(nElement){
var color = color(nElement);
if(color == 'red'){
return true;
}
else if(color == 'black'){
return false;
}
}
So now, you have a variable checkColor that is a function that checks if a color is red or not. Now, you can pass this function into your test function like this:
function test(n,testFunc)
{
var wins = parseInt(0);
var losses = parseInt(0);
for(var i=0;i<n.length;i++)
{
if(testFunc(n[i])) //testFunc = checkColor in this case since we passed in checkColor
{
wins += 1
losses = 0
}
else
{
wins = 0
losses += 1
}
}
test(n,checkColor); //This is where you pass in checkColor as your test func
And so for example, if we wanted to add another test for an even, we could write a function as so:
var checkEven = function(nElement){
if(nElement % 2 == 0){
return true;
}
else{
return false;
}
}
And we could simply run test using this new condition like:
test(n,checkEven);
And so from here, you should get the idea of how to create a test function and pass it into a universal test function. If you need clarification, don't hesitate to ask!
Simply pass the condition as function.
Javascript:
const myFunctionByCondition = (conditionFn) => {
const index = 10
if (conditionFn(index)) return "Condition applies"
return "Condition does not apply"
}
const val = myFunctionByCondition(i => i >= 10)
Typescript:
const myFunctionByCondition = (conditionFn: (i: number) => boolean) => {
const index = 10
if (conditionFn(index)) return "Condition applies"
return "Condition does not apply"
}
const val = myFunctionByCondition(i => i >= 10)
I'm trying to make it so that each time I click the yes button the next square turns green and when I click no it goes back one square and turns red. I kind of have the idea of making each box a variable but I'm having trouble actually implementing it
Here is my 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>
I know it is not very nice coding and differs a lot from yours but it works for me very well. I hope that still helps!:
// 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>