dwarfdude77
In Runtime
- Messages
- 270
- Location
- USA
How can I center the javascript-created object redbtn?
html:
Javascript:
CSS:
html:
Code:
<html>
<head>
<title> Lines of Story </title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="script.js"></script>
</head>
<body>
<p id="main">Lines of Story <br> Presented by Cameron Palmer</p>
<p id="button">
<button id="button" align="middle" onclick="change()"> Press </button>
</p>
</body>
</html>Javascript:
Code:
function change() {
var p= document.getElementById("main");
switch(p.innerHTML) {
case "Lines of Story <br> Presented by Cameron Palmer":
p.innerHTML="This is a text-based game.";
break;
case "This is a text-based game.":
p.innerHTML="It will be very boring.";
break;
case "It will be very boring.":
p.innerHTML="It's made for old people and nerds.";
break;
case "It's made for old people and nerds.":
p.innerHTML="Ahh... text based games.";
break;
case "Ahh... text based games.":
p.innerHTML="Chapter 1<br>Which color do you like more?";
var redbtn = document.createElement("BUTTON");
var redtext = document.createTextNode("Red");
redbtn.appendChild(redtext);
document.body.appendChild(redbtn);
redbtn.style.color="red";
redbtn.style.
break;
}
}CSS:
Code:
#main{text-align: center;}
#button{text-align: center;}
