First off here is the code. I'm creating a math equation game where you are supposed to guess the operator that is missing from the equation. The operators are images that are inserted with javascript, and when one of the operator images is inserted into a div with a class of math-box, the div is raised slightly higher than all the other div tags. I'm trying to figure out why that is, I think I have a solution to make all the "math-box" classes around the same height level and that is through floating. But, I do want to want to know why is it elevating higher than all the others
window.onload = function() {
var eq = document.getElementById('equation'),
op = document.getElementById('operator'),
btn = document.getElementsByTagName('button')[0];
btn.onclick = function() {
/*
var countdown = setInterval(function(){
var timer = document.querySelector('#container h1');
var count = parseInt(timer.innerHTML);
count--;
if(count < 1){
clearInterval(countdown);
timer.innerHTML = 0;
count = 30;
}else{
timer.innerHTML = count;
}
},1000)
*/
var param = Math.round(Math.random() * (3 - 1) + 1),
operand = [], num = [],
equation = "", result = "",
mathBox = "", div = "",
skip, answer,
add = document.getElementById('add'),
sub = document.getElementById('sub'),
divi = document.getElementById('div'),
multi = document.getElementById('mul'),
mathAnswer = document.getElementById('answer');
mathAnswer.innerHTML = "";
for (var i = 0; i < param; i++) {
var randomOperator = Math.round(Math.random() * (4 - 1) + 1);
if (i === 0) {
equation += num[i] = Math.round(Math.random() * (5 - 1) + 1);
}
if (randomOperator === 1) {
operand[i] = "+";
} else if (randomOperator === 2) {
operand[i] = "-";
} else if (randomOperator === 3) {
operand[i] = "*";
} else {
operand[i] = "/";
}
equation += operand[i];
equation += num[i + 1] = Math.round(Math.random() * (5 - 1) + 1);
}
skip = Math.round(Math.random() * (operand.length - 1));
for (var i = 0; i < num.length; i++) {
div = "<div class='math-box'>" + num[i] + "</div>";
if (operand[i] && i != skip) {
switch (operand[i]) {
case "+":
div += "<div class='math-box'> <img src='https://rawgit.com/Jermaine0Forbes/Javascript-Apps/master/img/operators/add.svg' /></div>";
break;
case "-":
div += "<div class='math-box'> <img src='https://rawgit.com/Jermaine0Forbes/Javascript-Apps/master/img/operators/sub.svg' /></div>";
break;
case "*":
div += "<div class='math-box'> <img src='https://rawgit.com/Jermaine0Forbes/Javascript-Apps/master/img/operators/multi.svg' /></div>";
break;
case "/":
div += "<div class='math-box'> <img src='hhttps://rawgit.com/Jermaine0Forbes/Javascript-Apps/master/img/operators/div.svg' /></div>";
break;
}
} else if (i === skip) {
answer = operand[skip];
div += "<div class='math-box'> </div>";
}
mathBox += div;
}
4 + 7 * 3 / 9 - 2;
function needDecimal() {
var decimalDigits;
/* result = Function("return "+equation);
result = result();*/
for (var i = 0; i < num.length; i++) {
if (i == 0) {
result = num[i];
continue;
}
if (operand[i - 1] === "+") {
result += num[i];
} else if (operand[i - 1] === "-") {
result -= num[i];
} else if (operand[i - 1] === "*") {
result *= num[i];
} else if (operand[i - 1] === "/") {
result /= num[i];
} else {
continue;
}
}
decimalDigits = result - Math.floor(result);
if (decimalDigits > 0) {
result = result.toFixed(1);
}
return result;
}
result = needDecimal();
console.log(equation + " = " + result);
eq.innerHTML = mathBox + " = " + result;
op.style.display = "block";
add.onclick = function() {
if (answer === "+") {
mathAnswer.innerHTML = "<span id='true'> true</span>";
} else {
mathAnswer.innerHTML = "<span id='false'> false</span>";
}
}
sub.onclick = function() {
if (answer === "-") {
mathAnswer.innerHTML = "<span id='true'> true</span>";
} else {
mathAnswer.innerHTML = "<span id='false'> false</span>";
}
}
multi.onclick = function() {
if (answer === "*") {
mathAnswer.innerHTML = "<span id='true'> true</span>";
} else {
mathAnswer.innerHTML = "<span id='false'> false</span>";
}
}
divi.onclick = function() {
if (answer === "/") {
mathAnswer.innerHTML = "<span id='true'> true</span>";
} else {
mathAnswer.innerHTML = "<span id='false'> false</span>";
}
}
}
}* {
margin: 0;
padding: 0;
}
div {
box-sizing: border-box;
}
div:before {
content: "";
display: table;
clear: both;
}
body {
background: #b6b3aa;
font-family: arial,sans-serif
}
#container {
width: 90%;
margin: auto;
background: white;
min-height: 600px;
}
#timer {
width: 100%;
background: #162d76;
text-align: center;
color: white;
}
#timer h1 {
font-size: 44px;
padding: 5px 0;
}
.math-box {
height: 50px;
width: 50px;
border: 4px solid black;
text-align: center;
line-height: 50px;
margin: 15px 5px;
display: inline-block;
}
.math-box img {
width: 100%;
}
#equation {
font-weight: bold;
font-size: 2em;
}
#equation .math-box {
}
#operator {
font-weight: bold;
font-size: 2em;
display: none;
}
#operator .math-box:hover {
cursor: pointer;
}
#true {
color: green;
text-transform: uppercase;
}
#false {
color: red;
text-transform: uppercase;
}<div id="container">
<div id="timer"><h1>30</h1></div>
<button>click</button>
<div id="equation"></div>
<div id="operator">
<div class="math-box" id="add">
<img src="https://rawgit.com/Jermaine0Forbes/Javascript-Apps/master/img/operators/add.svg"/>
</div>
<div class="math-box" id="sub">
<img src="https://rawgit.com/Jermaine0Forbes/Javascript-Apps/master/img/operators/sub.svg"/>
</div>
<div class="math-box" id="div">
<img src="https://rawgit.com/Jermaine0Forbes/Javascript-Apps/master/img/operators/div.svg"/>
</div>
<div class="math-box" id="mul">
<img src="https://rawgit.com/Jermaine0Forbes/Javascript-Apps/master/img/operators/multi.svg"/>
</div>
</div>
<div id="answer"></div>
</div>
