I have 3 concentric squares. I want to add a simple equation and asking for X in the top of the outer square (div class "grandparent") "Enter the value of x: ". The result I would like it expressed in the center (child) square inside the grandparent and parent squares. But I can't made the text in the outer square align in the top and also when adding the text to the outer square it covers the other squares inside. I tried playing with z-index but it doesn't work :/, I can only see the red outer square I tryed to make a runnable snippet but it doesn't insert it here after running it. So I leave this link. https://jsfiddle.net/olbapnairda/5d9boreL/3/
var x = window.prompt("Enter a value of X ");
var square = x => x * x
console.log("The value of square is: " + square(x));
document.querySelector(".grandparent").innerHTML = x;
document.querySelector(".child").innerHTML = square(x);body {
margin: 0;
min-height: 100vh;
}
body,
div {
display: flex;
justify-content: center;
align-items: center;
}
.grandparent {
width: 200px;
height: 200px;
background-color: red;
align-items: top;
z-index=0;
}
.parent {
width: 130px;
height: 130px;
background-color: blue;
}
.child {
width: 60px;
height: 60px;
background-color: green;
z-index: 1;
}<div class="grandparent">
<div class="parent">
<div class="child"></div>
</div>
</div>I believe this is what you are looking for.
Your code was overriding the inner HTML and therefore deleting the parent and child divs, so let's try something a bit different:
var square = x => x * x
function myFunction() {
let item = document.getElementById("xinput").value;
console.log(item);
document.getElementById("child").innerHTML = square(item);
}body {
margin: 0;
min-height: 100vh;
}
body, div {
display: flex;
justify-content: center;
align-items: center;
}
.grandparent {
padding:10px;
display: block;
justify-content: center;
align-items: center;
width: 200px;
height: 220px;
background-color: red;
z-index = 0;
position: relative;
}
.parent {
position: absolute;
top: 60%;
left: 50%;
transform: translate(-50%, -50%);
width: 130px;
height: 130px;
background-color: blue;
}
.child {
width: 60px;
height: 60px;
background-color: green;
z-index: 1;
}
#x {
margin: auto;
display: block;
width: 130px;
}
#xinput {
display: block;
text-align: center;
width:90%;
padding: 5px;
}
button {
display: block;
padding: 5px;
width: 100%;
}<div class="grandparent">
<div id="x">
<input id="xinput" placeholder="value of x" >
<button onClick="myFunction()">submit</button>
</div>
<div class="parent">
<div id="child" class="child"></div>
</div>
</div>