innerHTML不打印

时间:2015-05-27 19:10:31

标签: javascript html css innerhtml

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."
            }

innerHTML未在下面打印。 这是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;
        }

4 个答案:

答案 0 :(得分:0)

你在所有事情上都放置了冒号,发生了错误。用以下代码替换您的JS(您的代码已修复)

编辑:我添加了一个片段,欢迎您

<强> JS

hardbol

&#13;
&#13;
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.";
}
&#13;
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.";
}
&#13;
@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;
}
&#13;
&#13;
&#13;

答案 1 :(得分:0)

正如Jonathan M正确指出的那样

if (y.checked == true) {
    role2 = name;
};
else {
    role2 = "Gandalf";
};

可能是罪魁祸首。如果您仍有问题,我建议使用media ='print'css条目并制作特定于打印的布局。

干杯, PJ

编辑:ctwheels的答案更好:)。任何体面的(WebStorm,Eclipse等)IDE都会为你捕获这样的东西。

答案 2 :(得分:0)

您的其他语句不能以分号结尾。此外,养成使用三等于运算符而不是双等于的习惯是一种很好的做法。这是一些固定的代码:

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."
            }

答案 3 :(得分:0)

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."
  };

以下是您的代码的小提示。希望它有所帮助。

在javascript中使用分号并不是一件坏事,你可以拥有它们,也可以不拥有它们,但是在奇数位置下摆是不好的,特别是在if else的结尾处