在点击时附加元素

时间：2015-02-22 19:06:30

标签： javascript jquery html

[解决]

Codecademy没有使用我的脚本

我已经通过网络查询了这个问题，我已经将代码与其他正常工作的代码进行了比较，但我没有做任何工作。

我想要完成的是在用户按下提交按钮时创建一个div，文本区域中添加了文本。我现在不需要干净的表格，或者xss保护措施，我只需要在用户按下按钮时附加一个div。

代码：

HTML.index

<body>
<div id="page-background">
    <div id="page-footer">
        <textarea id="input-box"rows='4' cols='24' placeholder='Input Text Here'></textarea>
        <button id='input-button'>Submit</button>
    </div>
</div>
</body>

的script.js

$(document).ready(function(){
    $('#input-button').click(function(){

        var userInput = $('#input-box').val();
        $('#input-box').val('');

        $('#page-background').append('<div>' + userInput + '</div>');
    });
});

网站：http://www.codecademy.com/JamesTill/codebits/DbczHl/edit

2 个答案:

答案 0 :(得分：1)

的jQuery

确保您在<head>标记中或在结束</body>标记之前链接到jQuery。

<head>
    <script src="https://code.jquery.com/jquery-2.1.3.js"></script>
</head>

<body>
  <div id="page-background">
      <div id="page-footer">
          <textarea id="input-box"rows='4' cols='24' placeholder='Input Text Here'></textarea>
          <button id='input-button'>Submit</button>
      </div>
  </div>
</body>

答案 1 :(得分：0)

的JavaScript

var button = document.getElementById('input-button')
var pageBackground = document.getElementById('page-background')
var inputDiv = document.createElement('div')

button.addEventListener('click', function (event) {
    event.preventDefault()

    var userInput = document.getElementById('input-box').value
    inputDiv.textContent = userInput
    pageBackground.appendChild(inputDiv)
})

看起来像codecademy不能正常工作，但无论如何，这是一种在没有jQuery的情况下获得相同效果的方法。