Question

我遇到了JavaScript代码问题。我是编程的初学者，所以我请求帮助我。那么这个脚本必须做什么？单击提交按钮后，它必须在站点上写入两个表单字段的值。这是HTML代码：

<!DOCTYPE HTML>
<html lang="pl_PL">
<head>
<title>KidGifter</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/style.css" />
<script src="js/scripts.js"></script>
</head>
<body>
<div id="list_help">
    <img id="smile_help" src="img/smile.png">
    <div id="info-form">
    <p id="l_h_title">Hejka!</p>
    <p id="l_h_text">Tutaj możesz stworzyć swoją liste prezentów i udostępnić ją na Facebooku lub Twitterze. Niech twoi znajomi i bliscy wiedzą co chcesz dostać!</p>
    <p id="l_h_formtitle">Najpierw wprowadź nazwę prezentu:</p>
    <form>
    <input type="text" id="formtitle">
    <p id="l_h_formdesc">A teraz możesz krótko go opisać:</p>
    <textarea id="formdescription" maxlength="230"></textarea>
    <input type="submit" value="+ Dodaj" id="sub" />
    </form>
        </div>
     </div>
</body>
</html>

这是JavaScript代码：

window.onload = function(){
    var f1 = document.getElementById("f1");
    var f2 = document.getElementById("f2");
    var submit = document.getElementById("sub");
    var body = document.getElementsByTagName("body");
    submit.onclick = function() {
        html = "";
        html += "<div class='gift'>";
        html += "<div class='gifttext'>";
        html += "<p class='GiftTitle'>" + f1.value + "</p>";
        html += "<p class='GiftDescription'>" + f2.value + "</p>";
        html += "</div>";
        html += "</div>";
        body.appendChild(html);
        return false;
    }
}

谢谢你的帮助！：）

Answer 1

您必须创建一个DOM元素，将其余的HTML放在该DOM元素中，然后将这个DOM元素用于.appendChild()。 appendChild()没有字符串，它需要一个DOM元素。此外，您的body变量并不正确。这是一个固定的版本：

window.onload = function () {
    var f1 = document.getElementById("f1");
    var f2 = document.getElementById("f2");
    var submit = document.getElementById("sub");
    submit.onclick = function () {
        var html = "<div class='gifttext'>";
        html += "<p class='GiftTitle'>" + f1.value + "</p>";
        html += "<p class='GiftDescription'>" + f2.value + "</p>";
        html += "</div>";
        var div = document.createElement("div");
        div.className = "gift";
        div.innerHTML = html;
        document.body.appendChild(div);
        return false;
    }
}

项目变更：

将html变量声明为局部变量，因此它不是隐式全局变量。
从HTML字符串中删除外部div。
使用document.createElement("div")创建外部div。
为该div分配所需的类名。
将HTML分配给刚刚创建的div的.innerHTML属性。
将div添加到document.body对象。
删除获取body变量的代码（错误且document.body已存在，作为正文对象的快捷方式引用）。

Answer 2

我建议，既然你刚接触javascript，要查找jquery，它就是一个让这样的事情变得更容易的库。

var aDiv= document.createElement('div');
//// create p blah blah
aDiv.className = "giftText";
body.appendChild(aDiv);

但是使用jquery它更像是这样。

$('body').append($('<div class="giftText">);

Answer 3

这是你问题代码的工作方式：

http://jsfiddle.net/hxsFH/

HTML：

<body>
    <div id="list_help">
        <img id="smile_help" src="img/smile.png">
        <div id="info-form">
            <p id="l_h_title">Hejka!</p>
            <p id="l_h_text">Tutaj możesz stworzyć swoją liste prezentów i udostępnić ją na Facebooku lub Twitterze. Niech twoi znajomi i bliscy wiedzą co chcesz dostać!</p>
            <p id="l_h_formtitle">Najpierw wprowadź nazwę prezentu:</p>
            <form>
                <input type="text" id="formtitle" />
                <p id="l_h_formdesc">A teraz możesz krótko go opisać:</p>
                <textarea id="formdescription" maxlength="230"></textarea>
                <input type="button" value="+ Dodaj" id="sub" />
            </form>
        </div>
    </div>
</body>

的javascript：

var f1 = document.getElementById("formtitle");
var f2 = document.getElementById("formdescription");
var submit = document.getElementById("sub");
var body = document.getElementsByTagName("body")[0];
submit.onclick = function () {
    html = "";
    html += "<div class='gift'>";
    html += "<div class='gifttext'>";
    html += "<p class='GiftTitle'>" + f1.value + "</p>";
    html += "<p class='GiftDescription'>" + f2.value + "</p>";
    html += "</div>";
    html += "</div>";
    var d = document.createElement('div');
    d.innerHTML = html;
    body.appendChild(d);
    return false;
}

如何使用JavaScript将元素添加到HTML5代码中

3 个答案: