I'm trying to control the output of multiple elements from an array. I have an image and 4 separate pieces of text that need to output into specific locations. Right now, the output is right next to the button. I have tried the document.getElementById function in those spots, but it didn't work, so right now it's just plain text.
I'm an educator trying to make better tools for my students so any help really helps them.
<!DOCTYPE html>
<html>
<body>
<div class="row">
<div class="column" style="background-color:#aaa;
height:600px;">
<center><div id="card">
<div id="front">This is front of the card</div>
<div id="back"> This is the back of the card
<img src="quote.img"> </div>
</div>
</div>
<div class="column" style="
background-color:#ccc;
height:600px;">
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
/* The grid: Three equal columns that floats next to each other */
.column {
float: left;
width: 50%;
padding: 10px;
text-align: center;
font-size: 25px;
cursor: pointer;
color: white;
}
.containerTab {
padding: 20px;
color: white;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Closable button inside the container tab */
.closebtn {
float: right;
color: white;
font-size: 35px;
cursor: pointer;
}
</style>
</head>
<div style="text-align:center">
<p>Click on the clues below:</p>
</div>
<div class="row">
<div class="column" onclick="openTab('b1');" style="background:green;">
Box 1
</div>
<div class="column" onclick="openTab('b2');" style="background:blue;">
Box 2
</div>
<div class="column" onclick="openTab('b3');" style="background:red;">
Box 3
</div>
<div class="column" onclick="openTab('b4');" style="background:purple;">
Box 4
</div>
</div>
<!-- Clue Output -->
<div id="b1" class="containerTab" style="display:none;background:green">
<span onclick="this.parentElement.style.display='none'" class="closebtn">×</span>
<h2>Clue 1</h2>
<p><script type="text/javascript">document.getElementById("quote").innerHTML =
'<p>' + quote.clue1 + '</p>' </script></p>
</div>
<div id="b2" class="containerTab" style="display:none;background:blue">
<span onclick="this.parentElement.style.display='none'" class="closebtn">×</span>
<h2>Clue 2</h2>
<p>quote.clue2</p>
</div>
<div id="b3" class="containerTab" style="display:none;background:red">
<span onclick="this.parentElement.style.display='none'" class="closebtn">×</span>
<h2>Clue 3</h2>
<p>quote.clue3</p> </div>
<div id="b4" class="containerTab" style="display:none;background:purple">
<span onclick="this.parentElement.style.display='none'" class="closebtn">×</span>
<h2>Clue 4</h2>
<p>quote.clue4</p>
</div>
<script>
function openTab(tabName) {
var i, x;
x = document.getElementsByClassName("containerTab");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
document.getElementById(tabName).style.display = "block";
}
</script>
<p>
<div id="quote"></div>
<input class="Randombutton" type="button"
value="Randomize" onclick="randomImg()">
</p>
<script>
function randomImg() {
var quotes = [
{
clue1: "pizza clue 1",
clue2: "pizza clue 2",
clue3: "pizza clue 3",
clue4: "pizza clue 4",
img: "https://i.imgur.com/wauvv4p.png"
},
{
clue1: "pancake clue 1",
clue2: "pancake clue 2",
clue3: "pancake clue 3",
clue4: "pancake clue 4",
img: "https://i.imgur.com/MfFE5mT.png",
},
{
clue1: "apple clue 1",
clue2: "apple clue 2",
clue3: "apple clue 3",
clue4: "apple clue 4",
img: "https://i.imgur.com/1CdyJdS.png",
},
];
var quote = quotes[Math.floor(Math.random() * quotes.length)];
document.getElementById("quote").innerHTML =
'<p>' + quote.clue1 + '</p>' +
'<p>' + quote.clue2 + '</p>' +
'<p>' + quote.clue3 + '</p>' +
'<p>' + quote.clue4 + '</p>' +
'<img src="' + quote.img + '">';
}
</script>
</body>
</html>
<style type="text/css">
#card{
padding:10px;
margin: 30px;
text-align: center;
width: 400px;
height: 500px;
background:#fa0;
border-radius: 20px;
perspective: 700;
}
#front{
backface-visibility: hidden;
}
#back{
backface-visibility: hidden;
transform: rotateY(180deg);
}
#card:active{
transform-style: preserve-3d;
transform: rotatey(180deg);
transition: 1.3s ease;
}
}
</style>
</html>
Aucun commentaire:
Enregistrer un commentaire