Question

我正在学习构建一个HTML页面，用户可以使用javascript在页面上发表评论，最好使用HTML 5本地存储。

我已经做了很多研究，并且下面的代码会给出一个用于放置评论，名称和日期的html表单，然后在下面添加评论我还没有触及存储部分。

我现在面临的问题是它无法在Chrome或IE中运行，但是当我开始在JSfiddle中进行调试时，它正在完成需要完成的工作。任何人都可以帮助我解决我面临的问题吗？

function render(data) {

  var html = "<div class='commentBox'><div class='leftPanelImg'><img src='http://via.placeholder.com/100x100'/></div><div class='rightPanel'><span>" + data.name + "</span><div class='date'>" + data.date + "</div><p>" + data.body + "</p></div><div class='clear'></div></div>";

  $('#container').append(html);

}

$(document).ready(function() {

  var coment = [{
    "name": "username",
    "date": "01 Apr, 2017",
    "body": "this is a comment 1"
  }];

  for (var i = 0; i < coment.length; i++) {
    render(coment[i]);

  }

  $('#addComent').click(function() {
    var addObj = {
      "name": $('#name').val(),
      "date": $('#date').val(),
      "body": $('#bodyText').val()
    };

    coment.push(addObj);
    render(addObj);
    $('#name').val('');
    $('#date').val('dd/mm/yyyy');
    $('#bodyText').val('');
  });
});

html {
  width: 100%;
  height: 100%;
}

body {
  width: 100%;
  height: 100%;
}

.commentBox {
  padding: 1%;
  width: 96%;
  border: 1px solid #000;
  background-color: #f0f0f0;
  margin-bottom: 10px;
}

.leftPanelImg {
  width: 10%;
  float: left;
}

.leftPanelImg img {
  border-radius: 100%
}

.rightPanel {
  width: 85%;
  float: left;
  margin-left: 1%;
}

.clear {
  clear: both;
}

.form {
  padding: 10px;
  border: 1px solid #000;
  margin-bottom: 10px;
  text-align: center;
}

.form input[type="text"],
.form textarea,
.form imput[type="date"] {
  border: 1px solid #000;
  padding: 2px;
  width: 300px;
}

<div class='form'>
  <h5>Add Comments</h5>
  Name: <input type="text" id="name" /> <br/><br /> Date: <input type="date" id="date" /> <br/><br /> Body: <textarea rows="5" col "30" id="bodyText"></textarea><br /><br />
  <input type="button" id="addComent" value="Add Comment" />
</div>
<div id='container'>

</div>

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

Answer 1

实际上代码有效。您可能以错误的顺序插入了脚本。这是一个例子

    <html>
<body>
<style>
    html {
        width: 100%;
        height: 100%;
    }

    body {
        width: 100%;
        height: 100%;
    }

    .commentBox {
        padding: 1%;
        width: 96%;
        border: 1px solid #000;
        background-color: #f0f0f0;
        margin-bottom: 10px;
    }

    .leftPanelImg {
        width: 10%;
        float: left;
    }

    .leftPanelImg img {
        border-radius: 100%
    }

    .rightPanel {
        width: 85%;
        float: left;
        margin-left: 1%;
    }

    .clear {
        clear: both;
    }

    .form {
        padding: 10px;
        border: 1px solid #000;
        margin-bottom: 10px;
        text-align: center;
    }

    .form input[type="text"],
    .form textarea,
    .form imput[type="date"] {
        border: 1px solid #000;
        padding: 2px;
        width: 300px;
    }
</style>
<div class='form'>
    <h5>Add Comments</h5>
    Name: <input type="text" id="name" /> <br/><br /> Date: <input type="date" id="date" /> <br/><br /> Body: <textarea rows="5" col "30" id="bodyText"></textarea><br /><br />
    <input type="button" id="addComent" value="Add Comment" />
</div>
<div id='container'>

</div>

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script>
    function render(data) {

        var html = "<div class='commentBox'><div class='leftPanelImg'><img src='http://via.placeholder.com/100x100'/></div><div class='rightPanel'><span>" + data.name + "</span><div class='date'>" + data.date + "</div><p>" + data.body + "</p></div><div class='clear'></div></div>";

        $('#container').append(html);

    }

    $(document).ready(function() {

        var coment = [{
            "name": "username",
            "date": "01 Apr, 2017",
            "body": "this is a comment 1"
        }];

        for (var i = 0; i < coment.length; i++) {
            render(coment[i]);

        }

        $('#addComent').click(function() {
            var addObj = {
                "name": $('#name').val(),
                "date": $('#date').val(),
                "body": $('#bodyText').val()
            };

            coment.push(addObj);
            render(addObj);
            $('#name').val('');
            $('#date').val('dd/mm/yyyy');
            $('#bodyText').val('');
        });
    });
</script>
</body>
</html>

此外，您可以在此处查看plunker

Web应用程序中的用户注释

1 个答案: