innerHTML 不打印
innerHTML not printing
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."
}
里面HTML下面没有打印。
这是 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>
各种方法都试过了，还是打印不出来。 innerHTML 没有显示在我分配给它的 id 中。有人知道为什么吗？我也有 CSS
以防万一：
<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;
}
您在所有内容上都加上了分号，出现了错误。用下面的代码替换你的 JS（你的代码已修复）
编辑：我添加了一个片段，不客气
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>
正如 Jonathan M 正确指出的那样
if (y.checked == true) {
role2 = name;
};
else {
role2 = "Gandalf";
};
可能是罪魁祸首。如果您仍然有问题，我建议使用 media='print' css 条目并制作特定于打印的布局。
干杯，
PJ
编辑：ctwheels 的回答更好:)。任何体面的（WebStorm、Eclipse 等）IDE 都会为您捕获类似的东西。
您的 else 语句不能以分号结尾。此外，最好养成使用 三重等于运算符而不是双重等于 的习惯。这是一些固定代码：
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."
}
http://jsfiddle.net/gowrav/2kjL10se/
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."
};
下面是fiddle对你code.Hope的帮助。
在 javascript 中有分号不是坏事，你可以有也可以没有，但是在奇怪的地方有分号是不好的，尤其是在 if else 的末尾
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."
}
里面HTML下面没有打印。 这是 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>
各种方法都试过了，还是打印不出来。 innerHTML 没有显示在我分配给它的 id 中。有人知道为什么吗？我也有 CSS 以防万一：
<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;
}
您在所有内容上都加上了分号，出现了错误。用下面的代码替换你的 JS（你的代码已修复）
编辑：我添加了一个片段，不客气
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>
正如 Jonathan M 正确指出的那样
if (y.checked == true) {
role2 = name;
};
else {
role2 = "Gandalf";
};
可能是罪魁祸首。如果您仍然有问题，我建议使用 media='print' css 条目并制作特定于打印的布局。
干杯， PJ
编辑：ctwheels 的回答更好:)。任何体面的（WebStorm、Eclipse 等）IDE 都会为您捕获类似的东西。
您的 else 语句不能以分号结尾。此外，最好养成使用 三重等于运算符而不是双重等于 的习惯。这是一些固定代码：
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."
}
http://jsfiddle.net/gowrav/2kjL10se/
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."
};
下面是fiddle对你code.Hope的帮助。
在 javascript 中有分号不是坏事，你可以有也可以没有，但是在奇怪的地方有分号是不好的，尤其是在 if else 的末尾