Question

我试图打印出一个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>`

以及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>

非常感谢任何帮助，谢谢你们！

Answer 1

以下行不正确。在Javascript中，附加内容应使用+。

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

应该是

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

Answer 2

你的控制台有错误吗？（浏览器中的F12）。此外，据我所知，回报并非必要：

onSubmit="return validate()">

可以是：

onSubmit="validate()">

Answer 3

始终检查浏览器控制台是否有错误。粗略地看了一眼：

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

此处缺少连接运算符。

一般情况下，你似乎反复覆盖dataOut.innerHTML，假设你的代码是正确的 - 只会导致＆＃34;网站：等等＃34}没有别的。考虑使用createElement创建元素，向其添加文本（createTextNode，appendChild），然后插入。

Answer 4

第一个错误：

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

第二个到第四个

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

第五个错误：

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

第六个错误：

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

Answer 5

您忘记将某些变量（+）连接到字符串，例如名称，entry1，entry2等等

如果您的某些JavaScript无效，请务必检查您的开发者控制台。

显示Javascript函数的结果

5 个答案: