function STORYNAME() {
name = document.getElementById('a').value;
var x = document.getElementById('RB');
var y = document.getElementById('M');
var z = document.getElementById('E');
if (x.checked == true) {
role1 = name;
};
else {
role1 = "Frodo";
};
if (y.checked == true) {
role2 = name;
};
else {
role2 = "Gandalf";
};
if (z.checked == true) {
role3 = name;
};
else {
role3 = "Sauron";
};
document.getElementById("story").innerHTML = "When the eccentric hobbit Bilbo Baggins leaves his home in the Shire, he gives his greatest treasure to his heir " + role1 + ": A magic ring that makes its wearer invisible and . Because of the difficulty Bilbo has in giving the ring away, his friend the wizard " + role2 + " the Grey suspects that the ring is more than it appears. Some years later, " + role2 + " reveals to " + role1 + " that the ring is in fact the One Ring, forged by " + role3 + " the Dark Lord thousands of years before to enable him to dominate and enslave all of Middle-earth. " + role2 + " tells " + role1 + " that the Ring must be destroyed to defeat " + role3 + "'s evil, but he also warns him that the Enemy has learned of the Ring's whereabouts from the creature Gollum and will seek to find it and kill its bearer. Despite the danger and hopelessness of the quest, " + role1 + " accepts the burden and resolves to take the Ring to the safety of the elven stronghold of Rivendell."
}
The innerHTML is not printing in the following. Here is the HTML:
<html>
<head>
<script type="text/javascript" src="javascript.js"></script>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<center><img id="Title" src="http://i.imgur.com/AANaMuQ.png"></center>
<div class="para1">
<h3>Plot Summary</h3>
The future of civilization rests in the fate of the One Ring,
which has been lost for centuries. Powerful forces are unrelenting in their search for it.
But fate has placed it in the hands of a young Hobbit named Frodo Baggins,
who inherits the Ring and steps into legend.
A daunting task lies ahead for Frodo when he becomes the Ringbearer -
to destroy the One Ring in the fires of Mount Doom where it was forged.
<br>
</div>
<div class="para2">
<h3>Inputs</h3>
<p> Input your character's name here:</p>
<input type="text" id="a"/>
<p> Choose your character's role:</p>
<input type="radio" name="role" id="RB">Ringbearer</input><br>
<input type="radio" name="role" id="M">Wizard</input><br>
<input type="radio" name="role" id="E">Evil Overlord</input><br><br>
<input value="Begin Your Journey" type="button" onclick="STORYNAME()">
</div>
<div class="para2">
<br><img id="img1" src="shire5.jpg">
<p id="story">
ASDASDASD.
</p>
</div>
</body>
I tried all ways, its not printing for some reason. The innerHTML is not showing in the id i assigned it to. Anyone know why? I also have CSS Here it is in case:
<style>
@font-face {
font-family: Ringbearer;
src: url(Ringbearer.TTF);
}
.para1 {
font-family: Ringbearer;
text-align: center;
background-color: #FFFF75;
border: solid 4px black;
font-size: 30px;
width: 75%;
margin: 0 auto 10px;
background-image:url("Monaco_scroll_background.jpg");
}
.para2 {
font-family: Ringbearer;
text-align: center;
background-color: #FFFF75;
border: solid 4px black;
width: 75%;
margin: 0 auto 10px;
background-image:url("Monaco_scroll_background.jpg");
}
body {
background-image:url("forest.jpg");
background-attachment:fixed;
background-repeat: no-repeat;
background-size: 100% 100%;
}
html {
height: 100%
}
#Title {
background-size: 100% 100%;
}
#a {
margin: 0 auto;
}
#img1 {
border: solid 4px black;
}
You're putting semi-colons on everything, errors occurred. Replace your JS with the code below (your code fixed)
EDIT: I added a snippet, you're welcome
JS
function STORYNAME() {
name = document.getElementById('a').value;
var x = document.getElementById('RB');
var y = document.getElementById('M');
var z = document.getElementById('E');
if (x.checked === true) {
role1 = name;
}
else {
role1 = "Frodo";
}
if (y.checked === true) {
role2 = name;
}
else {
role2 = "Gandalf";
}
if (z.checked === true) {
role3 = name;
}
else {
role3 = "Sauron";
}
document.getElementById("story").innerHTML = "When the eccentric hobbit Bilbo Baggins leaves his home in the Shire, he gives his greatest treasure to his heir " + role1 + ": A magic ring that makes its wearer invisible and . Because of the difficulty Bilbo has in giving the ring away, his friend the wizard " + role2 + " the Grey suspects that the ring is more than it appears. Some years later, " + role2 + " reveals to " + role1 + " that the ring is in fact the One Ring, forged by " + role3 + " the Dark Lord thousands of years before to enable him to dominate and enslave all of Middle-earth. " + role2 + " tells " + role1 + " that the Ring must be destroyed to defeat " + role3 + "'s evil, but he also warns him that the Enemy has learned of the Ring's whereabouts from the creature Gollum and will seek to find it and kill its bearer. Despite the danger and hopelessness of the quest, " + role1 + " accepts the burden and resolves to take the Ring to the safety of the elven stronghold of Rivendell.";
}
function STORYNAME() {
var name = document.getElementById('a').value;
var x = document.getElementById('RB');
var y = document.getElementById('M');
var z = document.getElementById('E');
if (x.checked === true) {
role1 = name;
} else {
role1 = "Frodo";
}
if (y.checked === true) {
role2 = name;
} else {
role2 = "Gandalf";
}
if (z.checked === true) {
role3 = name;
} else {
role3 = "Sauron";
}
document.getElementById("story").innerHTML = "When the eccentric hobbit Bilbo Baggins leaves his home in the Shire, he gives his greatest treasure to his heir " + role1 + ": A magic ring that makes its wearer invisible and . Because of the difficulty Bilbo has in giving the ring away, his friend the wizard " + role2 + " the Grey suspects that the ring is more than it appears. Some years later, " + role2 + " reveals to " + role1 + " that the ring is in fact the One Ring, forged by " + role3 + " the Dark Lord thousands of years before to enable him to dominate and enslave all of Middle-earth. " + role2 + " tells " + role1 + " that the Ring must be destroyed to defeat " + role3 + "'s evil, but he also warns him that the Enemy has learned of the Ring's whereabouts from the creature Gollum and will seek to find it and kill its bearer. Despite the danger and hopelessness of the quest, " + role1 + " accepts the burden and resolves to take the Ring to the safety of the elven stronghold of Rivendell.";
}@font-face {
font-family: Ringbearer;
src: url(Ringbearer.TTF);
}
.para1 {
font-family: Ringbearer;
text-align: center;
background-color: #FFFF75;
border: solid 4px black;
font-size: 30px;
width: 75%;
margin: 0 auto 10px;
background-image:url("Monaco_scroll_background.jpg");
}
.para2 {
font-family: Ringbearer;
text-align: center;
background-color: #FFFF75;
border: solid 4px black;
width: 75%;
margin: 0 auto 10px;
background-image:url("Monaco_scroll_background.jpg");
}
body {
background-image:url("forest.jpg");
background-attachment:fixed;
background-repeat: no-repeat;
background-size: 100% 100%;
}
html {
height: 100%
}
#Title {
background-size: 100% 100%;
}
#a {
margin: 0 auto;
}
#img1 {
border: solid 4px black;
}<body>
<center>
<img id="Title" src="http://i.imgur.com/AANaMuQ.png">
</center>
<div class="para1">
<h3>Plot Summary</h3>
The future of civilization rests in the fate of the One Ring, which has been lost for centuries. Powerful forces are unrelenting in their search for it. But fate has placed it in the hands of a young Hobbit named Frodo Baggins, who inherits the Ring and steps into legend. A daunting task lies ahead for Frodo when he becomes the Ringbearer - to destroy the One Ring in the fires of Mount Doom where it was forged.
<br>
</div>
<div class="para2">
<h3>Inputs</h3>
<form>
<p>Input your character's name here:</p>
<input type="text" id="a" />
<p>Choose your character's role:</p>
<input type="radio" name="role" id="RB">Ringbearer</input>
<br>
<input type="radio" name="role" id="M">Wizard</input>
<br>
<input type="radio" name="role" id="E">Evil Overlord</input>
<br>
<br>
<input value="Begin Your Journey" type="button" onclick="STORYNAME()">
</form>
</div>
<div class="para2">
<br>
<img id="img1" src="shire5.jpg">
<p id="story">ASDASDASD.</p>
</div>
</body>