显示Javascript函数的结果

Question

I'm trying to get a javascript function to print out, but nothing comes up. 我正在尝试打印出javascript函数，但没有任何反应。 Essentially I'm just setting up a basic page of text boxes, radio buttons and checkboxes for users to fill out and the results of those elements will print out to create a basic barebones profile page. 本质上，我只是在设置文本框，单选按钮和复选框的基本页面供用户填写，然后打印出这些元素的结果以创建基本的准系统配置文件页面。

I apologize in advance for any sloppy or obsolete coding, I'm starting out with this stuff (my first semester of classes in web design). 对于任何草率或过时的编码，我都表示歉意，我首先介绍了这些内容（我在Web设计课程的第一学期）。 I'm assuming I've made a minor error that I'm not catching that's screwing up with the rest of the code, or I'm just plain missing a key line of code. 我假设我犯了一个小错误，但我没有发现那是与其余代码搞砸了，或者我只是简单地缺少了关键的一行代码。

Here's the code below (Javascript): ` 这是下面的代码（Javascript）：

function validate()
{
    dataOut = document.getElementById("profileOut");

    var color = document.profileIn.bgcolor.value;
    style.backgroundColor = color;

    var border = document.profileIn.border.value;
    style.border = border;

    var name = document.profileIn.name.value;
    dataOut.innerHTML = "<h1 id='name'>" name "</p>";

    if  (document.GetElementById('sportsgames').checked {
        dataOut.innerHTML = "<img src='images/sportsgames.jpg' alt='I like sports and games' />";
    } else if  (document.GetElementById('tvfilm').checked {
        dataOut.innerHTML = "<img src='images/tvfilm.jpg' alt='I like tv and film' />";
    } else if  (document.GetElementById('artlit').checked {
        dataOut.innerHTML = "<img src='images/artlit.jpg' alt='I like art and literature' />";
    } else {
        dataOut.innerHTML = "<img src='images/nothing.jpg' alt='I hate everything' />";
    }

    var entry1 = document.profileIn.entry1.value;
    dataOut.innerHTML = "<p id='para1'>" entry1 "</p>";
    document.getElementById("para1").style.color="#0000FF";
    var entry2 = document.profileIn.entry2.value;
    dataOut.innerHTML = "<p id='para2'>" entry2 "</p>";
    document.getElementById("para2").style.color="#FF0000";

    var years = document.profileIn.years.value;
    dataOut.innerHTML = "<p>I have been practicing this hobby for " + years + " years.</p>";

    var music = document.profileIn.music.value;
    dataOut.innerHTML = "<p> My favorite music genre is " + music + ".</p>";

    var birthday = document.profileIn.birthday.value;
    dataOut.innerHTML = "<p>Birthday:" + music + "</p>";

    var email = document.profileIn.email.value;
    dataOut.innerHTML = "<p> E-Mail:" + music + "</p>";

    var website = document.profileIn.website.value;
    dataOut.innerHTML = "<p>Website:" + music + "</p>";

    document.getElementById('profileOut').innerHTML = profileOut;
}

</script>`

And the HTML code as well: 还有HTML代码：

<body id="profile">
<form id="profileIn" name="profileIn" method="post" onSubmit="return validate()">
    <fieldset id ="set1">
        <legend>Your Page</legend>
        <label for="bgcolor">
        <input type="color" id="bgcolor" name="bgcolor" value="#FFFFFF" /> Select a background color<br>

        Choose the thickness of the border<br>
        <input type="range" id="border" name="border" value="5" min="0" max="10" step="1" /><br>
        0 1 2 3 4 5 6 7 8 9 10
    </fieldset>

    <fieldset id="set2">
        <legend>Your Profile</legend>
        Enter your name <input type="text" id="name" name="name" /> <br>

        Enter your favourite hobby <br>
        <input type="radio" id="sportsgames" name="hobby" value="sportsgames">Sports & Games<br>
        <input type="radio" id="tvfilm" name="hobby" value="tvfilm">TV & Film<br>
        <input type="radio" id="artlit" name="hobby" value="artlit">Art & Literature<br><br>

        <label for="entry">What part of that hobby is your favourite?</label><br>
        <textarea id="entry1" name="comments1" rows="8" cols="50">Type in here...</textarea><br>    

        <label for="entry">Which part of that hobby are you best at?</label><br>
        <textarea id="entry2" name="comments2" rows="8" cols="50">Type in here...</textarea><br>

        How many years have you practiced this hobby? <br>
        <input id="years" type="number" name="years" value="0" min="1" max="100" /><br>

        What's your favorite genre of music? <br>
        <select id="music">
        <option value="Rock">Rock<option>
        <option value="Pop">Pop<option>
        <option value="Country">Country<option>
        <option value="R&B">R&amp;B<option>
        <option value="Classical">Classical<option>
        </select>
    </fieldset>

    <fieldset id="set3">
        <legend>Your Info</legend>
        Birthday <input id="birthday" type="date" name="date" /> <br>
        Email <input id="email" name="email" type="email" placeholder="example@gmail.com" /> <br>
        Website <input id="website" name="website" type="url" placeholder="www.example.com" />
    </fieldset>

    <fieldset id="set4">
        <input class="btn" type="submit" id="btn1" value="Press to Continue" />
        <input class="btn" type="reset" id="btn2" value="Press to Clear" />
    </fieldset>
</form>

<section id="profileOut"> </section>

Any help's much appreciated, thanks guys! 非常感谢任何帮助，谢谢大家！

Answer 1

Lines like below are incorrect. 下面的行是不正确的。 In Javascript, appending should be done with + . 在Javascript中，附加应使用+完成。

dataOut.innerHTML = "<h1 id='name'>" name "</p>";

should be 应该

dataOut.innerHTML = "<h1 id='name'>" + name + "</p>";

Answer 2

do you get any errors in your console? 您的控制台出现任何错误吗？ (F12 in the browser). （浏览器中的F12）。 Also, the return isn't necessary as far as I know: 而且，据我所知，返回不是必需的：

onSubmit="return validate()">

can just be: 可以是：

onSubmit="validate()">

Answer 3

Always check your browser console for errors. 始终检查您的浏览器控制台是否有错误。 A cursory glance revealed: 粗略地瞥了一眼：

dataOut.innerHTML = "<p id='para1'>" entry1 "</p>";

Missing concatenation operators here. 此处缺少串联运算符。

In general, though, you seem to be repeatedly overwriting dataOut.innerHTML , which - assuming your code were correct - would just result in "Website: blah" and nothing else. 通常，尽管如此，您似乎重复覆盖了dataOut.innerHTML ，假设您的代码正确，则将导致“ Website：blah”，而没有其他结果。 Consider creating an element with createElement , adding text to it ( createTextNode , appendChild ) and then inserting it. 考虑使用createElement创建一个元素，向其中添加文本（ createTextNode ， appendChild ），然后将其插入。

Answer 4

First Error: 第一个错误：

dataOut.innerHTML = "<h1 id='name'>"+name+"</p>"; //Missing +

Second to Forth 倒数第二

if  (document.GetElementById('sportsgames').checked) //Missing )

Fifth Error: 第五错误：

dataOut.innerHTML = "<p id='para1'>"+entry1+"</p>"; //Missing +

Sixth Error: 第六错误：

dataOut.innerHTML = "<p id='para2'>"+entry2+"</p>"; //Missing +

Answer 5

You forgot to concatenate ( + ) some of your variables to your strings, like name, entry1 , entry2 so on 您忘记了将一些变量连接（ + ）到字符串中，例如名称， entry1 ， entry2等。

Always check your Developer Console if some of your JavaScript is not working. 如果您的某些JavaScript无法正常工作，请务必检查您的开发者控制台。

显示Javascript函数的结果

问题描述

5 个解决方案

解决方案1
0 2014-04-14 13:19:43

解决方案2
0 2014-04-14 13:20:55

解决方案3
0 2014-04-14 13:21:03

解决方案4
0 2014-04-14 13:21:33

解决方案5
0

显示Javascript函数的结果

问题描述

5 个解决方案

解决方案1 0 2014-04-14 13:19:43

解决方案2 0 2014-04-14 13:20:55

解决方案3 0 2014-04-14 13:21:03

解决方案4 0 2014-04-14 13:21:33

解决方案5 0

解决方案1
0 2014-04-14 13:19:43

解决方案2
0 2014-04-14 13:20:55

解决方案3
0 2014-04-14 13:21:03

解决方案4
0 2014-04-14 13:21:33

解决方案5
0