dwarfdude77
In Runtime
- Messages
- 270
- Location
- USA
Okay, so I finally got most of this figured out. One problem. When I'm in the webpage, pressing the buttons, and I come to the choice between red and blue, both buttons are aligned slightly to the right? I have not coded the red button yet, but the blue button otherwise works fine!
Here is the code:
HTML:
CSS:
JavaScript:
Thanks
Here is the code:
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 onload="buttonReady()">
<p id="main">Lines of Story <br> Presented by Cameron Palmer</p>
<p id="button">
<button id="submit" align="middle" onclick="change()"> Press </button>
</p>
<div id="buttonDiv"class="buttonDiv"> </div>
</body>
</html>CSS:
Code:
#main{text-align: center;}
#button{text-align: center;}
div.buttonDiv{text-align: center;}JavaScript:
Code:
/HOUSEKEEPING (onload function)/
function buttonReady(){
var button= document.getElementById("submit");
var para= document.getElementById("main");
var div= document.getElementById("buttonDiv");
button.style.height="30px";
button.style.width="60px";
var bluesubmit = document.createElement("BUTTON");
var bluesubmitext = document.createTextNode("Press");
bluesubmit.appendChild(bluesubmitext);
div.appendChild(bluesubmit);
bluesubmit.style.color="blue";
bluesubmit.style.width="60px";
bluesubmit.style.height="30px";
bluesubmit.style.visibility="hidden";
bluesubmit.id="bsub";
}
/ THE MAIN FUNCTION /
function change() {
var button= document.getElementById("submit");
var para= document.getElementById("main");
var div= document.getElementById("buttonDiv");
switch(para.innerHTML) {
default:
para.innerHTML="You broke the game, stupid!";
break;
case "Lines of Story <br> Presented by Cameron Palmer":
para.innerHTML="This is a text-based game.";
break;
case "This is a text-based game.":
para.innerHTML="It will be very boring.";
break;
case "It will be very boring.":
para.innerHTML="It's made for old people and nerds.";
break;
case "It's made for old people and nerds.":
para.innerHTML="Ahh... text based games.";
break;
case "Ahh... text based games.":
para.innerHTML="Chapter 1<br>Which color do you like more?";
var redbtn = document.createElement("BUTTON");
var redtext = document.createTextNode("Red");
redbtn.appendChild(redtext);
div.appendChild(redbtn);
redbtn.style.color="red";
redbtn.className="redbtn";
var bluebtn = document.createElement("BUTTON");
var bluetext = document.createTextNode("Blue");
bluebtn.appendChild(bluetext);
div.appendChild(bluebtn);
bluebtn.style.color="blue";
bluebtn.className="bluebtn";
button.style.display="none";
redbtn.style.width="60px";
redbtn.style.height="30px";
bluebtn.style.width="60px";
bluebtn.style.height="30px";
bluebtn.onclick= blueFunction;
redbtn.onclick= redFunction;
break;
/THE BLUE TRACK FUNCTION/
function blueFunction() {
var button= document.getElementById("submit");
var para= document.getElementById("main");
var div= document.getElementById("buttonDiv");
var bsub=document.getElementById("bsub");
bsub.style.display="show";
bsub.onclick=blueFunction;
bsub.style.visibility="visible";
bluebtn.style.display="none";
redbtn.style.display="none";
switch(para.innerHTML){
case "Chapter 1<br>Which color do you like more?":
para.innerHTML="So... blue?";
break;
case "So... blue?":
para.innerHTML="I always hated blue.";
break;
case "I always hated blue.":
para.innerHTML="(Sniffle) <br> It..it makes me sad.";
break;
}
}
/THE RED TRACK FUNCTION/
function redFunction() {
var button= document.getElementById("submit");
var para= document.getElementById("main");
var div= document.getElementById("buttonDiv");
var redsubmit = document.createElement("BUTTON");
var redsubmitext = document.createTextNode("Press");
bluebtn.style.display="none";
redbtn.style.display="none";
redsubmit.appendChild(redsubmitext);
div.appendChild(redsubmit);
redsubmit.style.color="red";
redsubmit.style.width="60px";
redsubmit.style.height="30px";
switch(para.innerHTML) {
case "Chapter 1<br>Which color do you like more?":
para.innerHTML="Red...ah...red";
break;
case "Red...ah...red":
para.innerHTML="Christmas";
break;
}
}
}
}Thanks
